Merge pull request #4515 from consul/application_css

Fix order loading custom styles

app/assets/stylesheets/application.scss

@@ -3,6 +3,7 @@
 @import "fonts";
 @import "font-awesome-sprockets";
 @import "font-awesome";
+@import "leaflet";
 @import "icons";
 @import "mixins/*";
 @import "admin";
@@ -19,7 +20,6 @@
 @import "notification_item";
 @import "community";
 @import "stats";
-@import "custom";
 @import "c3";
 @import "annotator.min";
 @import "amsify.suggestags";
@@ -29,7 +29,6 @@
 @import "jquery-ui/autocomplete";
 @import "autocomplete_overrides";
 @import "jquery-ui/sortable";
-@import "leaflet";
 @import "sticky_overrides";
 @import "tags";
 @import "admin/**/*";
@@ -38,3 +37,6 @@
 @import "sdg_management/*";
 @import "sdg_management/**/*";
 @import "widgets/**/*";
+
+@import "custom";
+@import "custom/**/*";

app/assets/stylesheets/custom.scss

@@ -1,5 +1,4 @@
-// Overrides and adds customized styles in this file
-// Read more on documentation:
-// * English: https://github.com/consul/consul/blob/master/CUSTOMIZE_EN.md#css
-// * Spanish: https://github.com/consul/consul/blob/master/CUSTOMIZE_ES.md#css
+// Override and add customized styles in this file.
 //
+// You can also create SCSS files in the app/assets/stylesheets/custom/
+// folder and they will be loaded automatically.

app/assets/stylesheets/layout.scss

@@ -2596,25 +2596,25 @@ table {
 .leaflet-bar a {
 
  &.leaflet-disabled {
- color: #525252 !important;
+ color: #525252;
  }
 }
 
 .leaflet-container {
 
  .leaflet-control-attribution {
- background: rgba(255, 255, 255, 0.9) !important;
+ background: rgba(255, 255, 255, 0.9);
  }
 
  a {
- color: $link !important;
+ color: $link;
  }
 }
 
 .leaflet-bottom,
 .leaflet-pane,
 .leaflet-top {
- z-index: 4 !important;
+ z-index: 4;
 }
 
 // 24. Homepage