Replaced border-collapse by border-spacing:0, and removed the cell bo…

…rders (#888)
Netflix · Jan 7, 2022 · 959f2ed · 959f2ed
1 parent a06d941
commit 959f2ed
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 51 deletions.
diff --git a/metaflow/plugins/cards/card_modules/bundle.css b/metaflow/plugins/cards/card_modules/bundle.css
@@ -1,49 +1,4 @@
-.container.svelte-teyund{width:100%;display:flex;flex-direction:column;position:relative}@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
-
-:root {
-  --bg: #ffffff;
-  --black: #333;
-  --blue: #0c66de;
-  --dk-grey: #767676;
-  --dk-primary: #ef863b;
-  --dk-secondary: #13172d;
-  --dk-tertiary: #0f426e;
-  --error: #cf483e;
-  --grey: rgba(0, 0, 0, 0.125);
-  --highlight: #f8d9d8;
-  --lt-blue: #4fa7ff;
-  --lt-grey: #f3f3f3;
-  --lt-lt-grey: #f9f9f9;
-  --lt-primary: #ffcb8b;
-  --lt-secondary: #434d81;
-  --lt-tertiary: #4189c9;
-  --primary: #faab4a;
-  --quadrary: #f8d9d8;
-  --secondary: #2e3454;
-  --tertiary: #2a679d;
-  --white: #ffffff;
-
-  --component-spacer: 3rem;
-  --aside-width: 20rem;
-
-  --mono-font: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-}
-
-html, body {
-  margin: 0;
-  min-height: 100vh;
-  overflow-y: visible;
-  padding: 0;
-  width: 100%;
-}
-
-#app {
-  width: 100%;
-  min-height: 100vh;
-}
-.mf-card * {
+.container.svelte-teyund{width:100%;display:flex;flex-direction:column;position:relative}.mf-card * {
   box-sizing: border-box;
 }
 
@@ -78,7 +33,7 @@ pre.mono) {
 .mf-card :is(table,
 th,
 td) {
-  border-collapse: collapse;
+  border-spacing: 1px;
   text-align: center;
   color: var(--black);
 }
@@ -91,7 +46,7 @@ td) {
 .mf-card td {
   padding: 0.66rem 1.25rem;
   background: var(--lt-lt-grey);
-  border: 1px solid #fff;
+  border: none;
 }
 
 .mf-card th {
@@ -154,10 +109,55 @@ pre[class*="language-"]) {
   text-shadow: none;
   user-select: auto;
 }
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+
+:root {
+  --bg: #ffffff;
+  --black: #333;
+  --blue: #0c66de;
+  --dk-grey: #767676;
+  --dk-primary: #ef863b;
+  --dk-secondary: #13172d;
+  --dk-tertiary: #0f426e;
+  --error: #cf483e;
+  --grey: rgba(0, 0, 0, 0.125);
+  --highlight: #f8d9d8;
+  --lt-blue: #4fa7ff;
+  --lt-grey: #f3f3f3;
+  --lt-lt-grey: #f9f9f9;
+  --lt-primary: #ffcb8b;
+  --lt-secondary: #434d81;
+  --lt-tertiary: #4189c9;
+  --primary: #faab4a;
+  --quadrary: #f8d9d8;
+  --secondary: #2e3454;
+  --tertiary: #2a679d;
+  --white: #ffffff;
+
+  --component-spacer: 3rem;
+  --aside-width: 20rem;
+
+  --mono-font: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+}
+
+html, body {
+  margin: 0;
+  min-height: 100vh;
+  overflow-y: visible;
+  padding: 0;
+  width: 100%;
+}
+
+#app {
+  width: 100%;
+  min-height: 100vh;
+}
 /* PrismJS 1.25.0
 https://prismjs.com/download.html#themes=prism&languages=clike+python */
 code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
-.nav.svelte-1kdpgko.svelte-1kdpgko{border-radius:0 0 5px 0;display:none;margin:0;top:0}ul.navList.svelte-1kdpgko.svelte-1kdpgko{list-style-type:none}ul.navList.svelte-1kdpgko ul.svelte-1kdpgko{margin:0.5rem 1rem 2rem}.navList.svelte-1kdpgko li.svelte-1kdpgko{display:block;margin:0}.navItem.svelte-1kdpgko li.svelte-1kdpgko:hover{color:var(--blue)}.pageId.svelte-1kdpgko.svelte-1kdpgko{display:block;border-bottom:1px solid var(--grey);padding:0 0.5rem;margin-bottom:1rem}@media(min-width: 60rem){.nav.svelte-1kdpgko.svelte-1kdpgko{display:block}ul.navList.svelte-1kdpgko.svelte-1kdpgko{text-align:left}.navList.svelte-1kdpgko li.svelte-1kdpgko{display:block;margin:0.5rem 0}}.modal.svelte-9vqlpe{background:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;cursor:pointer}.modalContainer > *{position:relative;background-color:white;border-radius:5px;flex:0 1 auto;cursor:default;padding:1rem}.modal img{max-height:80vh !important}.cancelButton.svelte-9vqlpe{position:absolute;top:1rem;right:1rem;color:white;font-size:2rem;cursor:pointer}.cancelButton.svelte-9vqlpe:hover{color:var(--blue)}.mainContainer.svelte-13ho8jo{max-width:110rem}main.svelte-13ho8jo{flex:0 1 auto;max-width:100rem;padding:1.5rem}@media(min-width: 60rem){main.svelte-13ho8jo{margin-left:var(--aside-width)}}.embed main{margin:0 auto}aside.svelte-1okdv0e{display:none;line-height:2;text-align:left}@media(min-width: 60rem){aside.svelte-1okdv0e{display:flex;flex-direction:column;height:100vh;justify-content:space-between;padding:2.5rem 0 1.5rem 1.5rem;position:fixed;width:var(--aside-width)}}.embed aside{display:none}aside ul{list-style-type:none}aside a, aside button, aside a:visited{text-decoration:none;cursor:pointer;font-weight:700;color:var(--black)}aside a:hover, aside button:hover{text-decoration:underline}.logoContainer svg{width:100%;max-width:140px;margin-bottom:3.75rem;height:auto}header.svelte-1ugmt5d{margin-bottom:var(--component-spacer)}.page.svelte-v7ihqd:last-of-type{margin-bottom:var(--component-spacer)}.page:last-of-type section:last-of-type hr{display:none}.tableContainer.svelte-16jj28m{width:100%;overflow:auto}table.svelte-16jj28m{width:100%}.log.svelte-1jhmsu{background:var(--lt-grey) !important;font-size:0.9rem;padding:2rem}figure.svelte-1x96yvr{background:var(--lt-grey);padding:1rem;border-radius:5px;text-align:center;margin:0 auto var(--component-spacer)}@media(min-width: 60rem){figure.svelte-1x96yvr{margin-bottom:0}}img.svelte-1x96yvr{max-width:100%;max-height:500px}.label.svelte-1x96yvr{font-weight:bold;margin:0.5rem 0}.description.svelte-1x96yvr{font-size:0.9rem;font-style:italic;text-align:center;margin:0.5rem 0}.subtitle.svelte-lu9pnn{font-size:1rem;text-align:left}.heading.svelte-17n0qr8{margin-bottom:1.5rem}.sectionItems.svelte-17n0qr8{display:block}.sectionItems .imageContainer{max-height:500px}.container.svelte-17n0qr8{scroll-margin:var(--component-spacer)}hr.svelte-17n0qr8{background:var(--grey);border:none;height:1px;margin:var(--component-spacer) 0;padding:0}@media(min-width: 60rem){.sectionItems.svelte-17n0qr8{display:grid;grid-gap:2rem}}.title.svelte-117s0ws{text-align:left}.idCell.svelte-pt8vzv{font-weight:bold;text-align:right;background:var(--lt-grey);width:12%}.codeCell.svelte-pt8vzv{text-align:left;user-select:all}.tableContainer.svelte-1u48v6f{overflow:auto;max-height:50rem}th.svelte-1u48v6f{position:sticky;top:-1px;z-index:2;white-space:nowrap;background:var(--white)}td.svelte-gl9h79{text-align:left}td.labelColumn.svelte-gl9h79{text-align:right;background-color:var(--lt-grey);font-weight:700;width:12%;white-space:nowrap}.stepwrapper.svelte-18aex7a{display:flex;align-items:center;flex-direction:column;width:100%;position:relative;min-width:var(--dag-step-width)}.childwrapper.svelte-18aex7a{display:flex;width:100%}.gap.svelte-18aex7a{height:var(--dag-gap)}:root {
+aside.svelte-1okdv0e{display:none;line-height:2;text-align:left}@media(min-width: 60rem){aside.svelte-1okdv0e{display:flex;flex-direction:column;height:100vh;justify-content:space-between;padding:2.5rem 0 1.5rem 1.5rem;position:fixed;width:var(--aside-width)}}.embed aside{display:none}aside ul{list-style-type:none}aside a, aside button, aside a:visited{text-decoration:none;cursor:pointer;font-weight:700;color:var(--black)}aside a:hover, aside button:hover{text-decoration:underline}.logoContainer svg{width:100%;max-width:140px;margin-bottom:3.75rem;height:auto}.mainContainer.svelte-13ho8jo{max-width:110rem}main.svelte-13ho8jo{flex:0 1 auto;max-width:100rem;padding:1.5rem}@media(min-width: 60rem){main.svelte-13ho8jo{margin-left:var(--aside-width)}}.embed main{margin:0 auto}.nav.svelte-1kdpgko.svelte-1kdpgko{border-radius:0 0 5px 0;display:none;margin:0;top:0}ul.navList.svelte-1kdpgko.svelte-1kdpgko{list-style-type:none}ul.navList.svelte-1kdpgko ul.svelte-1kdpgko{margin:0.5rem 1rem 2rem}.navList.svelte-1kdpgko li.svelte-1kdpgko{display:block;margin:0}.navItem.svelte-1kdpgko li.svelte-1kdpgko:hover{color:var(--blue)}.pageId.svelte-1kdpgko.svelte-1kdpgko{display:block;border-bottom:1px solid var(--grey);padding:0 0.5rem;margin-bottom:1rem}@media(min-width: 60rem){.nav.svelte-1kdpgko.svelte-1kdpgko{display:block}ul.navList.svelte-1kdpgko.svelte-1kdpgko{text-align:left}.navList.svelte-1kdpgko li.svelte-1kdpgko{display:block;margin:0.5rem 0}}.modal.svelte-9vqlpe{background:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;cursor:pointer}.modalContainer > *{position:relative;background-color:white;border-radius:5px;flex:0 1 auto;cursor:default;padding:1rem}.modal img{max-height:80vh !important}.cancelButton.svelte-9vqlpe{position:absolute;top:1rem;right:1rem;color:white;font-size:2rem;cursor:pointer}.cancelButton.svelte-9vqlpe:hover{color:var(--blue)}header.svelte-1ugmt5d{margin-bottom:var(--component-spacer)}.tableContainer.svelte-16jj28m{width:100%;overflow:auto}table.svelte-16jj28m{width:100%}.log.svelte-1jhmsu{background:var(--lt-grey) !important;font-size:0.9rem;padding:2rem}figure.svelte-1x96yvr{background:var(--lt-grey);padding:1rem;border-radius:5px;text-align:center;margin:0 auto var(--component-spacer)}@media(min-width: 60rem){figure.svelte-1x96yvr{margin-bottom:0}}img.svelte-1x96yvr{max-width:100%;max-height:500px}.label.svelte-1x96yvr{font-weight:bold;margin:0.5rem 0}.description.svelte-1x96yvr{font-size:0.9rem;font-style:italic;text-align:center;margin:0.5rem 0}.heading.svelte-17n0qr8{margin-bottom:1.5rem}.sectionItems.svelte-17n0qr8{display:block}.sectionItems .imageContainer{max-height:500px}.container.svelte-17n0qr8{scroll-margin:var(--component-spacer)}hr.svelte-17n0qr8{background:var(--grey);border:none;height:1px;margin:var(--component-spacer) 0;padding:0}@media(min-width: 60rem){.sectionItems.svelte-17n0qr8{display:grid;grid-gap:2rem}}.page.svelte-v7ihqd:last-of-type{margin-bottom:var(--component-spacer)}.page:last-of-type section:last-of-type hr{display:none}.subtitle.svelte-lu9pnn{font-size:1rem;text-align:left}.title.svelte-117s0ws{text-align:left}.idCell.svelte-pt8vzv{font-weight:bold;text-align:right;background:var(--lt-grey);width:12%}.codeCell.svelte-pt8vzv{text-align:left;user-select:all}td.svelte-gl9h79{text-align:left}td.labelColumn.svelte-gl9h79{text-align:right;background-color:var(--lt-grey);font-weight:700;width:12%;white-space:nowrap}.tableContainer.svelte-1u48v6f{overflow:auto;max-height:50rem}th.svelte-1u48v6f{position:sticky;top:-1px;z-index:2;white-space:nowrap;background:var(--white)}.stepwrapper.svelte-18aex7a{display:flex;align-items:center;flex-direction:column;width:100%;position:relative;min-width:var(--dag-step-width)}.childwrapper.svelte-18aex7a{display:flex;width:100%}.gap.svelte-18aex7a{height:var(--dag-gap)}:root {
   --dag-border: #282828;
   --dag-bg-static: var(--lt-grey);
   --dag-bg-success: #a5d46a;

diff --git a/metaflow/plugins/cards/ui/src/app.css b/metaflow/plugins/cards/ui/src/app.css
@@ -33,7 +33,7 @@ pre.mono) {
 .mf-card :is(table,
 th,
 td) {
-  border-collapse: collapse;
+  border-spacing: 1px;
   text-align: center;
   color: var(--black);
 }
@@ -46,7 +46,7 @@ td) {
 .mf-card td {
   padding: 0.66rem 1.25rem;
   background: var(--lt-lt-grey);
-  border: 1px solid #fff;
+  border: none;
 }
 
 .mf-card th {