first commit

modules/welcome/scss/_popup.scss

@@ -0,0 +1,185 @@
+.onboarding-popup {
+  position: fixed;
+  top:    0;
+  left:   0;
+  right:  0;
+  bottom: 0;
+  background: rgba($dark-color, 0.5);
+
+  z-index: $minimum-z-index;
+
+  > .content {
+    position: absolute;
+
+    width: $popup-width;
+    left: 50%;
+    margin-left: -$popup-width / 2;
+    top: 2.5rem;
+
+    padding: 0;
+
+    background: white;
+    box-shadow: rem(2px) rem(2px) rem(3px) 0 rgba(0, 0, 0, 0.1);
+  }
+}
+
+.onboarding-welcome {
+
+  .welcome {
+    background: url('../images/preston-clouds.png') top no-repeat;
+    background-size: rem(560px) rem(164px);
+    padding-top: 164px;
+    height: rem(52px);
+    color: black;
+    font-size: rem(24px);
+    text-align: center;
+    margin-bottom: 0;
+  }
+
+  > .content {
+    padding-bottom: rem(90px);
+    min-height: rem(200px);
+    font-size: rem(14px);
+    background: url('../images/balloons.png') bottom no-repeat;
+    background-size: rem(240px) rem(81px);
+    margin-top: 2.5rem;
+    display: flex;
+    flex-direction: column;
+
+    p {
+      display: flex;
+      text-align: center;
+      align-self: center;
+      width: rem(400px);
+    }
+  }
+
+  .started {
+    display: flex;
+    font-weight: 600;
+    font-size: rem(17px);
+    justify-content: center;
+  }
+
+  > .content {
+    margin-bottom: rem(20px);
+  }
+
+  > .material-icons {
+    color: $background-tertiary-color;
+    position: absolute;
+    top: rem(10px);
+    right: rem(15px);
+    cursor: pointer;
+    font-size: rem(30px);
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: center;
+    margin-bottom: rem(25px);
+  }
+
+  .btn-primary.blue-balloon {
+    background-color: $blue-balloon;
+  }
+
+  .btn-tertiary-outline {
+    background: none;
+    color: $blue-balloon;
+    border: 2px solid $blue-balloon;
+    text-transform: uppercase;
+    box-sizing: border-box;
+    padding: 9px 16px;
+    margin-right: 20px;
+  }
+
+}
+
+.onboarding-popup {
+  h2 {
+    font-size: rem(24px);
+  }
+
+  #onboarding-welcome {
+    &.modal-header {
+      padding: rem(24px);
+
+      .close {
+        color: #000;
+        font-size: 2.5rem;
+        margin-top: -14px;
+        margin-right: -5px;
+        opacity: 0.4;
+      }
+    }
+
+    .btn {
+      background-color: $blue-balloon;
+      font-size: rem(15px);
+      font-weight: normal;
+      letter-spacing: normal;
+    }
+
+    .link-container {
+
+      .close {
+        color: #000;
+        font-size: 40px;
+        margin-top: -15px;
+      }
+
+      .starter-guide,
+      .video-tutorial,
+      .forum,
+      .training {
+        width: rem(150px);
+        height: rem(130px);
+      }
+
+      .starter-guide {
+        background: url('../images/starter-guide.png') no-repeat;
+      }
+
+      .video-tutorial {
+        background: url('../images/video-tutorial.png') no-repeat;
+      }
+
+      .forum {
+        background: url('../images/forum.png') no-repeat;
+      }
+
+      .training {
+        background: url('../images/training.png') no-repeat;
+      }
+
+      .final-link {
+        border-width: 0;
+        color: #363a41;
+        display: block;
+        font-weight: 600;
+        justify-content: center;
+        padding: 0;
+        position: relative;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+        width: rem(150px);
+
+        &:hover {
+          box-shadow: rem(2px) rem(2px) rem(4px) 0 rgba(0, 0, 0, 0.25);
+        }
+
+        .link {
+          bottom: 0;
+          line-height: 16px;
+          position: absolute;
+          padding: 10px;
+          display: block;
+          text-align: center;
+          width: 100%;
+        }
+      }
+    }
+  }
+}