@opentrons/components 0.3.7-alpha.0 → 0.3.9-alpha.0

package/lib/src/lists/lists.module.css

@@ -1,171 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --list-padding-large: 1rem;
-  --list-padding-small: 0.75rem;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.disabled {
-  background-color: transparent;
-
-  & * {
-    background-color: transparent;
-    color: var(--c-font-disabled);
-    fill: var(--c-font-disabled);
-    outline-color: #eee;
-  }
-}
-
-.panel_group,
-.titled_list,
-.list_item {
-  background-color: white;
-}
-
-.panel_group {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
-}
-
-.hover_border {
-  outline: var(--bd-width-default) solid var(--c-highlight);
-}
-
-.header_text {
-  color: var(--c-font-disabled);
-  font-size: var(--fs-caption);
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-/*
-  TODO(IL, 2021-07-30): when consumers of this class are migrated to CSS-in-JS, keep in mind
-  the meaning of .title_bar is vague, it is widely used by several unrelated components.
-  Also, it's almost the same as .titled_list_title_bar -- they are the same
-  except for flex-related rules.
-*/
-.title_bar {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  text-decoration: none;
-}
-
-/* Specifically for TitledList */
-.titled_list_title_bar {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  text-decoration: none;
-}
-
-.titled_list_selected {
-  & .title_bar {
-    background-color: var(--c-bg-selected);
-
-    & * {
-      color: var(--c-selected-dark);
-      font-weight: var(--fw-semibold);
-    }
-  }
-}
-
-.title {
-  margin: 0;
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-regular);
-  text-transform: uppercase;
-}
-
-.title_enabled {
-  color: var(--c-font-dark);
-}
-
-.title_disabled {
-  color: var(--c-font-disabled);
-}
-
-.title_bar_icon {
-  height: 1.5rem;
-  color: var(--c-font-dark);
-}
-
-.title_bar_error {
-  background-color: var(--c-error-light);
-}
-
-.icon_left_of_title {
-  height: 1.2rem;
-  margin-right: 0.5rem;
-}
-
-.icon_left_of_title_container {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.title_bar_carat {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  padding: calc(var(--list-padding-small) - var(--bd-width-default));
-  padding-top: 1rem;
-
-  &:hover {
-    background-color: color-mod(var(--c-black) alpha(5%));
-  }
-}
-
-.list {
-  padding-left: 0;
-  margin: 0;
-  list-style-type: none;
-}
-
-.list_item {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  padding: var(--list-padding-small);
-  margin: 0;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  line-height: 1.25;
-
-  &:hover {
-    background-color: var(--c-bg-hover);
-  }
-
-  &.active {
-    background-color: var(--c-bg-selected);
-  }
-}
-
-a.list_item {
-  text-decoration: none;
-}
-
-.list_alert {
-  width: 100%;
-  padding: var(--list-padding-small);
-  background-color: var(--c-bg-light);
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-style: italic;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-}
-
-.item_icon {
-  height: calc(1.25 * var(--fs-body-1));
-  flex: none;
-  margin-right: 0.5rem;
-}

package/lib/src/modals/modals.module.css

@@ -1,275 +0,0 @@
-/* common styling for modals */
-@import '../index.module.css';
-
-.modal {
-  position: fixed;
-  z-index: 1;
-
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-  display: flex;
-
-  /* from legacy --center-children */
-  align-items: center;
-
-  /* from legacy --center-children */
-
-  align-items: flex-start;
-
-  /* from legacy --center-children */
-  justify-content: center;
-  padding: 4rem;
-}
-
-.modal_page {
-  position: absolute;
-
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-
-  display: flex;
-
-  /* from legacy --flex-start */
-
-  flex-direction: column;
-
-  /* from legacy --flex-start */
-  align-items: center;
-
-  /* from legacy --flex-start */
-  justify-content: flex-start;
-  padding: 4.5rem 3rem 1rem 3rem;
-}
-
-.overlay {
-  position: absolute;
-
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-
-  background-color: rgba(0, 0, 0, 0.9);
-}
-
-.title_bar {
-  position: absolute;
-  z-index: 3;
-  top: 0;
-  right: 0;
-  left: 0;
-  width: 100%;
-}
-
-.modal_contents {
-  z-index: 1;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  max-width: 38rem;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-
-  background-color: white;
-}
-
-.modal_page_contents {
-  z-index: 1;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  max-width: 38rem;
-  max-height: 100%;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-  padding-top: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-
-  background-color: white;
-  overflow-y: auto;
-}
-
-.modal_heading {
-  /* from legacy --font-header-dark */
-
-  margin-top: 0;
-  margin-bottom: 1rem;
-
-  /* from legacy --font-header-dark */
-  color: var(--c-font-dark);
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-  font-weight: var(--fw-semibold);
-  text-transform: capitalize;
-}
-
-.alert_modal_wrapper {
-  position: relative;
-  max-height: 100%;
-  padding-top: 4rem;
-  border-radius: 0;
-}
-
-.alert_modal_heading.no_icon_heading {
-  padding-left: 2rem;
-}
-
-.no_alert_header {
-  padding-top: 1.5rem;
-}
-
-.spinner_modal_contents {
-  z-index: 4;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --font-body-2-light */
-
-  max-width: 30rem;
-  flex-direction: column;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-  padding-top: 3rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-  background-color: transparent;
-
-  /* from legacy --font-body-2-light */
-  color: var(--c-font-light);
-
-  /* from legacy --modal-contents */
-  font-size: var(--fs-body-2);
-  font-style: italic;
-
-  /* from legacy --font-body-2-light */
-  font-weight: var(--fw-regular);
-  text-align: center;
-}
-
-.spinner_modal_icon {
-  width: 7.5rem;
-  margin-bottom: 3rem;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.alert_modal {
-  z-index: 10;
-}
-
-.alert_modal_overlay {
-  background-color: rgba(115, 115, 115, 0.9);
-}
-
-.alert_modal_contents {
-  /* from legacy --font-body-2-dark */
-
-  width: 100%;
-  max-height: 100%;
-  padding: 1rem;
-
-  /* from legacy --font-body-2-dark */
-  color: var(--c-font-dark);
-  font-size: var(--fs-body-2);
-
-  /* from legacy --font-body-2-dark */
-  font-weight: var(--fw-regular);
-
-  & > p {
-    padding-bottom: 1rem;
-  }
-}
-
-.alert_modal_heading {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  background-color: #e0e0e0;
-
-  /* from legacy --font-header-dark */
-  color: var(--c-font-dark);
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-
-  font-weight: normal;
-}
-
-.alert_modal_icon {
-  height: 1.125rem;
-  margin-right: 0.75rem;
-}
-
-.alert_modal_buttons {
-  margin-top: 1rem;
-  float: right;
-}
-
-.alert_button {
-  margin-left: 1rem;
-}

package/lib/src/molecules/DeckInfoLabel/deckinfolabel.module.css

@@ -1,42 +0,0 @@
-.label {
-  display: inline-flex;
-  width: max-content;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-2) var(--spacing-4);
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--border-radius-8);
-  background-color: inherit;
-}
-
-.deck_info_label_highlight {
-  border-color: transparent;
-  background-color: var(--blue-50);
-}
-
-.deck_info_label_no_highlight {
-  border-color: var(--black-90);
-}
-
-.large {
-  height: 1.75rem;
-  border-width: 2px;
-}
-
-.default {
-  height: 1.25rem;
-}
-
-@media (height: 600px) and (width: 1024px) {
-  .label {
-    height: var(--spacing-32);
-    padding: var(--spacing-4) var(--spacing-6);
-    border-width: 2px;
-    border-radius: var(--border-radius-12);
-  }
-
-  .has_deck_label {
-    padding-right: var(--spacing-8);
-  }
-}

package/lib/src/molecules/ReleaseNotes/styles.module.css

@@ -1,66 +0,0 @@
-@import '../../index.module.css';
-
-.release_notes {
-  width: 100%;
-  max-height: 100%;
-  padding: 0 0.5rem;
-
-  & > h1 {
-    margin-bottom: 1rem;
-    color: var(--c-font-dark); /* from legacy --font-header-dark */
-    font-size: var(--fs-header); /* from legacy --font-header-dark */
-    font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-  }
-
-  & > h2 {
-    margin-top: 1rem;
-    margin-bottom: 0.75rem;
-    color: var(--c-font-dark); /* from legacy --font-header-dark */
-    font-size: var(--fs-header); /* from legacy --font-header-dark */
-    font-weight: var(--fw-regular);
-  }
-
-  & > h3 {
-    margin-top: 0.75rem;
-    margin-bottom: 0.5rem;
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-    font-weight: var(--fw-semibold);
-  }
-
-  & ul,
-  & ol {
-    margin-bottom: 0.25rem;
-    margin-left: 1.25rem;
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-size: var(--fs-body-2);
-  }
-
-  & li {
-    margin: 0.25rem 0;
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-size: var(--fs-body-2);
-  }
-
-  & code {
-    color: var(--c-font-dark);
-    font-family: monospace;
-  }
-
-  & pre {
-    padding: 0.5rem 0.75rem;
-    margin: 0.5rem 0;
-    background-color: var(--c-font-dark);
-
-    & code {
-      color: var(--c-font-light);
-    }
-  }
-
-  & p {
-    margin-bottom: 1rem;
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-    font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-  }
-}

package/lib/src/nav/SidePanel.module.css

@@ -1,34 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --sidebar-width: 18.25rem;
-}
-
-.panel {
-  position: relative;
-  overflow: visible;
-  flex-shrink: 0;
-  padding: 0 4px;
-  border-right: var(--bd-light);
-  background-color: var(--c-bg-light);
-}
-
-.title_bar {
-  display: flex;
-  width: var(--sidebar-width);
-  align-items: center;
-}
-
-.title {
-  margin: 1rem auto;
-  color: var(--c-font-dark); /* from legacy --font-header-dark */
-  font-size: var(--fs-header); /* from legacy --font-header-dark */
-  font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-}
-
-.panel_contents {
-  width: var(--sidebar-width);
-  height: calc(100vh - 3.5rem);
-  overflow-x: hidden;
-  overflow-y: auto;
-}

package/lib/src/slotmap/styles.module.css

@@ -1,18 +0,0 @@
-@import '../index.module.css';
-
-.slot_rect {
-  fill: none;
-  stroke: var(--c-med-gray);
-}
-
-.slot_occupied {
-  fill: var(--c-light-gray);
-}
-
-.slot_occupied.slot_error {
-  fill: var(--c-warning-light);
-}
-
-.collision_icon {
-  color: var(--c-med-gray);
-}

package/lib/src/structure/Pill.module.css

@@ -1,16 +0,0 @@
-@import '../index.module.css';
-
-.pill {
-  padding: 0.5em;
-  border-radius: var(--bd-radius-pill);
-  color: var(--c-white);
-}
-
-.pill:empty::before {
-  /* zero width space to give empty pill the same line height */
-  content: "\200b";
-}
-
-.invert_text {
-  color: var(--c-black);
-}

package/lib/src/structure/Splash.module.css

@@ -1,16 +0,0 @@
-@import '../index.module.css';
-
-.splash {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  color: var(--c-light-gray);
-
-  & > * {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    max-height: 100%;
-    transform: translate(-50%, -50%);
-  }
-}