@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/hero/style.css

@@ -1,501 +0,0 @@
-.g-hero {
-  background: var(--black);
-  color: var(--white);
-  padding: 128px 0 160px;
-  position: relative;
-  overflow: hidden;
-
-  @media (max-width: 1119px) {
-    padding: 78px 0 104px;
-  }
-
-  @media (max-width: 767px) {
-    padding: 56px 0 80px;
-  }
-
-  &.centered {
-    text-align: center;
-
-    & .g-container {
-      align-items: center;
-      flex-direction: column;
-
-      & > div:nth-child(2) {
-        margin-top: 48px;
-        width: 100%;
-      }
-    }
-
-    & .headline {
-      & .logo {
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      & .buttons {
-        justify-content: center;
-
-        & .g-btn {
-          @media (max-width: 600px) {
-            align-self: center;
-          }
-        }
-      }
-
-      & .help-text {
-        justify-content: center;
-        margin-right: 0;
-      }
-    }
-  }
-
-  &.consul-pink {
-    & .help-text svg {
-      & line {
-        stroke: var(--consul);
-      }
-
-      & path {
-        fill: var(--consul);
-      }
-    }
-
-    & .carousel .progress-bar span {
-      background: var(--consul);
-    }
-  }
-
-  &.nomad-green {
-    & .help-text svg {
-      & line {
-        stroke: var(--nomad);
-      }
-
-      & path {
-        fill: var(--nomad);
-      }
-    }
-
-    & .carousel .progress-bar span {
-      background: var(--nomad);
-    }
-  }
-
-  &.terraform-purple {
-    & .help-text svg {
-      & line {
-        stroke: var(--terraform);
-      }
-
-      & path {
-        fill: var(--terraform);
-      }
-    }
-
-    & .carousel .progress-bar span {
-      background: var(--terraform);
-    }
-  }
-
-  &.light {
-    background: var(--white);
-    color: var(--black);
-
-    & .headline {
-      & .g-alert {
-        & p,
-        & span {
-          color: var(--DEPRECATED-gray-1);
-        }
-      }
-
-      & h1 {
-        color: #252937;
-      }
-
-      & .help-text {
-        color: #252937;
-      }
-    }
-
-    & .carousel {
-      color: var(--black);
-
-      & .progress-bar {
-        background-color: var(--DEPRECATED-gray-9);
-      }
-    }
-  }
-
-  & .bg {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    object-fit: cover;
-    font-family: 'object-fit:cover'; /* IE polyfill */
-    min-width: 100%;
-    min-height: 100%;
-  }
-
-  & .g-container {
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: space-between;
-
-    @media (max-width: 1119px) {
-      display: block;
-      text-align: center;
-    }
-
-    & > div {
-      flex-grow: 0;
-      flex-shrink: 0;
-      flex-basis: calc(50% - 16px);
-      width: 100%;
-
-      @media (max-width: 1119px) {
-        margin-left: auto;
-        margin-right: auto;
-        text-align: center;
-      }
-
-      &:nth-child(2) {
-        max-width: 816px;
-
-        @media (max-width: 1119px) {
-          margin-top: 40px;
-          padding-left: 48px;
-          padding-right: 48px;
-        }
-
-        @media (max-width: 767px) {
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        &.image {
-          flex-basis: calc(50% - 48px);
-        }
-      }
-    }
-  }
-
-  & .headline {
-    max-width: 564px;
-
-    @media (max-width: 1119px) {
-      max-width: 534px;
-    }
-
-    &:last-child {
-      flex-basis: auto;
-
-      @media (min-width: 1120px) {
-        max-width: 730px;
-      }
-    }
-
-    & .logo {
-      margin-bottom: 32px;
-      height: 60px;
-      display: block;
-
-      @media (max-width: 1119px) {
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-
-    & .g-alert {
-      margin-bottom: 24px;
-
-      @media (max-width: 1119px) {
-        display: inline-block;
-      }
-
-      @media (max-width: 767px) {
-        margin-bottom: 32px;
-      }
-
-      & .tag {
-        text-transform: uppercase;
-        color: #5d5d5d;
-        font-size: 0.9rem;
-        font-weight: var(--font-weight-bold);
-        margin-bottom: 32px;
-      }
-
-      & p,
-      & span {
-        color: var(--white);
-      }
-
-      & span {
-        @media (max-width: 1119px) {
-          display: inline-block;
-          margin-bottom: 12px;
-          margin-right: 0;
-        }
-      }
-    }
-
-    & h1 {
-      margin: 0;
-    }
-
-    & > p {
-      margin: 24px 0 0 0;
-
-      @media (max-width: 767px) {
-        margin-top: 16px;
-      }
-    }
-
-    & .form-lead {
-      margin-top: 40px;
-
-      & form {
-        position: relative;
-        width: 100%;
-
-        & > .form-elements {
-          display: flex;
-          transition: opacity 0.35s;
-
-          @media (max-width: 575px) {
-            flex-wrap: wrap;
-          }
-
-          & > .inputs {
-            flex-shrink: 1;
-            width: 100%;
-
-            @media (min-width: 1120px) {
-              max-width: 320px;
-            }
-
-            & .g-text-input {
-              @media (max-width: 575px) {
-                margin-bottom: 20px;
-                width: 100%;
-                flex: 1;
-              }
-
-              & input {
-                height: 48px;
-              }
-            }
-          }
-
-          & > .g-btn {
-            display: inline-block;
-            align-self: flex-start;
-            width: auto;
-            margin-left: 15px;
-            min-height: 48px;
-
-            @media (max-width: 575px) {
-              width: 100%;
-              margin-left: 0;
-              flex-grow: 1;
-              flex-shrink: 0;
-            }
-          }
-        }
-      }
-    }
-
-    & .buttons {
-      display: flex;
-      flex-wrap: wrap;
-      margin: 24px -8px 0;
-
-      @media (max-width: 1119px) {
-        justify-content: center;
-        margin-left: -12px;
-        margin-right: -12px;
-      }
-
-      @media (max-width: 767px) {
-        margin-top: 16px;
-      }
-
-      & .g-btn {
-        margin: 16px 8px 0;
-
-        @media (max-width: 1119px) {
-          margin-left: 12px;
-          margin-right: 12px;
-        }
-      }
-    }
-
-    & .help-text {
-      text-decoration: none;
-      color: white;
-      margin-top: 32px;
-      display: inline-block;
-      transition: 0.25s ease;
-      transition-property: opacity;
-      position: relative;
-
-      @media (max-width: 1119px) {
-        justify-content: center;
-      }
-
-      &:hover {
-        opacity: 0.75;
-      }
-
-      & div {
-        display: inline;
-      }
-
-      & p {
-        display: inline;
-        margin: 0;
-
-        & > a {
-          color: inherit;
-        }
-      }
-
-      & svg {
-        margin: 0 0 1px 12px;
-
-        @media (max-width: 1119px) {
-          margin-left: 6px;
-        }
-      }
-    }
-  }
-
-  & .image {
-    & picture,
-    & img,
-    & svg {
-      max-width: 720px;
-      width: 100%;
-    }
-
-    & img,
-    & svg {
-      @media (max-width: 1119px) {
-        padding: 0 16px;
-      }
-    }
-  }
-
-  & .carousel {
-    & .videos {
-      position: relative;
-    }
-
-    & .video-wrapper {
-      height: 0;
-      opacity: 0;
-      overflow: hidden;
-      position: relative;
-      transform: translateX(-60px);
-      line-height: 0;
-      box-shadow: 0px 14.3254px 14.3254px rgba(37, 41, 55, 0.16);
-
-      &.is-active {
-        opacity: 1;
-        padding-top: calc((100% * 0.63569) + 28px);
-        transform: translateX(0);
-        transition: opacity 0.5s, transform 0.5s;
-        transition-timing-function: ease-out;
-      }
-
-      &.is-deactivating {
-        opacity: 0;
-        transform: translateX(90px);
-        transition-timing-function: ease-in;
-      }
-    }
-
-    & .bar {
-      align-items: center;
-      background: #0e1016;
-      border-radius: 4px 4px 0 0;
-      display: flex;
-      height: 28px;
-      padding: 0 12px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-
-      & span {
-        background: #252937;
-        border-radius: 50%;
-        display: block;
-        height: 9px;
-        margin-right: 7px;
-        width: 9px;
-      }
-    }
-
-    & .video {
-      bottom: 0;
-      left: 0;
-      position: absolute;
-      top: 28px;
-      right: 0;
-    }
-
-    & video {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-    }
-
-    & .controls {
-      display: flex;
-      padding: 28px 20px 0;
-
-      @media (max-width: 1119px) {
-        padding: 37px 0 0;
-      }
-    }
-
-    & .control {
-      cursor: pointer;
-      text-align: left;
-      width: 100%;
-
-      &:hover .control-hover {
-        transform: translateY(-4px);
-      }
-
-      & + .control {
-        margin-left: 24px;
-      }
-
-      & .control-hover {
-        transition: 0.3s ease-in-out;
-        transition-property: transform;
-      }
-    }
-
-    & .progress-bar {
-      background-color: var(--DEPRECATED-gray-3);
-      height: 2px;
-      margin-top: 4px;
-      position: relative;
-      width: 100%;
-
-      & span {
-        background: var(--brand);
-        display: block;
-        height: 2px;
-        position: absolute;
-        transition: width linear 0.2s;
-        width: 0;
-      }
-    }
-  }
-}