Fixes #2911 - Update modals

webcompat/static/css/src/issue-wizard-popup.css

@@ -0,0 +1,97 @@
+/*
+* popup
+*
+----------------
+* DEPENDENCIES:
+----------------
+* variable.css
+*/
+
+.popup-overlay {
+  background-color: rgba(0, 0, 0, .65);
+  display: none;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1010;
+}
+
+.popup-overlay.is-blacked-out {
+  display: block;
+}
+
+.popup-trigger {
+  display: inline-block;
+}
+
+.popup-modal {
+  background-color: #fff;
+  border-radius: 5px;
+  height: 450px;
+  left: 50%;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 300ms ease-in-out;
+  width: 650px;
+  z-index: 1011;
+}
+
+.popup-modal.text {
+  height: 400px;
+  width: 590px;
+}
+
+.popup-modal.is--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.popup-modal__close:not(.close-control):not(.popup-overlay) {
+  cursor: pointer;
+  font-size: 1.2rem;
+  position: absolute;
+  right: 12px;
+  top: 12px;
+}
+
+.popup-modal .close {
+  cursor: pointer;
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  transition: transform .2s;
+  width: 22px;
+  z-index: 3;
+}
+
+.popup-modal .close:hover {
+  transform: scale(1.1);
+}
+
+.popup-text {
+  font-size: 18px;
+  padding: 0 16px;
+}
+
+.popup-text h2 {
+  font-size: 32px;
+  font-weight: 300;
+  margin-bottom: 38px;
+}
+
+.popup-modal .links {
+  padding-top: 32px;
+  text-align: center;
+}
+
+.popup-modal .links a {
+  color: var(--link-color);
+  font-size: 16px;
+}

webcompat/static/css/src/issue-wizard-slider.css

@@ -0,0 +1,151 @@
+/*
+* slider
+*
+----------------
+* DEPENDENCIES:
+----------------
+* variable.css
+*/
+
+:root {
+  --slider-animation-distance: 100px;
+  --slider-title-transition: all .5s .1s;
+  --slider-text-transition: all .5s .2s;
+  --slider-image-transition: all .5s .3s;
+  --slide-height: 350px;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.slider .slides {
+  min-height: var(--slide-height);
+  position: relative;
+}
+
+.slider .slide {
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  transition: opacity .3s;
+  width: 100%;
+}
+
+.slider .slide.active {
+  opacity: 1;
+  z-index: 2;
+}
+
+.slider .text-half {
+  width: 60%;
+}
+
+.slider .slide .text-half .title {
+  font-size: 32px;
+  left: var(--slider-animation-distance);
+  margin-top: 10px;
+  opacity: 0;
+  padding: 16px;
+  position: relative;
+  text-align: left;
+  transition: var(--slider-title-transition);
+}
+
+.slider .slide.active .text-half .title {
+  left: 0;
+  opacity: 1;
+}
+
+.slider .slide .text-half .text {
+  font-size: 18px;
+  left: var(--slider-animation-distance);
+  margin-top: 20px;
+  opacity: 0;
+  padding: 16px;
+  position: relative;
+  text-align: left;
+  transition: var(--slider-text-transition);
+}
+
+.slider .slide.slide.active .text-half .text {
+  left: 0;
+  opacity: 1;
+}
+
+.slider .slide .image-half {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  width: 40%;
+}
+
+.slider .slide .image-half::before {
+  background-color: var(--upload-background);
+  border-bottom-left-radius: 50%;
+  border-top-left-radius: 50%;
+  content: "";
+  height: 140%;
+  left: 0;
+  position: absolute;
+  top: -20%;
+  width: 100%;
+  z-index: -1;
+}
+
+.slider .slide .image-half img {
+  left: var(--slider-animation-distance);
+  opacity: 0;
+  position: relative;
+  transition: var(--slider-image-transition);
+}
+
+.slider .slide.active .image-half img {
+  left: 0;
+  opacity: 1;
+}
+
+.controls {
+  margin-top: 0;
+}
+
+.controls .row {
+  justify-content: center;
+}
+
+.controls .dot {
+  background-color: var(--dot-color);
+  border-radius: 50%;
+  cursor: pointer;
+  height: 12px;
+  margin: 0 8px;
+  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
+  width: 12px;
+}
+
+.controls .dot.active {
+  background-color: var(--wizard-step-color);
+  border: 2px solid var(--dot-color);
+  transform: scale(1.3);
+}
+
+.controls .btn {
+  background-color: var(--color-first);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  display: block;
+  margin: 22px auto 0;
+  min-width: 140px;
+  padding: 11px;
+}
+
+.controls .btn:hover {
+  opacity: .85;
+}
+
+.controls .btn.close-control {
+  display: none;
+}

webcompat/static/css/src/issue-wizard.css

@@ -1,11 +1,16 @@
 /*
-* form
+* issue wizard
 *
 ----------------
 * DEPENDENCIES:
 ----------------
 * variable.css
 */
+
+@import "../src/variables.css";
+@import "../src/issue-wizard-popup.css";
+@import "../src/issue-wizard-slider.css";
+
 :root {
   --between-steps-margin: 53px;
   --presumed-step-height: -360px;

webcompat/static/css/src/variables.css

@@ -65,5 +65,6 @@
   --warning-border: rgba(255, 184, 158, 1); /* #ffb89e */
   --screenshot-shadow: rgba(0, 0, 0, .3); /* #000000 */
   --warm-grey: rgba(151, 151, 151, 1); /* #979797 */
-  --upload-background: rgba(231, 231, 231, 1) /* #e7e7e7 */
+  --upload-background: rgba(231, 231, 231, 1); /* #e7e7e7 */
+  --dot-color: rgba(50, 60, 89, 1); /* #323c59 */
 }