From 5a03bce04a9661f24566c9055674ede74112fe81 Mon Sep 17 00:00:00 2001 From: William Durand Date: Mon, 27 Aug 2018 11:46:11 +0200 Subject: [PATCH 1/6] Simplify SCSS import for "amo" --- src/amo/components/Addon/styles.scss | 4 +- src/amo/components/AddonBadges/styles.scss | 4 +- .../AddonCompatibilityError/style.scss | 2 +- src/amo/components/AddonMeta/styles.scss | 4 +- .../AddonRecommendations/styles.scss | 4 +- src/amo/components/AddonReview/styles.scss | 3 +- .../components/AddonReviewList/styles.scss | 7 +-- .../AddonReviewListItem/styles.scss | 5 +- .../AddonsByAuthorsCard/styles.scss | 4 +- src/amo/components/AddonsCard/styles.scss | 4 +- src/amo/components/App/styles.scss | 7 +-- .../components/AutoSearchInput/styles.scss | 4 +- src/amo/components/Categories/styles.scss | 4 +- src/amo/components/CategoriesPage/styles.scss | 3 +- src/amo/components/Category/styles.scss | 3 +- src/amo/components/CategoryHeader/styles.scss | 4 +- src/amo/components/CategoryIcon/styles.scss | 4 +- src/amo/components/Collection/styles.scss | 5 +- .../components/CollectionAddAddon/styles.scss | 4 +- .../components/CollectionControls/styles.scss | 2 +- .../components/CollectionDetails/styles.scss | 4 +- src/amo/components/CollectionList/styles.scss | 4 +- .../components/CollectionManager/styles.scss | 5 +- src/amo/components/CollectionSort/styles.scss | 2 +- .../EditableCollectionAddon/styles.scss | 6 +-- src/amo/components/ErrorPage/styles.scss | 4 +- src/amo/components/Footer/styles.scss | 4 +- src/amo/components/Header/styles.scss | 6 +-- src/amo/components/Home/styles.scss | 6 +-- src/amo/components/HomeHeroBanner/styles.scss | 2 +- src/amo/components/LandingPage/styles.scss | 4 +- src/amo/components/LanguageTools/styles.scss | 4 +- .../components/PermissionsCard/styles.scss | 3 +- src/amo/components/RatingManager/styles.scss | 2 +- src/amo/components/RatingsByStar/styles.scss | 4 +- .../components/ReportAbuseButton/styles.scss | 2 +- src/amo/components/ScreenShots/styles.scss | 3 +- src/amo/components/Search/styles.scss | 3 +- .../components/SearchContextCard/styles.scss | 2 +- src/amo/components/SearchFilters/styles.scss | 5 +- .../components/SearchSuggestion/styles.scss | 2 +- src/amo/components/SectionLinks/styles.scss | 4 +- src/amo/components/StaticPages/styles.scss | 5 +- src/amo/components/UserProfile/styles.scss | 5 +- .../components/UserProfileEdit/styles.scss | 4 +- .../UserProfileEditNotifications/styles.scss | 6 +-- .../UserProfileEditPicture/styles.scss | 4 +- src/amo/css/inc/vars.scss | 52 ------------------- src/amo/css/styles.scss | 4 ++ .../components/AMInstallButton/styles.scss | 1 - src/core/components/InfoDialog/styles.scss | 1 - src/core/components/InstallButton/styles.scss | 1 - src/core/css/inc/mixins.scss | 3 +- src/core/css/inc/vars.scss | 30 +++++++++++ src/disco/components/Addon/styles.scss | 2 +- src/disco/components/DiscoPane/styles.scss | 1 - src/disco/css/inc/vars.scss | 5 -- src/ui/components/Button/styles.scss | 2 - src/ui/components/Card/styles.scss | 1 - src/ui/components/CardList/styles.scss | 1 - src/ui/components/DefinitionList/styles.scss | 3 +- .../DismissibleTextForm/styles.scss | 2 - src/ui/components/DropdownMenu/styles.scss | 1 - src/ui/components/ErrorList/styles.scss | 3 -- src/ui/components/ExpandableCard/styles.scss | 1 - src/ui/components/FormOverlay/styles.scss | 3 +- src/ui/components/Hero/styles.scss | 1 - src/ui/components/HeroSection/styles.scss | 1 - src/ui/components/LoadingText/styles.scss | 1 - src/ui/components/MetadataCard/styles.scss | 1 - src/ui/components/Notice/styles.scss | 3 +- src/ui/components/ShowMoreCard/styles.scss | 1 - src/ui/components/Switch/styles.scss | 1 + src/ui/components/ThemeImage/styles.scss | 1 - src/ui/components/TooltipMenu/styles.scss | 1 - src/ui/components/UserCollection/styles.scss | 2 +- src/ui/components/UserReview/styles.scss | 1 - src/ui/css/vars.scss | 2 +- 78 files changed, 90 insertions(+), 229 deletions(-) create mode 100644 src/amo/css/styles.scss diff --git a/src/amo/components/Addon/styles.scss b/src/amo/components/Addon/styles.scss index cbbf1b289c7..aa97d9b6abc 100644 --- a/src/amo/components/Addon/styles.scss +++ b/src/amo/components/Addon/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .Addon { @include page-padding(); diff --git a/src/amo/components/AddonBadges/styles.scss b/src/amo/components/AddonBadges/styles.scss index 5177f41ed4e..6463b2660dd 100644 --- a/src/amo/components/AddonBadges/styles.scss +++ b/src/amo/components/AddonBadges/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .AddonBadges { width: 100%; diff --git a/src/amo/components/AddonCompatibilityError/style.scss b/src/amo/components/AddonCompatibilityError/style.scss index d2d40ac1dba..02783c9fa03 100644 --- a/src/amo/components/AddonCompatibilityError/style.scss +++ b/src/amo/components/AddonCompatibilityError/style.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .AddonCompatibilityError { margin-top: 12px; diff --git a/src/amo/components/AddonMeta/styles.scss b/src/amo/components/AddonMeta/styles.scss index 46da103f168..02ca497f2b9 100644 --- a/src/amo/components/AddonMeta/styles.scss +++ b/src/amo/components/AddonMeta/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .AddonMeta-item { display: flex; diff --git a/src/amo/components/AddonRecommendations/styles.scss b/src/amo/components/AddonRecommendations/styles.scss index ade526582e7..7d6aa36f162 100644 --- a/src/amo/components/AddonRecommendations/styles.scss +++ b/src/amo/components/AddonRecommendations/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .AddonRecommendations { // stylelint-disable max-nesting-depth diff --git a/src/amo/components/AddonReview/styles.scss b/src/amo/components/AddonReview/styles.scss index 54eea4acfd7..dc30c34b633 100644 --- a/src/amo/components/AddonReview/styles.scss +++ b/src/amo/components/AddonReview/styles.scss @@ -1,5 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .Overlay-contents .AddonReview-overlay { .Card-contents { diff --git a/src/amo/components/AddonReviewList/styles.scss b/src/amo/components/AddonReviewList/styles.scss index 7083bdbf74e..7e46284e5e1 100644 --- a/src/amo/components/AddonReviewList/styles.scss +++ b/src/amo/components/AddonReviewList/styles.scss @@ -1,7 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .AddonReviewList { @include page-padding(); @@ -19,7 +16,7 @@ } .CardList { - margin: 0 0 $vertical-space-xs; + margin: 0 0 8px; // https://stackoverflow.com/questions/36150458 min-width: 50%; } diff --git a/src/amo/components/AddonReviewListItem/styles.scss b/src/amo/components/AddonReviewListItem/styles.scss index 23408e47eb1..ed4a658c02b 100644 --- a/src/amo/components/AddonReviewListItem/styles.scss +++ b/src/amo/components/AddonReviewListItem/styles.scss @@ -1,7 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; +@import '~amo/css/styles'; .AddonReviewListItem { .Rating { diff --git a/src/amo/components/AddonsByAuthorsCard/styles.scss b/src/amo/components/AddonsByAuthorsCard/styles.scss index 59266588007..102f591b640 100644 --- a/src/amo/components/AddonsByAuthorsCard/styles.scss +++ b/src/amo/components/AddonsByAuthorsCard/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .AddonsByAuthorsCard { margin-top: 0; diff --git a/src/amo/components/AddonsCard/styles.scss b/src/amo/components/AddonsCard/styles.scss index 513a9eea467..8d580c6beca 100644 --- a/src/amo/components/AddonsCard/styles.scss +++ b/src/amo/components/AddonsCard/styles.scss @@ -1,6 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .AddonsCard--horizontal { @include respond-to(large) { diff --git a/src/amo/components/App/styles.scss b/src/amo/components/App/styles.scss index 5b9f64eb101..bf542f6d7e3 100644 --- a/src/amo/components/App/styles.scss +++ b/src/amo/components/App/styles.scss @@ -1,10 +1,5 @@ @import '~normalize.css'; -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/vars'; -@import '~core/css/inc/lib'; -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; html, body { diff --git a/src/amo/components/AutoSearchInput/styles.scss b/src/amo/components/AutoSearchInput/styles.scss index 01432bb4830..43d59bcf932 100644 --- a/src/amo/components/AutoSearchInput/styles.scss +++ b/src/amo/components/AutoSearchInput/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .AutoSearchInput-search-box { position: relative; diff --git a/src/amo/components/Categories/styles.scss b/src/amo/components/Categories/styles.scss index 2560f6db2f9..95042f93fcb 100644 --- a/src/amo/components/Categories/styles.scss +++ b/src/amo/components/Categories/styles.scss @@ -1,6 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .Categories .Card-contents { @include respond-to(large) { diff --git a/src/amo/components/CategoriesPage/styles.scss b/src/amo/components/CategoriesPage/styles.scss index d8b714e5c91..909be092cd1 100644 --- a/src/amo/components/CategoriesPage/styles.scss +++ b/src/amo/components/CategoriesPage/styles.scss @@ -1,5 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .CategoriesPage { @include page-padding(); diff --git a/src/amo/components/Category/styles.scss b/src/amo/components/Category/styles.scss index c9d138def76..02ddf866ca5 100644 --- a/src/amo/components/Category/styles.scss +++ b/src/amo/components/Category/styles.scss @@ -1,5 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .Category { @include page-padding(); diff --git a/src/amo/components/CategoryHeader/styles.scss b/src/amo/components/CategoryHeader/styles.scss index 12e1d071273..d4e6f89f66d 100644 --- a/src/amo/components/CategoryHeader/styles.scss +++ b/src/amo/components/CategoryHeader/styles.scss @@ -1,6 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .CategoryHeader { border-radius: $border-radius-default; diff --git a/src/amo/components/CategoryIcon/styles.scss b/src/amo/components/CategoryIcon/styles.scss index 4443b21af94..7c8c146cd1e 100644 --- a/src/amo/components/CategoryIcon/styles.scss +++ b/src/amo/components/CategoryIcon/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; $default-icon-size: 64px; diff --git a/src/amo/components/Collection/styles.scss b/src/amo/components/Collection/styles.scss index 615910a5e02..5f80cef8e6e 100644 --- a/src/amo/components/Collection/styles.scss +++ b/src/amo/components/Collection/styles.scss @@ -1,7 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~photon-colors/photon-colors'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .Collection { @include page-padding(); diff --git a/src/amo/components/CollectionAddAddon/styles.scss b/src/amo/components/CollectionAddAddon/styles.scss index 1132575deb4..30ff3b8c565 100644 --- a/src/amo/components/CollectionAddAddon/styles.scss +++ b/src/amo/components/CollectionAddAddon/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .CollectionAddAddon { margin: $padding-page 0; diff --git a/src/amo/components/CollectionControls/styles.scss b/src/amo/components/CollectionControls/styles.scss index 430bae04e73..0681ad27349 100644 --- a/src/amo/components/CollectionControls/styles.scss +++ b/src/amo/components/CollectionControls/styles.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .CollectionControls { margin-top: $padding-page; diff --git a/src/amo/components/CollectionDetails/styles.scss b/src/amo/components/CollectionDetails/styles.scss index 3d050976776..ff304d60470 100644 --- a/src/amo/components/CollectionDetails/styles.scss +++ b/src/amo/components/CollectionDetails/styles.scss @@ -1,6 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .CollectionDetails { .MetadataCard { diff --git a/src/amo/components/CollectionList/styles.scss b/src/amo/components/CollectionList/styles.scss index 3b4e70c4d96..57401dad19e 100644 --- a/src/amo/components/CollectionList/styles.scss +++ b/src/amo/components/CollectionList/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~photon-colors/photon-colors'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .CollectionList { @include page-padding(); diff --git a/src/amo/components/CollectionManager/styles.scss b/src/amo/components/CollectionManager/styles.scss index 8041e57e805..d2719ab8e69 100644 --- a/src/amo/components/CollectionManager/styles.scss +++ b/src/amo/components/CollectionManager/styles.scss @@ -1,7 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~core/css/inc/vars.scss'; -@import '~amo/css/inc/vars'; +@import '~amo/css/styles'; .CollectionManager { label { diff --git a/src/amo/components/CollectionSort/styles.scss b/src/amo/components/CollectionSort/styles.scss index f3c75c3a1cb..d5a334efb64 100644 --- a/src/amo/components/CollectionSort/styles.scss +++ b/src/amo/components/CollectionSort/styles.scss @@ -1,4 +1,4 @@ -@import '~photon-colors/photon-colors'; +@import '~amo/css/styles'; .CollectionSort-label { color: $grey-50; diff --git a/src/amo/components/EditableCollectionAddon/styles.scss b/src/amo/components/EditableCollectionAddon/styles.scss index a244fe28488..58f28983996 100644 --- a/src/amo/components/EditableCollectionAddon/styles.scss +++ b/src/amo/components/EditableCollectionAddon/styles.scss @@ -1,8 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~core/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; $icon-size: 32px; diff --git a/src/amo/components/ErrorPage/styles.scss b/src/amo/components/ErrorPage/styles.scss index 057dcae34f4..8b6ed1542f0 100644 --- a/src/amo/components/ErrorPage/styles.scss +++ b/src/amo/components/ErrorPage/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; +@import '~amo/css/styles'; .ErrorPage { @include page-padding(); diff --git a/src/amo/components/Footer/styles.scss b/src/amo/components/Footer/styles.scss index bca7c51bb20..2e67d09a0f3 100644 --- a/src/amo/components/Footer/styles.scss +++ b/src/amo/components/Footer/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .Footer { @include font-opensans-regular(); diff --git a/src/amo/components/Header/styles.scss b/src/amo/components/Header/styles.scss index 9a23b758bdf..5bd62444070 100644 --- a/src/amo/components/Header/styles.scss +++ b/src/amo/components/Header/styles.scss @@ -1,8 +1,4 @@ -@import '~photon-colors/photon-colors'; - -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .Header { background: $ink-90; diff --git a/src/amo/components/Home/styles.scss b/src/amo/components/Home/styles.scss index 3992947a8f4..2d835350445 100644 --- a/src/amo/components/Home/styles.scss +++ b/src/amo/components/Home/styles.scss @@ -1,8 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~core/css/inc/vars'; -@import '~photon-colors/photon-colors'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .Home { @include page-padding(); diff --git a/src/amo/components/HomeHeroBanner/styles.scss b/src/amo/components/HomeHeroBanner/styles.scss index fad8bb4d6be..481bf4b1082 100644 --- a/src/amo/components/HomeHeroBanner/styles.scss +++ b/src/amo/components/HomeHeroBanner/styles.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/vars'; +@import '~amo/css/styles'; /* stylelint-disable indentation */ $colors-first-item: ('violet', #7950f2, #6741d9) ('grape', #be4bdb, #ae3ec9); diff --git a/src/amo/components/LandingPage/styles.scss b/src/amo/components/LandingPage/styles.scss index ee9513e2246..4b06146381d 100644 --- a/src/amo/components/LandingPage/styles.scss +++ b/src/amo/components/LandingPage/styles.scss @@ -1,6 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .LandingPage { @include page-padding(); diff --git a/src/amo/components/LanguageTools/styles.scss b/src/amo/components/LanguageTools/styles.scss index f6ada497b76..69f5df1d3fd 100644 --- a/src/amo/components/LanguageTools/styles.scss +++ b/src/amo/components/LanguageTools/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; $cell-padding: 6px; diff --git a/src/amo/components/PermissionsCard/styles.scss b/src/amo/components/PermissionsCard/styles.scss index 12c5c9673b7..c72ef83b8a7 100644 --- a/src/amo/components/PermissionsCard/styles.scss +++ b/src/amo/components/PermissionsCard/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~photon-colors/photon-colors'; +@import '~amo/css/styles'; .PermissionCard-learn-more { margin: 16px auto 0; diff --git a/src/amo/components/RatingManager/styles.scss b/src/amo/components/RatingManager/styles.scss index 282cc15160d..3093c4bb370 100644 --- a/src/amo/components/RatingManager/styles.scss +++ b/src/amo/components/RatingManager/styles.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .RatingManager-ratingControl { align-items: center; diff --git a/src/amo/components/RatingsByStar/styles.scss b/src/amo/components/RatingsByStar/styles.scss index fd8ad9e7518..4ec769d4554 100644 --- a/src/amo/components/RatingsByStar/styles.scss +++ b/src/amo/components/RatingsByStar/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/vars'; -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .RatingsByStar-graph { color: $grey-50; diff --git a/src/amo/components/ReportAbuseButton/styles.scss b/src/amo/components/ReportAbuseButton/styles.scss index f9a86644aa7..64f3f072fa3 100644 --- a/src/amo/components/ReportAbuseButton/styles.scss +++ b/src/amo/components/ReportAbuseButton/styles.scss @@ -1,4 +1,4 @@ -@import '~ui/css/vars'; +@import '~amo/css/styles'; .ReportAbuseButton { margin: 12px auto 0; diff --git a/src/amo/components/ScreenShots/styles.scss b/src/amo/components/ScreenShots/styles.scss index 1c62ce88d60..e0484e75551 100644 --- a/src/amo/components/ScreenShots/styles.scss +++ b/src/amo/components/ScreenShots/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; +@import '~amo/css/styles'; // image-height has to be 20px smaller to prevent screenshot overflow. // See: https://github.com/mozilla/addons-frontend/issues/4887 diff --git a/src/amo/components/Search/styles.scss b/src/amo/components/Search/styles.scss index 69cd9e9e039..41bcbbd0b95 100644 --- a/src/amo/components/Search/styles.scss +++ b/src/amo/components/Search/styles.scss @@ -1,5 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .Search { @include respond-to(large) { diff --git a/src/amo/components/SearchContextCard/styles.scss b/src/amo/components/SearchContextCard/styles.scss index 6fc996bd1c5..73c90c33d37 100644 --- a/src/amo/components/SearchContextCard/styles.scss +++ b/src/amo/components/SearchContextCard/styles.scss @@ -1,4 +1,4 @@ -@import '~ui/css/vars'; +@import '~amo/css/styles'; .SearchContextCard-header { font-size: $font-size-l; diff --git a/src/amo/components/SearchFilters/styles.scss b/src/amo/components/SearchFilters/styles.scss index 8379f414fdf..04859d0f7cb 100644 --- a/src/amo/components/SearchFilters/styles.scss +++ b/src/amo/components/SearchFilters/styles.scss @@ -1,7 +1,4 @@ -@import '~photon-colors/photon-colors'; - -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .SearchFilters-label { color: $grey-50; diff --git a/src/amo/components/SearchSuggestion/styles.scss b/src/amo/components/SearchSuggestion/styles.scss index 4bdc8db4449..1c1b273ff5a 100644 --- a/src/amo/components/SearchSuggestion/styles.scss +++ b/src/amo/components/SearchSuggestion/styles.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/mixins'; +@import '~amo/css/styles'; .SearchSuggestion { display: flex; diff --git a/src/amo/components/SectionLinks/styles.scss b/src/amo/components/SectionLinks/styles.scss index ec690dae4eb..1dfd4f239f8 100644 --- a/src/amo/components/SectionLinks/styles.scss +++ b/src/amo/components/SectionLinks/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; .SectionLinks { display: flex; diff --git a/src/amo/components/StaticPages/styles.scss b/src/amo/components/StaticPages/styles.scss index 2b192da59b3..d756b9a74fd 100644 --- a/src/amo/components/StaticPages/styles.scss +++ b/src/amo/components/StaticPages/styles.scss @@ -1,7 +1,4 @@ -@import '~core/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; -@import '~photon-colors/photon-colors'; +@import '~amo/css/styles'; .StaticPage { @include page-padding(); diff --git a/src/amo/components/UserProfile/styles.scss b/src/amo/components/UserProfile/styles.scss index 28b39bd9599..e741ad820a3 100644 --- a/src/amo/components/UserProfile/styles.scss +++ b/src/amo/components/UserProfile/styles.scss @@ -1,7 +1,4 @@ -@import '~core/css/inc/vars'; -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; $avatar-size: 64px; diff --git a/src/amo/components/UserProfileEdit/styles.scss b/src/amo/components/UserProfileEdit/styles.scss index fc48248e805..6eeb63693bf 100644 --- a/src/amo/components/UserProfileEdit/styles.scss +++ b/src/amo/components/UserProfileEdit/styles.scss @@ -1,6 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; $font-size-aside: 10px; diff --git a/src/amo/components/UserProfileEditNotifications/styles.scss b/src/amo/components/UserProfileEditNotifications/styles.scss index ef7a7b3efba..6f718e1e4fd 100644 --- a/src/amo/components/UserProfileEditNotifications/styles.scss +++ b/src/amo/components/UserProfileEditNotifications/styles.scss @@ -1,8 +1,4 @@ -@import '~photon-colors/photon-colors'; - -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; $input-height: 16px; diff --git a/src/amo/components/UserProfileEditPicture/styles.scss b/src/amo/components/UserProfileEditPicture/styles.scss index 19cb88eb851..b01bcc0472a 100644 --- a/src/amo/components/UserProfileEditPicture/styles.scss +++ b/src/amo/components/UserProfileEditPicture/styles.scss @@ -1,6 +1,4 @@ -@import '~amo/css/inc/vars'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~amo/css/styles'; $picture-size: 128px; diff --git a/src/amo/css/inc/vars.scss b/src/amo/css/inc/vars.scss index 6c28d974fa9..42f11f363ae 100644 --- a/src/amo/css/inc/vars.scss +++ b/src/amo/css/inc/vars.scss @@ -1,57 +1,5 @@ @import '~core/css/inc/vars'; -$body-font-color: #000; - -// This is the color used for the Header and Footer background and the -// basis of the SearchForm and Footer background colors. -$masthead-color: #343a40; -$masthead-light-color: #495057; -$footer-color: #212529; -$accent-color: #ebebeb; - -// No "small" breakpoint is defined here because we are mobile-first. -// Instead of adding a rule for only mobile, add a mobile rule and override -// it with `@include respond-to(medium) { [...] }`. -$breakpoints: ( - // This breakpoint exists for tweaking of very small screens. - extraSmall: only screen and - ( - max-width: 349px, - ), - mediumOnly: only screen and - ( - min-width: 500px, - ) - and - ( - max-width: 719px, - ), - medium: only screen and - ( - min-width: 500px, - ), - large: only screen and - ( - min-width: 720px, - ), - extraLarge: only screen and - ( - min-width: 900px, - ), - extraExtraLarge: only screen and - ( - min-width: 1150px, - ) -); - -// Vertical spacing -$vertical-space-xxs: 4px; -$vertical-space-xs: 8px; -$vertical-space-s: 16px; -$vertical-space-m: 32px; -$vertical-space-l: 64px; -$vertical-space-xl: 128px; - // Restrict content to this width on large screens. $max-content-width: 1366px; diff --git a/src/amo/css/styles.scss b/src/amo/css/styles.scss new file mode 100644 index 00000000000..426fe12dfe5 --- /dev/null +++ b/src/amo/css/styles.scss @@ -0,0 +1,4 @@ +@import '~core/css/inc/lib'; +@import '~core/css/inc/mixins'; +@import '~ui/css/vars'; +@import './inc/vars'; diff --git a/src/core/components/AMInstallButton/styles.scss b/src/core/components/AMInstallButton/styles.scss index 6bcb5dbdbdb..222de292014 100644 --- a/src/core/components/AMInstallButton/styles.scss +++ b/src/core/components/AMInstallButton/styles.scss @@ -1,5 +1,4 @@ @import '~photon-colors/photon-colors'; -@import '~core/css/inc/vars'; @import '~core/css/inc/mixins'; .AMInstallButton { diff --git a/src/core/components/InfoDialog/styles.scss b/src/core/components/InfoDialog/styles.scss index 50e14aa4d29..9ebe97d6949 100644 --- a/src/core/components/InfoDialog/styles.scss +++ b/src/core/components/InfoDialog/styles.scss @@ -1,6 +1,5 @@ @import '~photon-colors/photon-colors'; @import '~ui/css/vars'; -@import '~amo/css/inc/vars'; @import '~core/css/inc/mixins'; // From Firefox source code: `toolkit/themes/shared/popupnotification.inc.css` diff --git a/src/core/components/InstallButton/styles.scss b/src/core/components/InstallButton/styles.scss index fbcb95cb028..4768f657a77 100644 --- a/src/core/components/InstallButton/styles.scss +++ b/src/core/components/InstallButton/styles.scss @@ -1,4 +1,3 @@ -@import '~core/css/inc/vars'; @import '~core/css/inc/mixins'; .InstallButton { diff --git a/src/core/css/inc/mixins.scss b/src/core/css/inc/mixins.scss index d113958cde4..967186cf120 100644 --- a/src/core/css/inc/mixins.scss +++ b/src/core/css/inc/mixins.scss @@ -1,6 +1,5 @@ -@import './vars'; -@import '~amo/css/inc/vars'; @import '~photon-colors/photon-colors'; +@import './vars'; @mixin page-padding() { // This adds consistent padding to any top-level page component. diff --git a/src/core/css/inc/vars.scss b/src/core/css/inc/vars.scss index 12df5be6c05..4b7ecbb80eb 100644 --- a/src/core/css/inc/vars.scss +++ b/src/core/css/inc/vars.scss @@ -52,3 +52,33 @@ $theme-width-default: 680px; // Lightweight images are slightly different $theme-height-legacy: 100px; + +// No "small" breakpoint is defined here because we are mobile-first. +// Instead of adding a rule for only mobile, add a mobile rule and override +// it with `@include respond-to(medium) { [...] }`. +$breakpoints: ( + mediumOnly: only screen and + ( + min-width: 500px, + ) + and + ( + max-width: 719px, + ), + medium: only screen and + ( + min-width: 500px, + ), + large: only screen and + ( + min-width: 720px, + ), + extraLarge: only screen and + ( + min-width: 900px, + ), + extraExtraLarge: only screen and + ( + min-width: 1150px, + ), +); diff --git a/src/disco/components/Addon/styles.scss b/src/disco/components/Addon/styles.scss index 362f6af7099..3b2602d6046 100644 --- a/src/disco/components/Addon/styles.scss +++ b/src/disco/components/Addon/styles.scss @@ -1,5 +1,5 @@ -@import '~disco/css/inc/vars'; @import '~core/css/inc/mixins'; +@import '~disco/css/inc/vars'; $addon-padding: 20px; diff --git a/src/disco/components/DiscoPane/styles.scss b/src/disco/components/DiscoPane/styles.scss index 5a438bf3fc2..347a272ff93 100644 --- a/src/disco/components/DiscoPane/styles.scss +++ b/src/disco/components/DiscoPane/styles.scss @@ -1,4 +1,3 @@ -@import '~core/css/inc/lib'; @import '~core/css/inc/mixins'; @import '~disco/css/inc/vars'; diff --git a/src/disco/css/inc/vars.scss b/src/disco/css/inc/vars.scss index 69a015dd497..192ad11a634 100644 --- a/src/disco/css/inc/vars.scss +++ b/src/disco/css/inc/vars.scss @@ -7,8 +7,3 @@ $secondary-font-color: #6a6a6a; $header-copy-font-color: #444; $header-border-color: #b1b1b1; $link-hover-color: #0996f8; - -$breakpoints: ( - small: '(max-width: 719px)', - large: '(min-width: 720px)', -); diff --git a/src/ui/components/Button/styles.scss b/src/ui/components/Button/styles.scss index 3fda0a38d51..00a57ce6096 100644 --- a/src/ui/components/Button/styles.scss +++ b/src/ui/components/Button/styles.scss @@ -1,6 +1,4 @@ @import '~photon-colors/photon-colors'; - -@import '~amo/css/inc/vars'; @import '~core/css/inc/mixins'; @import '~ui/css/vars'; diff --git a/src/ui/components/Card/styles.scss b/src/ui/components/Card/styles.scss index 444765b06e7..5e18ba37847 100644 --- a/src/ui/components/Card/styles.scss +++ b/src/ui/components/Card/styles.scss @@ -1,5 +1,4 @@ @import '~core/css/inc/mixins'; -@import '~core/css/inc/vars'; @import '~ui/css/vars'; $footer-padding: 10px; diff --git a/src/ui/components/CardList/styles.scss b/src/ui/components/CardList/styles.scss index 113590dc10e..461ccda1ce5 100644 --- a/src/ui/components/CardList/styles.scss +++ b/src/ui/components/CardList/styles.scss @@ -1,4 +1,3 @@ -@import '~amo/css/inc/vars'; @import '~core/css/inc/mixins'; @import '~ui/css/vars'; diff --git a/src/ui/components/DefinitionList/styles.scss b/src/ui/components/DefinitionList/styles.scss index a8c72e4725a..5dcf5c59988 100644 --- a/src/ui/components/DefinitionList/styles.scss +++ b/src/ui/components/DefinitionList/styles.scss @@ -1,6 +1,5 @@ -@import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; @import '~photon-colors/photon-colors'; +@import '~core/css/inc/mixins'; .DefinitionList { margin: 0; diff --git a/src/ui/components/DismissibleTextForm/styles.scss b/src/ui/components/DismissibleTextForm/styles.scss index 5f481096e32..38d0f06abb6 100644 --- a/src/ui/components/DismissibleTextForm/styles.scss +++ b/src/ui/components/DismissibleTextForm/styles.scss @@ -1,7 +1,5 @@ @import '~photon-colors/photon-colors'; -@import '~amo/css/inc/vars'; @import '~core/css/inc/mixins'; -@import '~core/css/inc/vars'; @import '~ui/css/vars'; .DismissibleTextForm-form { diff --git a/src/ui/components/DropdownMenu/styles.scss b/src/ui/components/DropdownMenu/styles.scss index 1827eede22d..e72966faf73 100644 --- a/src/ui/components/DropdownMenu/styles.scss +++ b/src/ui/components/DropdownMenu/styles.scss @@ -1,5 +1,4 @@ @import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; @import '~ui/css/vars'; .DropdownMenu { diff --git a/src/ui/components/ErrorList/styles.scss b/src/ui/components/ErrorList/styles.scss index 9ed13e38c86..2a1e52926ee 100644 --- a/src/ui/components/ErrorList/styles.scss +++ b/src/ui/components/ErrorList/styles.scss @@ -1,6 +1,3 @@ -@import '~core/css/inc/vars'; -@import '~ui/css/vars'; - .ErrorList { margin: 0; margin-bottom: 10px; diff --git a/src/ui/components/ExpandableCard/styles.scss b/src/ui/components/ExpandableCard/styles.scss index 96019218824..902c7979985 100644 --- a/src/ui/components/ExpandableCard/styles.scss +++ b/src/ui/components/ExpandableCard/styles.scss @@ -1,5 +1,4 @@ @import '~photon-colors/photon-colors'; -@import '~amo/css/inc/vars'; @import '~core/css/inc/mixins'; .ExpandableCard-ToggleLink { diff --git a/src/ui/components/FormOverlay/styles.scss b/src/ui/components/FormOverlay/styles.scss index 4782aa31c32..4ef7d2301b9 100644 --- a/src/ui/components/FormOverlay/styles.scss +++ b/src/ui/components/FormOverlay/styles.scss @@ -1,7 +1,6 @@ +@import '~photon-colors/photon-colors'; @import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; @import '~ui/css/vars'; -@import '~photon-colors/photon-colors'; .FormOverlay { align-items: center; diff --git a/src/ui/components/Hero/styles.scss b/src/ui/components/Hero/styles.scss index e0ed2ee9ab3..faf37a8f6de 100644 --- a/src/ui/components/Hero/styles.scss +++ b/src/ui/components/Hero/styles.scss @@ -1,4 +1,3 @@ -@import '~amo/css/inc/vars'; @import '~core/css/inc/mixins'; @import '~ui/css/vars'; diff --git a/src/ui/components/HeroSection/styles.scss b/src/ui/components/HeroSection/styles.scss index be7851db5c7..caebe1fc9c1 100644 --- a/src/ui/components/HeroSection/styles.scss +++ b/src/ui/components/HeroSection/styles.scss @@ -1,5 +1,4 @@ @import '~photon-colors/photon-colors'; -@import '~amo/css/inc/vars'; @import '~core/css/inc/mixins'; @import '~ui/css/vars'; diff --git a/src/ui/components/LoadingText/styles.scss b/src/ui/components/LoadingText/styles.scss index 089948f4a6d..67acefe9408 100644 --- a/src/ui/components/LoadingText/styles.scss +++ b/src/ui/components/LoadingText/styles.scss @@ -1,4 +1,3 @@ -@import '~amo/css/inc/vars'; @import '~photon-colors/photon-colors'; @keyframes placeHolderShimmer { diff --git a/src/ui/components/MetadataCard/styles.scss b/src/ui/components/MetadataCard/styles.scss index 209e6a9ffc2..a53d8d16438 100644 --- a/src/ui/components/MetadataCard/styles.scss +++ b/src/ui/components/MetadataCard/styles.scss @@ -1,6 +1,5 @@ @import '~photon-colors/photon-colors'; @import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; @import '~ui/css/vars'; .MetadataCard { diff --git a/src/ui/components/Notice/styles.scss b/src/ui/components/Notice/styles.scss index efc80e3bae2..af29dddcfaa 100644 --- a/src/ui/components/Notice/styles.scss +++ b/src/ui/components/Notice/styles.scss @@ -1,8 +1,7 @@ +@import '~photon-colors/photon-colors'; @import '~core/css/inc/mixins'; -@import '~core/css/inc/vars'; @import '~ui/css/vars'; @import '~ui/components/Button/styles'; -@import '~photon-colors/photon-colors'; .Notice { border-radius: $border-radius-s; diff --git a/src/ui/components/ShowMoreCard/styles.scss b/src/ui/components/ShowMoreCard/styles.scss index db641894565..c81b62bbe25 100644 --- a/src/ui/components/ShowMoreCard/styles.scss +++ b/src/ui/components/ShowMoreCard/styles.scss @@ -1,4 +1,3 @@ -@import '~core/css/inc/vars'; @import '~core/css/inc/mixins'; .ShowMoreCard-contents { diff --git a/src/ui/components/Switch/styles.scss b/src/ui/components/Switch/styles.scss index 75899d26cb1..7c433d87564 100644 --- a/src/ui/components/Switch/styles.scss +++ b/src/ui/components/Switch/styles.scss @@ -1,5 +1,6 @@ @import '~disco/css/inc/vars'; @import '~core/css/inc/mixins'; + $size: 26px; $borderSize: 1px; $transition: 0.3s; diff --git a/src/ui/components/ThemeImage/styles.scss b/src/ui/components/ThemeImage/styles.scss index 44ea48346a8..88570f3d220 100644 --- a/src/ui/components/ThemeImage/styles.scss +++ b/src/ui/components/ThemeImage/styles.scss @@ -1,5 +1,4 @@ @import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; @import '~ui/css/vars'; .ThemeImage { diff --git a/src/ui/components/TooltipMenu/styles.scss b/src/ui/components/TooltipMenu/styles.scss index 02c30a60ed0..3fda21952e7 100644 --- a/src/ui/components/TooltipMenu/styles.scss +++ b/src/ui/components/TooltipMenu/styles.scss @@ -1,4 +1,3 @@ -@import '~amo/css/inc/vars'; @import '~core/css/inc/mixins'; @import '~ui/css/vars'; diff --git a/src/ui/components/UserCollection/styles.scss b/src/ui/components/UserCollection/styles.scss index 58f3f0ff9e7..9a04480aaeb 100644 --- a/src/ui/components/UserCollection/styles.scss +++ b/src/ui/components/UserCollection/styles.scss @@ -1,5 +1,5 @@ -@import '~core/css/inc/mixins'; @import '~photon-colors/photon-colors'; +@import '~core/css/inc/mixins'; @import '~ui/css/vars'; .CardList ul > li.UserCollection { diff --git a/src/ui/components/UserReview/styles.scss b/src/ui/components/UserReview/styles.scss index e3b56b15df2..3cedac8fd1f 100644 --- a/src/ui/components/UserReview/styles.scss +++ b/src/ui/components/UserReview/styles.scss @@ -1,6 +1,5 @@ @import '~photon-colors/photon-colors'; @import '~core/css/inc/mixins'; -@import '~amo/css/inc/vars'; .UserReview { word-wrap: break-word; diff --git a/src/ui/css/vars.scss b/src/ui/css/vars.scss index c3020456485..edbc52445b2 100644 --- a/src/ui/css/vars.scss +++ b/src/ui/css/vars.scss @@ -1,5 +1,5 @@ -@import '~core/css/inc/vars'; @import '~photon-colors/photon-colors'; +@import '~core/css/inc/vars'; // Desktop variables (from specs) $black: #343a40; From e9c7760619f7efdbd4053608eaa24081d2fbdb7f Mon Sep 17 00:00:00 2001 From: William Durand Date: Mon, 27 Aug 2018 12:33:23 +0200 Subject: [PATCH 2/6] Simplify SCSS import for "disco" --- src/disco/components/Addon/styles.scss | 3 +-- src/disco/components/AddonCompatibilityError/style.scss | 2 +- src/disco/components/App/styles.scss | 4 +--- src/disco/components/DiscoPane/styles.scss | 3 +-- src/disco/components/Footer/styles.scss | 2 +- src/disco/css/styles.scss | 4 ++++ 6 files changed, 9 insertions(+), 9 deletions(-) create mode 100644 src/disco/css/styles.scss diff --git a/src/disco/components/Addon/styles.scss b/src/disco/components/Addon/styles.scss index 3b2602d6046..0f3a7450a74 100644 --- a/src/disco/components/Addon/styles.scss +++ b/src/disco/components/Addon/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~disco/css/inc/vars'; +@import '~disco/css/styles'; $addon-padding: 20px; diff --git a/src/disco/components/AddonCompatibilityError/style.scss b/src/disco/components/AddonCompatibilityError/style.scss index e2f3c9fc8b8..12393a3e5d2 100644 --- a/src/disco/components/AddonCompatibilityError/style.scss +++ b/src/disco/components/AddonCompatibilityError/style.scss @@ -1,4 +1,4 @@ -@import '~ui/css/vars'; +@import '~disco/css/styles'; .AddonCompatibilityError { background: $report-base-color; diff --git a/src/disco/components/App/styles.scss b/src/disco/components/App/styles.scss index 0ab0b537e6c..153248b3b85 100644 --- a/src/disco/components/App/styles.scss +++ b/src/disco/components/App/styles.scss @@ -1,7 +1,5 @@ @import '~normalize.css'; -@import '~core/css/inc/lib'; -@import '~core/css/inc/mixins'; -@import '~disco/css/inc/vars'; +@import '~disco/css/styles'; html, body { diff --git a/src/disco/components/DiscoPane/styles.scss b/src/disco/components/DiscoPane/styles.scss index 347a272ff93..d892ba23cc7 100644 --- a/src/disco/components/DiscoPane/styles.scss +++ b/src/disco/components/DiscoPane/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~disco/css/inc/vars'; +@import '~disco/css/styles'; .disco-pane { box-sizing: content-box; diff --git a/src/disco/components/Footer/styles.scss b/src/disco/components/Footer/styles.scss index 414ae68c96d..d304cba5337 100644 --- a/src/disco/components/Footer/styles.scss +++ b/src/disco/components/Footer/styles.scss @@ -1,4 +1,4 @@ -@import '~disco/css/inc/vars'; +@import '~disco/css/styles'; .Footer { text-align: center; diff --git a/src/disco/css/styles.scss b/src/disco/css/styles.scss new file mode 100644 index 00000000000..426fe12dfe5 --- /dev/null +++ b/src/disco/css/styles.scss @@ -0,0 +1,4 @@ +@import '~core/css/inc/lib'; +@import '~core/css/inc/mixins'; +@import '~ui/css/vars'; +@import './inc/vars'; From a1796ef0bcb69ab70313bf6793ef00a4f25f8052 Mon Sep 17 00:00:00 2001 From: William Durand Date: Mon, 27 Aug 2018 12:43:31 +0200 Subject: [PATCH 3/6] Simplify SCSS import for "ui" --- src/ui/components/Badge/styles.scss | 4 +--- src/ui/components/Button/styles.scss | 4 +--- src/ui/components/Card/styles.scss | 3 +-- src/ui/components/CardList/styles.scss | 3 +-- src/ui/components/ConfirmButton/styles.scss | 3 +-- src/ui/components/DefinitionList/styles.scss | 3 +-- src/ui/components/DismissibleTextForm/styles.scss | 4 +--- src/ui/components/DropdownMenu/styles.scss | 3 +-- src/ui/components/DropdownMenuItem/styles.scss | 4 +--- src/ui/components/ExpandableCard/styles.scss | 3 +-- src/ui/components/FormOverlay/styles.scss | 4 +--- src/ui/components/Hero/styles.scss | 3 +-- src/ui/components/HeroSection/styles.scss | 4 +--- src/ui/components/Icon/styles.scss | 3 +-- src/ui/components/IconXMark/styles.scss | 2 +- src/ui/components/LoadingText/styles.scss | 2 +- src/ui/components/MetadataCard/styles.scss | 4 +--- src/ui/components/Notice/styles.scss | 4 +--- src/ui/components/Overlay/styles.scss | 2 +- src/ui/components/OverlayCard/styles.scss | 2 +- src/ui/components/Rating/styles.scss | 2 +- src/ui/components/Select/styles.scss | 5 +---- src/ui/components/ShowMoreCard/styles.scss | 2 +- src/ui/components/Switch/styles.scss | 2 +- src/ui/components/ThemeImage/styles.scss | 3 +-- src/ui/components/TooltipMenu/styles.scss | 3 +-- src/ui/components/UserCollection/styles.scss | 4 +--- src/ui/components/UserReview/styles.scss | 3 +-- src/ui/css/styles.scss | 2 ++ 29 files changed, 30 insertions(+), 60 deletions(-) create mode 100644 src/ui/css/styles.scss diff --git a/src/ui/components/Badge/styles.scss b/src/ui/components/Badge/styles.scss index 17f4da9be3c..16e283b5207 100644 --- a/src/ui/components/Badge/styles.scss +++ b/src/ui/components/Badge/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~photon-colors/photon-colors'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .Badge { color: $grey-90; diff --git a/src/ui/components/Button/styles.scss b/src/ui/components/Button/styles.scss index 00a57ce6096..c30b270a728 100644 --- a/src/ui/components/Button/styles.scss +++ b/src/ui/components/Button/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; $micro-font-size: 11px; $default-font-size: 13px; diff --git a/src/ui/components/Card/styles.scss b/src/ui/components/Card/styles.scss index 5e18ba37847..c5fcfcf01c1 100644 --- a/src/ui/components/Card/styles.scss +++ b/src/ui/components/Card/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; $footer-padding: 10px; diff --git a/src/ui/components/CardList/styles.scss b/src/ui/components/CardList/styles.scss index 461ccda1ce5..eb3dcf12ee6 100644 --- a/src/ui/components/CardList/styles.scss +++ b/src/ui/components/CardList/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .CardList { margin: $padding-page 0; diff --git a/src/ui/components/ConfirmButton/styles.scss b/src/ui/components/ConfirmButton/styles.scss index 6ce575d5b4c..aa3913e8633 100644 --- a/src/ui/components/ConfirmButton/styles.scss +++ b/src/ui/components/ConfirmButton/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .ConfirmButton-buttons { align-items: center; diff --git a/src/ui/components/DefinitionList/styles.scss b/src/ui/components/DefinitionList/styles.scss index 5dcf5c59988..efa6440cf16 100644 --- a/src/ui/components/DefinitionList/styles.scss +++ b/src/ui/components/DefinitionList/styles.scss @@ -1,5 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; +@import '~ui/css/styles'; .DefinitionList { margin: 0; diff --git a/src/ui/components/DismissibleTextForm/styles.scss b/src/ui/components/DismissibleTextForm/styles.scss index 38d0f06abb6..3a70fb6be3d 100644 --- a/src/ui/components/DismissibleTextForm/styles.scss +++ b/src/ui/components/DismissibleTextForm/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .DismissibleTextForm-form { margin: 6px 0; diff --git a/src/ui/components/DropdownMenu/styles.scss b/src/ui/components/DropdownMenu/styles.scss index e72966faf73..0011c643cbb 100644 --- a/src/ui/components/DropdownMenu/styles.scss +++ b/src/ui/components/DropdownMenu/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .DropdownMenu { @include text-align-start(); diff --git a/src/ui/components/DropdownMenuItem/styles.scss b/src/ui/components/DropdownMenuItem/styles.scss index f0f78aec736..3da04917a63 100644 --- a/src/ui/components/DropdownMenuItem/styles.scss +++ b/src/ui/components/DropdownMenuItem/styles.scss @@ -1,6 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; -@import '~photon-colors/photon-colors'; +@import '~ui/css/styles'; .DropdownMenuItem-section { color: $grey-50; diff --git a/src/ui/components/ExpandableCard/styles.scss b/src/ui/components/ExpandableCard/styles.scss index 902c7979985..d6e1e1d59d9 100644 --- a/src/ui/components/ExpandableCard/styles.scss +++ b/src/ui/components/ExpandableCard/styles.scss @@ -1,5 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; +@import '~ui/css/styles'; .ExpandableCard-ToggleLink { display: flex; diff --git a/src/ui/components/FormOverlay/styles.scss b/src/ui/components/FormOverlay/styles.scss index 4ef7d2301b9..fb915ea26f7 100644 --- a/src/ui/components/FormOverlay/styles.scss +++ b/src/ui/components/FormOverlay/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .FormOverlay { align-items: center; diff --git a/src/ui/components/Hero/styles.scss b/src/ui/components/Hero/styles.scss index faf37a8f6de..d966e9bec90 100644 --- a/src/ui/components/Hero/styles.scss +++ b/src/ui/components/Hero/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .Hero { margin: 0 0 $padding-page; diff --git a/src/ui/components/HeroSection/styles.scss b/src/ui/components/HeroSection/styles.scss index caebe1fc9c1..b3a3410486c 100644 --- a/src/ui/components/HeroSection/styles.scss +++ b/src/ui/components/HeroSection/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .HeroSection { border-radius: $border-radius-default; diff --git a/src/ui/components/Icon/styles.scss b/src/ui/components/Icon/styles.scss index 197e49542c3..3838c3403fc 100644 --- a/src/ui/components/Icon/styles.scss +++ b/src/ui/components/Icon/styles.scss @@ -1,6 +1,5 @@ -@import '~ui/css/vars'; +@import '~ui/css/styles'; @import './vars'; -@import '~core/css/inc/mixins'; @mixin icon($name) { background: url('./img/#{$name}.svg') center no-repeat; diff --git a/src/ui/components/IconXMark/styles.scss b/src/ui/components/IconXMark/styles.scss index 98505fb5b47..4e43faa8869 100644 --- a/src/ui/components/IconXMark/styles.scss +++ b/src/ui/components/IconXMark/styles.scss @@ -1,4 +1,4 @@ -@import '~ui/css/vars'; +@import '~ui/css/styles'; @import '~ui/components/Icon/vars'; .IconXMark-svg { diff --git a/src/ui/components/LoadingText/styles.scss b/src/ui/components/LoadingText/styles.scss index 67acefe9408..3803acf0e8a 100644 --- a/src/ui/components/LoadingText/styles.scss +++ b/src/ui/components/LoadingText/styles.scss @@ -1,4 +1,4 @@ -@import '~photon-colors/photon-colors'; +@import '~ui/css/styles'; @keyframes placeHolderShimmer { 0% { diff --git a/src/ui/components/MetadataCard/styles.scss b/src/ui/components/MetadataCard/styles.scss index a53d8d16438..7405c524f48 100644 --- a/src/ui/components/MetadataCard/styles.scss +++ b/src/ui/components/MetadataCard/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .MetadataCard { background-color: $grey-10; diff --git a/src/ui/components/Notice/styles.scss b/src/ui/components/Notice/styles.scss index af29dddcfaa..7ace48426af 100644 --- a/src/ui/components/Notice/styles.scss +++ b/src/ui/components/Notice/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; @import '~ui/components/Button/styles'; .Notice { diff --git a/src/ui/components/Overlay/styles.scss b/src/ui/components/Overlay/styles.scss index 950f659b454..9d776847fd4 100644 --- a/src/ui/components/Overlay/styles.scss +++ b/src/ui/components/Overlay/styles.scss @@ -1,4 +1,4 @@ -@import '~photon-colors/photon-colors'; +@import '~ui/css/styles'; .Overlay { display: none; diff --git a/src/ui/components/OverlayCard/styles.scss b/src/ui/components/OverlayCard/styles.scss index fa365ba874c..926893eb099 100644 --- a/src/ui/components/OverlayCard/styles.scss +++ b/src/ui/components/OverlayCard/styles.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/vars'; +@import '~ui/css/styles'; .OverlayCard { margin: 0 20px; diff --git a/src/ui/components/Rating/styles.scss b/src/ui/components/Rating/styles.scss index 14e22cae706..ff70d2a46bc 100644 --- a/src/ui/components/Rating/styles.scss +++ b/src/ui/components/Rating/styles.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/mixins'; +@import '~ui/css/styles'; .Rating { align-content: center; diff --git a/src/ui/components/Select/styles.scss b/src/ui/components/Select/styles.scss index b4e516c4c15..022c58af6ed 100644 --- a/src/ui/components/Select/styles.scss +++ b/src/ui/components/Select/styles.scss @@ -1,7 +1,4 @@ -@import '~photon-colors/photon-colors'; - -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .Select { @include padding-end(24px); diff --git a/src/ui/components/ShowMoreCard/styles.scss b/src/ui/components/ShowMoreCard/styles.scss index c81b62bbe25..a606de2fb3d 100644 --- a/src/ui/components/ShowMoreCard/styles.scss +++ b/src/ui/components/ShowMoreCard/styles.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/mixins'; +@import '~ui/css/styles'; .ShowMoreCard-contents { &::after { diff --git a/src/ui/components/Switch/styles.scss b/src/ui/components/Switch/styles.scss index 7c433d87564..9d421cb9527 100644 --- a/src/ui/components/Switch/styles.scss +++ b/src/ui/components/Switch/styles.scss @@ -1,5 +1,5 @@ +@import '~ui/css/styles'; @import '~disco/css/inc/vars'; -@import '~core/css/inc/mixins'; $size: 26px; $borderSize: 1px; diff --git a/src/ui/components/ThemeImage/styles.scss b/src/ui/components/ThemeImage/styles.scss index 88570f3d220..0806e1522a1 100644 --- a/src/ui/components/ThemeImage/styles.scss +++ b/src/ui/components/ThemeImage/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .ThemeImage { height: auto; diff --git a/src/ui/components/TooltipMenu/styles.scss b/src/ui/components/TooltipMenu/styles.scss index 3fda21952e7..709bca2f2d6 100644 --- a/src/ui/components/TooltipMenu/styles.scss +++ b/src/ui/components/TooltipMenu/styles.scss @@ -1,5 +1,4 @@ -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .TooltipMenu { border: 0; diff --git a/src/ui/components/UserCollection/styles.scss b/src/ui/components/UserCollection/styles.scss index 9a04480aaeb..696b604a596 100644 --- a/src/ui/components/UserCollection/styles.scss +++ b/src/ui/components/UserCollection/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~ui/css/styles'; .CardList ul > li.UserCollection { padding: 4px $padding-page-l; diff --git a/src/ui/components/UserReview/styles.scss b/src/ui/components/UserReview/styles.scss index 3cedac8fd1f..e9d646538fe 100644 --- a/src/ui/components/UserReview/styles.scss +++ b/src/ui/components/UserReview/styles.scss @@ -1,5 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; +@import '~ui/css/styles'; .UserReview { word-wrap: break-word; diff --git a/src/ui/css/styles.scss b/src/ui/css/styles.scss new file mode 100644 index 00000000000..9a48dccf4ec --- /dev/null +++ b/src/ui/css/styles.scss @@ -0,0 +1,2 @@ +@import '~core/css/inc/mixins'; +@import './vars'; From 461f133a5f926f2fd397c9d2249f0483861802c7 Mon Sep 17 00:00:00 2001 From: William Durand Date: Mon, 27 Aug 2018 13:24:43 +0200 Subject: [PATCH 4/6] Fix lib import --- src/amo/components/App/styles.scss | 1 + src/amo/css/styles.scss | 1 - src/disco/components/App/styles.scss | 1 + src/disco/css/styles.scss | 1 - 4 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/amo/components/App/styles.scss b/src/amo/components/App/styles.scss index bf542f6d7e3..0924f190994 100644 --- a/src/amo/components/App/styles.scss +++ b/src/amo/components/App/styles.scss @@ -1,4 +1,5 @@ @import '~normalize.css'; +@import '~core/css/inc/lib'; @import '~amo/css/styles'; html, diff --git a/src/amo/css/styles.scss b/src/amo/css/styles.scss index 426fe12dfe5..1837240d0dd 100644 --- a/src/amo/css/styles.scss +++ b/src/amo/css/styles.scss @@ -1,4 +1,3 @@ -@import '~core/css/inc/lib'; @import '~core/css/inc/mixins'; @import '~ui/css/vars'; @import './inc/vars'; diff --git a/src/disco/components/App/styles.scss b/src/disco/components/App/styles.scss index 153248b3b85..f5ade0ecdeb 100644 --- a/src/disco/components/App/styles.scss +++ b/src/disco/components/App/styles.scss @@ -1,4 +1,5 @@ @import '~normalize.css'; +@import '~core/css/inc/lib'; @import '~disco/css/styles'; html, diff --git a/src/disco/css/styles.scss b/src/disco/css/styles.scss index 426fe12dfe5..1837240d0dd 100644 --- a/src/disco/css/styles.scss +++ b/src/disco/css/styles.scss @@ -1,4 +1,3 @@ -@import '~core/css/inc/lib'; @import '~core/css/inc/mixins'; @import '~ui/css/vars'; @import './inc/vars'; From 6744e62ad0e1d1ec534db241b71c323287838d99 Mon Sep 17 00:00:00 2001 From: William Durand Date: Tue, 28 Aug 2018 21:18:27 +0200 Subject: [PATCH 5/6] add styles.scss for core --- src/core/components/AMInstallButton/styles.scss | 3 +-- src/core/components/InfoDialog/styles.scss | 4 +--- src/core/components/InstallButton/styles.scss | 2 +- src/core/components/Paginate/styles.scss | 5 +---- src/core/components/SurveyNotice/styles.scss | 2 +- src/core/css/styles.scss | 2 ++ 6 files changed, 7 insertions(+), 11 deletions(-) create mode 100644 src/core/css/styles.scss diff --git a/src/core/components/AMInstallButton/styles.scss b/src/core/components/AMInstallButton/styles.scss index 222de292014..4b39852db97 100644 --- a/src/core/components/AMInstallButton/styles.scss +++ b/src/core/components/AMInstallButton/styles.scss @@ -1,5 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~core/css/inc/mixins'; +@import '~core/css/styles'; .AMInstallButton { .AMInstallButton-AnimatedIcon-preloader { diff --git a/src/core/components/InfoDialog/styles.scss b/src/core/components/InfoDialog/styles.scss index 9ebe97d6949..c0d58bbcc8f 100644 --- a/src/core/components/InfoDialog/styles.scss +++ b/src/core/components/InfoDialog/styles.scss @@ -1,6 +1,4 @@ -@import '~photon-colors/photon-colors'; -@import '~ui/css/vars'; -@import '~core/css/inc/mixins'; +@import '~core/css/styles'; // From Firefox source code: `toolkit/themes/shared/popupnotification.inc.css` $popup-notification-button-active: #0568ba; diff --git a/src/core/components/InstallButton/styles.scss b/src/core/components/InstallButton/styles.scss index 4768f657a77..5fcec725b75 100644 --- a/src/core/components/InstallButton/styles.scss +++ b/src/core/components/InstallButton/styles.scss @@ -1,4 +1,4 @@ -@import '~core/css/inc/mixins'; +@import '~core/css/styles'; .InstallButton { .InstallButton-button { diff --git a/src/core/components/Paginate/styles.scss b/src/core/components/Paginate/styles.scss index f126f9a93f7..63c3bdb1e5a 100644 --- a/src/core/components/Paginate/styles.scss +++ b/src/core/components/Paginate/styles.scss @@ -1,7 +1,4 @@ -@import '~photon-colors/photon-colors'; - -@import '~core/css/inc/mixins'; -@import '~ui/css/vars'; +@import '~core/css/styles'; .Paginate { padding: $padding-page; diff --git a/src/core/components/SurveyNotice/styles.scss b/src/core/components/SurveyNotice/styles.scss index fcbb29ecd58..d9d9c6f4530 100644 --- a/src/core/components/SurveyNotice/styles.scss +++ b/src/core/components/SurveyNotice/styles.scss @@ -1,4 +1,4 @@ -@import '~photon-colors/photon-colors'; +@import '~core/css/styles'; .SurveyNotice { .Notice-column { diff --git a/src/core/css/styles.scss b/src/core/css/styles.scss new file mode 100644 index 00000000000..3d062a0a4e1 --- /dev/null +++ b/src/core/css/styles.scss @@ -0,0 +1,2 @@ +@import './inc/mixins'; +@import '~ui/css/vars'; From 805655f984403744f03bfddfded558ab57be0a8a Mon Sep 17 00:00:00 2001 From: William Durand Date: Tue, 28 Aug 2018 21:21:07 +0200 Subject: [PATCH 6/6] fix sass deprecation --- src/amo/components/App/styles.scss | 2 +- src/disco/components/App/styles.scss | 2 +- webpack.prod.config.babel.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/amo/components/App/styles.scss b/src/amo/components/App/styles.scss index 0924f190994..b5ba61800d1 100644 --- a/src/amo/components/App/styles.scss +++ b/src/amo/components/App/styles.scss @@ -1,4 +1,4 @@ -@import '~normalize.css'; +@import '~normalize'; @import '~core/css/inc/lib'; @import '~amo/css/styles'; diff --git a/src/disco/components/App/styles.scss b/src/disco/components/App/styles.scss index f5ade0ecdeb..53674b2f7f7 100644 --- a/src/disco/components/App/styles.scss +++ b/src/disco/components/App/styles.scss @@ -1,4 +1,4 @@ -@import '~normalize.css'; +@import '~normalize'; @import '~core/css/inc/lib'; @import '~disco/css/styles'; diff --git a/webpack.prod.config.babel.js b/webpack.prod.config.babel.js index 9c6fe37978a..7b7ac952c09 100644 --- a/webpack.prod.config.babel.js +++ b/webpack.prod.config.babel.js @@ -78,7 +78,7 @@ export default { ], resolve: { alias: { - 'normalize.css': 'normalize.css/normalize.css', + normalize: 'normalize.css/normalize.css', tests: path.resolve('./tests'), }, modules: [path.resolve('./src'), 'node_modules'],