joyent-portal/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SectionList Anchor 1`] = `
.c2 {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
}

.c1 {
  color: rgb(59,70,204);
  -webkit-text-fill-color: currentcolor;
}

.c1:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c0 {
  color: rgb(70,70,70);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.75rem;
  padding-bottom: 1rem;
  position: relative;
}

.c0.active {
  font-weight: 600;
}

.c0.active:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(70,70,70);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

<a
  className="c0 c1 c2"
>
  Instances
</a>
`;

exports[`SectionList Anchor 2`] = `
.c2 {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
}

.c1 {
  color: rgb(59,70,204);
  -webkit-text-fill-color: currentcolor;
}

.c1:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c0 {
  color: rgb(70,70,70);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.75rem;
  padding-bottom: 1rem;
  position: relative;
  font-weight: 600;
}

.c0.active {
  font-weight: 600;
}

.c0.active:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(70,70,70);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.c0:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(70,70,70);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

<a
  className="c0 c1 c2"
>
  Instances
</a>
`;

exports[`SectionList Item 1`] = `
.c3 {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
}

.c2 {
  color: rgb(59,70,204);
  -webkit-text-fill-color: currentcolor;
}

.c2:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c0 {
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.c0:not(:last-child) {
  margin-right: 1.875rem;
}

.c1 {
  color: rgb(70,70,70);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.75rem;
  padding-bottom: 1rem;
  position: relative;
}

.c1.active {
  font-weight: 600;
}

.c1.active:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(70,70,70);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

<li
  className="c0"
>
  <a
    className="c1 c2 c3"
  >
    Instances
  </a>
</li>
`;

exports[`SectionList SectionList 1`] = `
.c4 {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
}

.c3 {
  color: rgb(59,70,204);
  -webkit-text-fill-color: currentcolor;
}

.c3:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c1 {
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.c1:not(:last-child) {
  margin-right: 1.875rem;
}

.c2 {
  color: rgb(70,70,70);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.75rem;
  padding-bottom: 1rem;
  position: relative;
  font-weight: 600;
}

.c2.active {
  font-weight: 600;
}

.c2.active:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(70,70,70);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.c2:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(70,70,70);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.c5 {
  color: rgb(70,70,70);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.75rem;
  padding-bottom: 1rem;
  position: relative;
}

.c5.active {
  font-weight: 600;
}

.c5.active:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(70,70,70);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.c0 {
  background: rgb(250,250,250);
  list-style-type: none;
  padding: 0.8125rem 0rem;
  margin: 1.125rem 0 0 0;
  max-height: 3.125rem;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.c0:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(216,216,216);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

<ul
  className="c0"
>
  <li
    className="c1"
  >
    <a
      className="c2 c3 c4"
    >
      Overview
    </a>
  </li>
  <li
    className="c1"
  >
    <a
      className="c5 c3 c4"
    >
      Services
    </a>
  </li>
  <li
    className="c1"
  >
    <a
      className="c5 c3 c4"
    >
      Instances
    </a>
  </li>
</ul>
`;