Merge pull request #626 from CityOfBoston/stella-legacy-css-removal

Stella legacy css removal
CityOfBoston · Oct 27, 2021 · 1c5a357 · 1c5a357
2 parents 21afab2 + bade70f
commit 1c5a357
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 66 deletions.
diff --git a/stylesheets/components/breadcrumb/_main.styl b/stylesheets/components/breadcrumb/_main.styl
@@ -25,8 +25,13 @@
 
   &--wh
     @media $media-large
+      margin: -3rem
+      margin-top: -150px
       position: relative
       background-color: $white
+      padding: 3rem
+      padding-bottom: 70px
+      margin-bottom: -45px
 
   @media $media-large
     display: block

diff --git a/stylesheets/components/card/_link-card-mini.styl b/stylesheets/components/card/_link-card-mini.styl
@@ -32,7 +32,7 @@
     display: table-cell
     vertical-align: middle
     position: relative
-    padding: $sizing-600
+    padding: 10% 15px 10% 20px
     min-height: 50px
     height: 100px
     word-break: normal
@@ -49,7 +49,7 @@
   &-t
     color: $optimistic-blue-dark
     font-family: Montserrat,sans-serif
-    font-size: responsive 12px 15px
+    font-size: responsive 12px 14px
     font-range: 480px 1440px
     line-height: $line-height-200
     margin: 0

diff --git a/stylesheets/components/hero-with-strikethrough/_hero-with-strikethrough.styl b/stylesheets/components/hero-with-strikethrough/_hero-with-strikethrough.styl
@@ -22,13 +22,15 @@
 
 .hro
   &--img
-    position: absolute;
-    top: 0;
-    left: 50%;
-    margin-left: -50%;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
+    position: absolute
+    top: 0
+    left: 50%
+    margin-left: -50%
+    z-index: 0
+    width: 100%
+    height: 100%
+    object-fit: cover
+    object-position: bottom
 
 .hros
   text-align: center
@@ -45,6 +47,8 @@
     margin-left: -50%
     width: 100%
     height: 100%
+    object-fit: cover
+    object-position: bottom
 
   &--pt
     padding-top: 3.5rem // The height of Boston.gov header

diff --git a/stylesheets/patterns-cob-theme.styl b/stylesheets/patterns-cob-theme.styl
@@ -643,63 +643,6 @@ h1, h2, h3, h4, h5, h6 {
 .node-type-public-notice .dl-d {
     padding-left: 70px    
 }
-.step-label-wrapper {
-    height: 60px;
-    width: 60px;
-    padding: 10px 0;
-    border: 3px solid
-}
-@media (min-width: 980px) {
-    .step-label-wrapper {
-        float: left;
-        margin-top: 40px;
-        height: 122px;
-        width: 122px;
-        padding: 18px 0
-    }
-}
-@media (min-width: 980px) {
-    .step-content {
-        margin-left: 150px;
-        top: -122px;
-        position: relative
-    }
-}
-.step-label-wrapper {
-    text-transform: uppercase;
-    color: $body-text;
-    font-family: "Montserrat", sans-serif;
-    font-weight: inherit;
-    font-size: 14px;
-    line-height: 18px;
-    font-size: 0.77778rem;
-    line-height: 1rem;
-    border-color: $grey-100;
-    border-radius: 100%;
-    text-align: center;
-    position: relative;
-    z-index: 1;
-    background-color: $white;
-}
-.step-number {
-    text-transform: uppercase;
-    color: $freedom-red-dark;
-    font-family: "Montserrat", sans-serif;
-    font-weight: inherit;
-    font-size: 20px;
-    line-height: 18px;
-    font-size: 1.11111rem;
-    line-height: 1rem;
-    font-weight: 700
-}
-@media (min-width: 980px) {
-    .step-number {
-        font-size: 60px;
-        line-height: 58.5px;
-        font-size: 3.33333rem;
-        line-height: 3.25rem
-    }
-}
 .post-contact .department-icon.sb-ic {
     border: none;
     padding: 0;
@@ -967,3 +910,69 @@ h1, h2, h3, h4, h5, h6 {
 .paragraphs-items-field-grid-of-quotes {
     display: contents    
 }
+.hero-image {
+    display: none;
+    top: 0;
+    height: 270px;
+    margin-bottom: 20px;
+    overflow: hidden;
+    margin-left: -1px;
+    margin-top: -54px;
+    z-index: 0
+}
+@media (min-width: 480px) {
+    .hero-image {
+        height: 400px
+    }
+}
+@media (min-width: 768px) {
+    .hero-image {
+        height: 460px
+    }
+}
+@media (min-width: 840px) {
+    .hero-image {
+        display: block;
+        margin-bottom: 0
+    }
+}
+.node-type-listing-page .hero-image,
+.node-type-how-to .hero-image,
+.node-type-tabbed-content .hero-image {
+    display: block
+}
+.node-type-topic-page .hero-image {
+    display: block;
+    border-bottom: 8px solid $charles-blue
+}
+@media (min-width: 980px) {
+    .node-type-topic-page .hero-image {
+        margin-bottom: -215px
+    }
+}
+.hero-image-wrapper:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(10, 154, 255, 0.5)
+}
+.hero-image-wrapper--no-overlay:after {
+    background-color: transparent
+}
+.hero-image img {
+    max-width: none;
+    position: relative;
+    left: 50%;
+    -ms-transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
+    width: auto;
+    height: auto;
+}
+@media (min-width: 2000px) {
+    .hero-image img {
+        min-width: 100%
+    }
+}