Migrate /careers to use Sass @use (Issue #10896)

mozilla · Jan 9, 2025 · 2b3f891 · 2b3f891
1 parent 9e2aca2
commit 2b3f891
Show file tree

Hide file tree

Showing 11 changed files with 13 additions and 23 deletions.
diff --git a/media/css/careers/_utils.scss b/media/css/careers/_utils.scss
@@ -2,9 +2,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-
 // Colors
 $purple-light: #d7d9f2;
 $teal-primary: #00b7aa;

diff --git a/media/css/careers/components/diversity.scss b/media/css/careers/components/diversity.scss
@@ -4,9 +4,7 @@
 
 @use '../utils' as cp;
 
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .c-careers-diversity-numbers {
     .mzp-c-picto-heading {

diff --git a/media/css/careers/components/footer.scss b/media/css/careers/components/footer.scss
@@ -4,9 +4,7 @@
 
 @use '../utils' as cp;
 
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .c-careers-bottom {
     margin-top: $layout-md;
@@ -43,11 +41,11 @@ $image-path: '/media/protocol/img';
                 }
 
                 &.c-careers-instagram {
-                    background-image: url('#{$image-path}/icons/social/instagram/black.svg');
+                    background-image: url('/media/protocol/img/icons/social/instagram/black.svg');
                 }
 
                 &.c-careers-twitter {
-                    background-image: url('#{$image-path}/icons/social/x/black.svg');
+                    background-image: url('/media/protocol/img/icons/social/x/black.svg');
                 }
 
                 &.c-careers-glassdoor {

diff --git a/media/css/careers/components/hero-text.scss b/media/css/careers/components/hero-text.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 @use '../utils' as cp;
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 // Header with no video
 .c-careers-text-hero {

diff --git a/media/css/careers/components/hero-video.scss b/media/css/careers/components/hero-video.scss
@@ -5,8 +5,8 @@
 @use '../utils' as cp;
 @use 'sass:color';
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '../../protocol/components/video';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '../../protocol/components/video';
 
 // Header with video
 .c-careers-video-hero {

diff --git a/media/css/careers/components/home.scss b/media/css/careers/components/home.scss
@@ -4,7 +4,7 @@
 
 @use '../utils' as cp;
 @use 'sass:color';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .c-careers-intro {
     background-color: $color-black;

diff --git a/media/css/careers/components/job-listings.scss b/media/css/careers/components/job-listings.scss
@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 #listings-filters {
     margin: $layout-lg 0;

diff --git a/media/css/careers/components/locations.scss b/media/css/careers/components/locations.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 @use '../utils' as cp;
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .c-careers-locations-list {
     align-items: center;

diff --git a/media/css/careers/components/position.scss b/media/css/careers/components/position.scss
@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .job-post {
     padding-bottom: $layout-lg;

diff --git a/media/css/careers/components/testimonials.scss b/media/css/careers/components/testimonials.scss
@@ -5,10 +5,8 @@
 @use '../utils' as cp;
 @use 'sass:color';
 
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/components/modal';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '~@mozilla-protocol/core/protocol/css/components/modal';
 
 .c-careers-testimonials {
     // Hide pull quotes section if JS is disabled

diff --git a/media/css/careers/styles.scss b/media/css/careers/styles.scss
@@ -13,7 +13,6 @@
 @use './components/position.scss';
 @use './components/footer.scss';
 
-@use '~@mozilla-protocol/core/protocol/css/components/modal';
 @use '~@mozilla-protocol/core/protocol/css/components/callout';
 @use '~@mozilla-protocol/core/protocol/css/templates/card-layout';
 @use '../protocol/components/custom-menu-list';