Refactor: Split DMP Assistant custom stylesheets into separate blocks

app/assets/stylesheets/dmp-assistant/blocks/_alerts.scss

@@ -0,0 +1,4 @@
+.alert-info, .alert-warning, .alert-danger {
+  display: inline-block;
+  width: 100%;
+}

app/assets/stylesheets/dmp-assistant/blocks/_buttons.scss

@@ -0,0 +1,7 @@
+@use '../variables/colours' as *;
+
+/* link button AND change color of search icon AND all the buttons*/
+.btn-default, .btn-primary, #search-addon {
+    color: $color-alliance-darker-yellow !important;
+    background-color: $color-alliance-digital-grey !important;
+  }

app/assets/stylesheets/dmp-assistant/blocks/_close.scss

@@ -0,0 +1,9 @@
+/* Notification close icon visibility and position*/
+.close {
+  opacity: 1 !important;
+}
+
+button.close{
+  position: relative;
+  margin-right: -12px;
+}

app/assets/stylesheets/dmp-assistant/blocks/_font_awesomes.scss

@@ -0,0 +1,5 @@
+@use '../variables/colours' as *;
+
+.fas{
+  color: $color-alliance-yellow;
+}

app/assets/stylesheets/dmp-assistant/blocks/_index.scss

@@ -1 +1,10 @@
-@use 'password_checklist';
+@use 'alerts';
+@use 'buttons';
+@use 'close';
+@use 'font_awesomes';
+@use 'logos';
+@use 'navbars';
+@use 'navs';
+@use 'panels';
+@use 'password_checklist';
+@use 'tables';

app/assets/stylesheets/dmp-assistant/blocks/_logos.scss

@@ -0,0 +1,6 @@
+.app-logo {
+    width: 150px !important;
+    height: 86px !important;
+    padding: 0%;
+    margin-top: 0.6em;
+}

app/assets/stylesheets/dmp-assistant/blocks/_navbars.scss

@@ -0,0 +1,20 @@
+@use '../variables/colours' as *;
+
+.navbar-nav{
+    margin-left: 2.5em;
+}
+
+#org-navbar{
+    margin: auto;
+}
+
+/* For org navbar custom background color */
+@media (min-width: 768px) {
+    #admin-dropdown ul li a, #super-admin-dropdown ul li a {
+      &:hover,
+      &:focus{
+        color: $color-alliance-darker-yellow !important;
+        background-color: $color-alliance-digital-grey;
+      }
+    }
+  }

app/assets/stylesheets/dmp-assistant/blocks/_navs.scss

@@ -0,0 +1,51 @@
+@use '../variables/colours' as *;
+
+.nav-tabs, .nav-pills {
+    background-color: $color-alliance-digital-grey;
+}
+
+/* Styling for the Sign in & Create account .nav-tabs container */
+.sign-in .nav-tabs {
+  background: $color-white;
+  border: 1px solid #000;
+  border-bottom: none;
+  overflow: hidden;
+  display: flex;
+}
+
+/* Make the Sign in & Create account .nav-tabs evenly spaced */
+.sign-in .nav-tabs > li {
+  flex: 1;
+}
+
+/* General styling for the clickable Sign in & Create account tabs */
+.sign-in .nav-tabs > li > a {
+  color: $color-alliance-digital-grey;
+  text-align: center;
+  width: 100%; /* ensures the <a> fills the <li> */
+}
+
+/* Styling for the selected .sign-in tab */
+.sign-in .nav-tabs > li > a.active,
+.sign-in .nav-tabs > li > a.active:hover,
+.sign-in .nav-tabs > li.active > a,
+.sign-in .nav-tabs > li.active:hover > a {
+  color: $color-alliance-darker-yellow !important;
+  background: $color-alliance-digital-grey !important;
+  font-weight: bold;
+  border-bottom: 3px solid $color-alliance-darker-yellow;
+}
+
+/* nav-tabs overiding on active */
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus,
+.nav-tabs > li > a.active,
+.nav-tabs > li > a.active:hover,
+.nav-tabs > li > a.active:focus,
+.nav-tabs > li.active > a,
+.nav-tabs > li:hover > a,
+.nav-tabs > li:focus > a,
+.nav-tabs > li.active:hover > a,
+.nav-tabs > li.active:focus > a {
+  color: $color-alliance-digital-grey !important;
+}

app/assets/stylesheets/dmp-assistant/blocks/_panels.scss

@@ -0,0 +1,31 @@
+@use '../variables/colours' as *;
+
+/* This is added to the header of the Write Plan section in the Plans*/
+.heading-button > .panel-heading, .panel-default > .panel-heading {
+  color: $color-alliance-digital-grey;
+  background-color: $color-alliance-lighter-grey;
+  border-top: 3px solid $color-alliance-yellow;
+  cursor: pointer;
+  transition: color 1s ease, background 1s ease; /* Combine transitions */
+
+  &:hover,
+  &:focus {
+    background-color: $color-alliance-yellow;
+    i.fas.fa-plus.pull-right,
+    i.fas.pull-right.fa-minus{
+      color: $color-alliance-digital-grey;
+    }
+  }
+}
+
+/* Guidance collapse bar in Templates section icon color issues fix on-hover OR on focus*/
+.panel-heading {
+  &:hover,
+  &:focus {
+    i.fas.pull-left.fa-minus,
+    i.fas.fa-plus.pull-left,
+    i.fas.fa-arrows-alt.pull-right{
+      color: $color-alliance-digital-grey !important;
+    }
+  }
+}

app/assets/stylesheets/dmp-assistant/blocks/_tables.scss

@@ -0,0 +1,10 @@
+@use '../variables/colours' as *;
+
+/** Table content shadow added to make it look good**/
+.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+   box-shadow: 5px 5px 5px $color-alliance-light-grey, 0px -5px 5px $color-alliance-light-grey;
+  }
+
+thead th {
+    background-color: $color-alliance-digital-grey;
+}

app/assets/stylesheets/grey-branding.scss

@@ -11,96 +11,6 @@
   color: $color-alliance-darkest-yellow;
 }
 
-//logo style apply for all screen size
-//_logos.scss
-.app-logo{
-    width: 150px !important;
-    height: 86px !important;
-    padding: 0%;
-}
-
-.fas{
-  color: $color-alliance-yellow;
-}
-
-
-/*****
-Forms & Tables
-*****/
-.nav-tabs, .nav-pills{ //_navs.scss
-    background-color: $color-alliance-digital-grey;
-}
-
-
-//_table.scss
-thead th{
-    background-color: $color-alliance-digital-grey;
-}
-
-/* For org navbar custom background color */
-@media (min-width: 768px) {
-    #admin-dropdown ul li a, #super-admin-dropdown ul li a {
-      &:hover,
-      &:focus{
-        color: $color-alliance-darker-yellow !important;
-        background-color: $color-alliance-digital-grey;
-      }
-    }
-  }
-
-/* link button AND change color of search icon AND all the buttons*/
-.btn-default, .btn-primary, #search-addon {
-    color: $color-alliance-darker-yellow !important;
-    background-color: $color-alliance-digital-grey !important;
-  }
-
-/* Styling for the Sign in & Create account .nav-tabs container */
-.sign-in .nav-tabs {
-  background: $color-white;
-  border: 1px solid #000;
-  border-bottom: none;
-  overflow: hidden;
-  display: flex;
-}
-
-/* Make the Sign in & Create account .nav-tabs evenly spaced */
-.sign-in .nav-tabs > li {
-  flex: 1;
-}
-
-/* General styling for the clickable Sign in & Create account tabs */
-.sign-in .nav-tabs > li > a {
-  color: $color-alliance-digital-grey;
-  text-align: center;
-  width: 100%; /* ensures the <a> fills the <li> */
-}
-
-/* Styling for the selected .sign-in tab */
-.sign-in .nav-tabs > li > a.active,
-.sign-in .nav-tabs > li > a.active:hover,
-.sign-in .nav-tabs > li.active > a,
-.sign-in .nav-tabs > li.active:hover > a {
-  color: $color-alliance-darker-yellow !important;
-  background: $color-alliance-digital-grey !important;
-  font-weight: bold;
-  border-bottom: 3px solid $color-alliance-darker-yellow;
-}
-
-/* nav-tabs overiding on active */
-.nav-tabs > li > a:hover,
-.nav-tabs > li > a:focus,
-.nav-tabs > li > a.active,
-.nav-tabs > li > a.active:hover,
-.nav-tabs > li > a.active:focus,
-.nav-tabs > li.active > a,
-.nav-tabs > li:hover > a,
-.nav-tabs > li:focus > a,
-.nav-tabs > li.active:hover > a,
-.nav-tabs > li.active:focus > a {
-  color: $color-alliance-digital-grey !important;
-}
-
-
  /* Drop downs of the college lists in create plans section */
 
  .ui-menu {
@@ -130,18 +40,3 @@ thead th{
 a#language-menu, a#reference-menu, a#user-menu{
   margin-bottom: 3px !important;
 }
-
-/* Notification close icon visibility and position*/
-.close {
-  opacity: 1 !important;
-}
-
-button.close{
-  position: relative;
-  margin-right: -12px;
-} 
-
-.alert-info, .alert-warning, .alert-danger {
-  display: inline-block;
-  width: 100%;
-}

app/assets/stylesheets/rebranding-animation.scss

@@ -1,10 +1,5 @@
 @use './dmp-assistant/variables/colours' as *;
 
- /** Table content shadow added to make it look good**/
-.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
-   box-shadow: 5px 5px 5px $color-alliance-light-grey, 0px -5px 5px $color-alliance-light-grey;
-  }
-
 /* General styling for link visibility/accessibility */
 a,
 .btn.btn-link.dropdown-toggle, // "Actions" dropdown buttons
@@ -31,36 +26,6 @@ a.btn,
   text-decoration: none;
 }
 
-  /* This is added to the header of the Write Plan section in the Plans*/
-  .heading-button > .panel-heading,
-  .panel-default > .panel-heading {
-  color: $color-alliance-digital-grey;
-  background-color: $color-alliance-lighter-grey;
-  border-top: 3px solid $color-alliance-yellow;
-  cursor: pointer;
-  transition: color 1s ease, background 1s ease; /* Combine transitions */
-
-  &:hover,
-  &:focus {
-    background-color: $color-alliance-yellow;
-    i.fas.fa-plus.pull-right,
-    i.fas.pull-right.fa-minus{
-      color: $color-alliance-digital-grey;
-    }
-  }
-}
-
-/* Guidance collapse bar in Templates section icon color issues fix on-hover OR on focus*/
-.panel-heading {
-  &:hover,
-  &:focus {
-    i.fas.pull-left.fa-minus,
-    i.fas.fa-plus.pull-left,
-    i.fas.fa-arrows-alt.pull-right{
-      color: $color-alliance-digital-grey !important;
-    }
-  }
-}
 // form > fieldset > button.btn.btn-default {
 //   animation: wiggle 2s linear infinite;
 // }

app/assets/stylesheets/rebranding.scss

@@ -13,35 +13,15 @@ h1, h2, h3, h4, h5, h6{
     font-weight: bold;
 }
 
-
-/***********************
-Individual Changes
-defined by the original reference in each scss sheet (see comments) for easier move around
-************************/
-
 /*****
 navigation
 *****/
 
-//logo style apply for all screen size
-//_logos.scss
-.app-logo{
-    height: 200px;
-    margin-top: 0.6em;
-    // padding: 0;
-}
-
-
 //overriding the row margins to the zero. needs to addressed while refractoring css
 .row.no-row-margin{
     margin: 0px !important;
 }
 
-
-.navbar-nav{
-    margin-left: 2.5em;
-}
-
 .sign-in{
     margin-top: 5%;
 }
@@ -87,10 +67,6 @@ navigation
         }
     }
 
-    #org-navbar{ //_navbars.scss
-        margin: auto;
-    }
-
     #main{
         margin-top: 1em;
     }
@@ -110,18 +86,6 @@ navigation
     font-weight: 700;
 }
 
-/*****
-Forms & Tables
-*****/
-.nav-tabs, .nav-pills{ //_navs.scss
-    background-color: $color-alliance-darker-yellow;
-}
-
-//_table.scss
-thead th{
-    background-color: $color-alliance-darker-yellow;
-}
-
 //for the on focus and hover change the border left
 
 /****