Update honeycrisp static assets to v0.10.3

- update hourly wage width - added `.grid-ignore-mobile` to keep cards centered - added custom svg icon class for svg icon positioning - added `.logo` overrides for psuedo states - on `docRecommendations` keep reveal open with page script Co-authored-by: Maria Quadri <[email protected]> Co-authored-by: Ben Golder <[email protected]>
codeforamerica · Aug 25, 2021 · 831439c · 831439c
1 parent b21047e
commit 831439c
Show file tree

Hide file tree

Showing 8 changed files with 401 additions and 17 deletions.
diff --git a/src/main/resources/static/honeycrisp.min.css b/src/main/resources/static/honeycrisp.min.css
diff --git a/src/main/resources/static/honeycrisp.min.css.map b/src/main/resources/static/honeycrisp.min.css.map
diff --git a/src/main/resources/static/honeycrisp.min.js b/src/main/resources/static/honeycrisp.min.js
diff --git a/src/main/resources/static/honeycrisp.min.js.map b/src/main/resources/static/honeycrisp.min.js.map
diff --git a/src/main/resources/static/shiba.css b/src/main/resources/static/shiba.css
@@ -15,11 +15,15 @@
 }
 
 .max-width-446 {
-	max-width: 446px;
+    max-width: 446px;
 }
 
 .max-width-500 {
-	max-width: 500px;
+    max-width: 500px;
+}
+
+.max-width--hourly-wage {
+    max-width: 9.5em;
 }
 
 .intro-section {
@@ -70,15 +74,15 @@
 }
 
 .email-box-header {
-	padding-bottom: 1.5rem;
+    padding-bottom: 1.5rem;
 }
 
 .email-box svg {
-	margin-right: 0.5rem;
+    margin-right: 0.5rem;
 }
 
 .left-justified-list {
-	list-style: disc;
+    list-style: disc;
     padding-left: 2.2rem;
 }
 
@@ -378,7 +382,7 @@ form .drag-and-drop-box-compact {
     color: #FFF;
 }
 
-:not(.dz-complete) .dz-filename  {
+:not(.dz-complete) .dz-filename {
     color: #cfc5bf;
 }
 
@@ -628,7 +632,7 @@ input[type=number] {
 }
 
 .language-selector-option {
-	color: #003865;
+    color: #003865;
 }
 
 .toolbar__wrapper {
@@ -684,7 +688,7 @@ input[type=number] {
     margin-top: 0.1rem;
 }
 
-.logo, .logo:hover {
+.logo, .logo:hover, .logo:visited, .logo:active {
     color: #E9F6FF;
     text-decoration: none;
     font-weight: bold;
@@ -706,6 +710,11 @@ input[type=number] {
     vertical-align: -15px;
 }
 
+.svg-icon-arrow_forward {
+    position: relative;
+    top: 0.15em;
+}
+
 .success-icons svg {
     max-width: 36px;
 }
@@ -729,7 +738,13 @@ input[type=number] {
     font-style: normal;
 }
 
-.scroller:before, .reveal__link:after, .flash__message:before, .checkbox input[type='checkbox']:checked:before, [class^="icon-"], [class*=" icon-"] {
+.select:after,
+.scroller:before,
+.reveal__link:after,
+.flash__message:before,
+.checkbox input[type='checkbox']:checked:before,
+[class^="icon-"],
+[class*=" icon-"] {
     font-family: 'MaterialIcons-Regular' !important;
 }
 
@@ -789,7 +804,7 @@ input[type=number] {
 }
 
 .doc-rec:last-of-type {
-    margin-bottom: 2.5rem!important;
+    margin-bottom: 2.5rem !important;
 }
 
 .doc-rectangle {
@@ -886,6 +901,7 @@ input[type=number] {
 .next-steps {
     position: relative;
 }
+
 .next-steps::before {
     content: '';
     display: block;
@@ -1146,7 +1162,7 @@ input[type=number] {
     border: none;
 }
 
-.dropzone .dz-preview .dz-details .dz-size , .file-count {
+.dropzone .dz-preview .dz-details .dz-size, .file-count {
     margin-bottom: 1em;
     font-size: 16px;
     display: inline;
@@ -1155,6 +1171,7 @@ input[type=number] {
 .dropzone .dz-preview .dz-details .dz-filename {
     white-space: nowrap;
 }
+
 .dropzone .dz-preview.dz-success .dz-success-mark {
     -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
     -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
@@ -1252,3 +1269,201 @@ legend.form-question {
     margin-bottom: 0;
 }
 
+.grid-ignore-mobile {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 960px;
+}
+
+.grid-ignore-mobile::after {
+    clear: both;
+    content: "";
+    display: block;
+}
+
+@media screen and (min-width: 0) {
+    .grid-ignore-mobile .width-one-whole {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 100%;
+    }
+
+    .grid-ignore-mobile .width-one-whole:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-one-half {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 48.8211739883%;
+    }
+
+    .grid-ignore-mobile .width-one-half:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-one-third {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 31.7615653177%;
+    }
+
+    .grid-ignore-mobile .width-one-third:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-two-thirds {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 65.8807826589%;
+    }
+
+    .grid-ignore-mobile .width-two-thirds:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-one-fourth {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 23.2317609825%;
+    }
+
+    .grid-ignore-mobile .width-one-fourth:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-three-fourths {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 74.4105869942%;
+    }
+
+    .grid-ignore-mobile .width-three-fourths:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-one-sixth {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 14.7019566472%;
+    }
+
+    .grid-ignore-mobile .width-one-sixth:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-five-sixths {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 82.9403913294%;
+    }
+
+    .grid-ignore-mobile .width-five-sixths:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-one-twelfth {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 6.1721523119%;
+    }
+
+    .grid-ignore-mobile .width-one-twelfth:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-five-twelfths {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 40.291369653%;
+    }
+
+    .grid-ignore-mobile .width-five-twelfths:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-seven-twelfths {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 57.3509783236%;
+    }
+
+    .grid-ignore-mobile .width-seven-twelfths:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .width-eleven-twelfths {
+        float: left;
+        display: block;
+        margin-right: 2.3576520234%;
+        width: 91.4701956647%;
+    }
+
+    .grid-ignore-mobile .width-eleven-twelfths:last-child {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .shift-one-half {
+        margin-left: 51.1788260117%;
+    }
+
+    .grid-ignore-mobile .shift-one-third {
+        margin-left: 34.1192173411%;
+    }
+
+    .grid-ignore-mobile .shift-two-thirds {
+        margin-left: 68.2384346823%;
+    }
+
+    .grid-ignore-mobile .shift-one-fourth {
+        margin-left: 25.5894130058%;
+    }
+
+    .grid-ignore-mobile .shift-three-fourths {
+        margin-left: 76.7682390175%;
+    }
+
+    .grid-ignore-mobile .shift-one-sixth {
+        margin-left: 17.0596086706%;
+    }
+
+    .grid-ignore-mobile .shift-five-sixths {
+        margin-left: 85.2980433528%;
+    }
+
+    .grid-ignore-mobile .shift-one-twelfth {
+        margin-left: 8.5298043353%;
+    }
+
+    .grid-ignore-mobile .shift-five-twelfths {
+        margin-left: 42.6490216764%;
+    }
+
+    .grid-ignore-mobile .shift-seven-twelfths {
+        margin-left: 59.708630347%;
+    }
+
+    .grid-ignore-mobile .shift-eleven-twelfths {
+        margin-left: 93.8278476881%;
+    }
+
+    .grid-ignore-mobile .end-row {
+        margin-right: 0;
+    }
+
+    .grid-ignore-mobile .end-row + .grid__item {
+        clear: left;
+    }
+}
diff --git a/src/main/resources/templates/documentRecommendation.html b/src/main/resources/templates/documentRecommendation.html
@@ -31,7 +31,7 @@ <h1 class="h2" th:text="#{document-recommendation.submit-any-documents-you-have}
 <div th:replace="fragments/footer :: footer"></div>
 <script th:inline="javascript">
     $(function() {
-        $('.reveal').removeClass('is-hidden');
+        $('.reveal').removeClass('is-hiding-content');
     });
 </script>
 </body>

diff --git a/src/main/resources/templates/fragments/icons/icon-arrow.html b/src/main/resources/templates/fragments/icons/icon-arrow.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html>
 <html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
-    <svg th:fragment="icon-arrow" class="icon-arrow_forward" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
+    <svg th:fragment="icon-arrow" class="svg-icon-arrow_forward" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
 </html>
diff --git a/src/main/resources/templates/fragments/single-input.html b/src/main/resources/templates/fragments/single-input.html
@@ -17,10 +17,10 @@
                    th:value="${(!inputData.value.isEmpty()) ? inputData.value[0] : ''}"
             >
         </div>
-        <div class="text-input-group form-width--phone" th:case="${T(org.codeforamerica.shiba.pages.config.FormInputType).HOURLY_WAGE}">
+        <div class="text-input-group max-width--hourly-wage" th:case="${T(org.codeforamerica.shiba.pages.config.FormInputType).HOURLY_WAGE}">
             <div class="text-input-group__prefix">$</div>
             <input type="text"
-                   class="text-input form-width--phone"
+                   class="text-input max-width--hourly-wage"
                    th:id="${input.name}"
                    th:name="${formInputName}"
                    th:value="${(!inputData.value.isEmpty()) ? inputData.value[0] : ''}"