Merge pull request #3416 from webcompat/issue/3392-css/1

Fixes #3392 - Refactor css after original form removal

Author: Mike Taylor

webcompat/static/css/src/footer.css

@@ -1,5 +1,5 @@
 .footer-item {
-  border-bottom: 1px solid var(--color-form);
+  border-bottom: 1px solid var(--color-footer);
   padding: var(--unit-space) var(--unit-gap);
 }
 

webcompat/static/css/src/form.css

@@ -11,52 +11,13 @@
   padding: 10px 0 35px;
 }
 
-.form-element-bottom {
-  display: flex;
-  flex-flow: column nowrap;
-}
-
-.form-element-bottom .form-button {
-  margin-top: auto;
-}
-
 .form-element {
   margin: 0 0 20px;
   max-width: 100%;
   padding: 0;
   position: relative;
 }
 
-.form-button-multiple {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin-left: -10px;
-  margin-right: -10px;
-  max-width: none;
-}
-
-.form-button-multiple .button-wrapper {
-  cursor: pointer;
-  display: flex;
-  flex: 1 1 auto;
-  margin: 20px 10px 0;
-  position: relative;
-}
-
-.form-button-multiple .button-wrapper .button {
-  flex: 1;
-}
-
-.form-button-multiple .button-wrapper .button:disabled {
-  pointer-events: none;
-}
-
-.form-button-multiple .button-wrapper:hover .button {
-  opacity: .85;
-}
-
 .form-field {
   background: none;
   color: inherit;
@@ -87,13 +48,6 @@
   visibility: hidden;
 }
 
-.form-required::after {
-  color: var(--color-error);
-  content: "*";
-  padding-left: 7px;
-  padding-right: 7px;
-}
-
 .form-label-message .form-label {
   display: inline-block;
 }
@@ -105,15 +59,6 @@
   font-weight: 700;
 }
 
-/* form text privacy */
-.form-text-privacy {
-  background-color: var(--base-colorDark);
-  border-radius: 5px;
-  font-size: 14px;
-  padding: 6px;
-  text-align: center;
-}
-
 /* * Form input[type="text"], textarea (text-field) */
 
 .text-field {
@@ -126,27 +71,28 @@
   min-height: 27px;
   padding: 8px 24px 8px 8px;
   position: relative;
+  transition: box-shadow .3s;
   width: 100%;
   z-index: 2;
 }
 
 .text-field:focus {
-  border-bottom: 1px solid var(--color-first);
+  box-shadow: 0 0 0 2px var(--issue-type-bg);
   outline: 1px solid transparent;
-  transition: border-bottom 1s linear;
 }
 
-/* * Form input[type="text"] validation */
+@media (min-width: 665px) {
+  .text-field {
+    font-size: 100%;
+  }
 
-.form-input-validation {
-  display: inline-block;
-  position: relative;
-  text-align: right;
-  top: -2em;
-  width: 100%;
-  z-index: 0;
+  .text-field:focus {
+    box-shadow: 0 0 0 3px var(--issue-type-bg);
+  }
 }
 
+/* * Form input[type="text"] validation */
+
 .is-validated .check::after {
   background-image: url("../../img/svg/icons/svg-checkmark.svg");
   background-repeat: no-repeat;

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

@@ -20,10 +20,6 @@
   width: 100%;
 }
 
-.progress-textarea .text-field {
-  font-weight: 200;
-}
-
 .progress-textarea .progress {
   background: #b3f4d7;
   border-radius: 2px;

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

@@ -435,11 +435,7 @@
 }
 
 .issue-form .text-field {
-  border-color: var(--screenshot-shadow);
-  font-size: 14px;
-  font-weight: 200;
   padding: 4px 32px 5px 8px;
-  transition: box-shadow .3s;
 }
 
 .with-validation-icons.is-validated .input-wrapper::after,
@@ -487,9 +483,6 @@
 }
 
 .low .text-field {
-  border-radius: 2px;
-  color: var(--color-second);
-  font-weight: 200;
   margin-bottom: 17px;
   padding: 5px 32px 7px 8px;
 }
@@ -498,8 +491,8 @@
   border-color: var(--wizard-step-error);
 }
 
-.low .text-field::placeholder {
-  color: var(--input-placeholder);
+.issue-form .is-validated .text-field {
+  border-color: var(--issue-selected-outline);
 }
 
 .issue-btn {
@@ -653,14 +646,6 @@
   width: 28px;
 }
 
-.issue-form .is-validated .text-field {
-  border-color: var(--issue-selected-outline);
-}
-
-.issue-form .text-field:focus {
-  box-shadow: 0 0 0 3px var(--issue-type-bg);
-}
-
 #browsers li {
   width: 33%;
 }
@@ -1031,18 +1016,15 @@
     display: none;
   }
 
-  .issue-form .text-field {
-    border-color: var(--color-form);
-    font-size: 90%;
+  .step-url .text-field {
     font-weight: 600;
+  }
+
+  .issue-form .text-field {
     padding: 11px 36px 11px 8px;
   }
 
   .low .text-field {
-    border-radius: 2px;
-    color: var(--color-second);
-    font-weight: 200;
-    margin-bottom: 17px;
     padding: 5px 32px 7px 8px;
   }
 

webcompat/static/css/src/issue.css

@@ -66,7 +66,7 @@
 }
 
 .issue-new-comment .form-text {
-  padding: 0;
+  padding: 4px;
 }
 
 .issue-new-comment .text-field {

webcompat/static/css/src/issues-list.css

@@ -91,8 +91,8 @@
 }
 
 #x-search-bar .nav-button {
-  margin-left: -22px;
-  margin-top: -29px;
+  margin-left: -26px;
+  margin-top: -30px;
   position: absolute;
   z-index: 200;
 }

webcompat/static/css/src/label-editor.css

@@ -142,19 +142,8 @@
 }
 
 .label-editor-header .nav-button {
-  margin-top: -10px;
-}
-
-@media all and (min-width: 893.01px) {
-  .label-editor-header .nav-button {
-    margin-right: 5px;
-  }
-}
-
-@media all and (max-width: 893px) {
-  .label-editor-header .nav-button {
-    margin-right: -1px;
-  }
+  margin-left: 10px;
+  margin-top: -2px;
 }
 
 .wc-Issue-categoryEditor-button .label-editorLauncher {

webcompat/static/css/src/nav.css

@@ -83,9 +83,10 @@
   margin: 0 auto;
   max-width: var(--unit-modul-l);
   min-width: var(--unit-modul-s);
+  padding: 0 10px;
   position: absolute;
   right: 0;
-  top: 1px;
+  top: 5px;
   transform: rotateY(-90deg);
   transition: all .2s ease 0s;
   visibility: hidden;
@@ -108,7 +109,7 @@
   float: right;
   position: relative;
   right: 10px;
-  top: -35px;
+  top: -32px;
   z-index: 1300;
 }
 

webcompat/static/css/src/variables.css

@@ -28,7 +28,8 @@
   --color-second: rgba(64, 64, 64, 1); /* #404040 */
   --color-third: rgba(240, 240, 240, 1); /* #f0f0f0 */
   --color-fourth: rgba(192, 255, 238, 1); /* #c0ffee */
-  --color-form: rgba(0, 0, 0, .12); /* #000000 88% transparency */
+  --color-form: rgba(0, 0, 0, .4); /* #000000 40% transparency */
+  --color-footer: rgba(0, 0, 0, .12); /* #000000 12% transparency */
   --color-default: rgba(196, 196, 196, 1); /* c4c4c4 */
   --color-error: rgba(204, 23, 23, 1); /* #CC1717 */
   --color-error-transparent: rgba(204, 23, 23, .8); /* #CC1717 20% transparency */