Merge pull request #8187 from michaelchadwick/frontend-5759-main-list…

…-mixin-consistency main-list mixin consistency
ilios · Oct 25, 2024 · 7bb60d0 · 7bb60d0
2 parents e23b07b + 81041f3
commit 7bb60d0
Show file tree

Hide file tree

Showing 29 changed files with 152 additions and 172 deletions.
diff --git a/packages/frontend/app/styles/components/assign-students/manager.scss b/packages/frontend/app/styles/components/assign-students/manager.scss
@@ -1,5 +1,4 @@
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .assign-students-manager {
   @include m.main-list-box;
@@ -8,7 +7,7 @@
     @include m.main-list-box-header;
 
     h2 {
-      @include cm.ilios-heading;
+      @include m.ilios-heading;
     }
 
     .title {
@@ -22,12 +21,12 @@
     flex-direction: column;
     padding: 0.5rem;
 
-    @include cm.for-laptop-and-up {
+    @include m.for-laptop-and-up {
       flex-direction: row;
     }
 
     label {
-      @include cm.ilios-label;
+      @include m.ilios-label;
       margin: 0 0.5rem;
     }
 

diff --git a/packages/frontend/app/styles/components/assign-students/root.scss b/packages/frontend/app/styles/components/assign-students/root.scss
@@ -1,8 +1,7 @@
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .assign-students-root {
-  @include cm.main-section;
+  @include m.main-section;
 
   .filters {
     @include m.main-list-filters;

diff --git a/packages/frontend/app/styles/components/courses/list.scss b/packages/frontend/app/styles/components/courses/list.scss
@@ -1,4 +1,4 @@
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .courses-list {
   @include m.main-list-box-table;

diff --git a/packages/frontend/app/styles/components/courses/root.scss b/packages/frontend/app/styles/components/courses/root.scss
@@ -1,8 +1,7 @@
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .courses-root {
-  @include cm.main-section;
+  @include m.main-section;
 
   .filters {
     @include m.main-list-filters;
@@ -26,7 +25,7 @@
       @include m.main-list-box-header;
 
       h2 {
-        @include cm.ilios-heading;
+        @include m.ilios-heading;
       }
 
       .title {

diff --git a/packages/frontend/app/styles/components/curriculum-inventory/reports-list.scss b/packages/frontend/app/styles/components/curriculum-inventory/reports-list.scss
@@ -1,13 +1,12 @@
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .curriculum-inventory-reports {
-  @include cm.main-section;
+  @include m.main-section;
 
   .filters {
     @include m.main-list-filters;
 
-    @include cm.for-laptop-and-up {
+    @include m.for-laptop-and-up {
       justify-content: flex-start;
     }
 
@@ -28,7 +27,7 @@
       @include m.main-list-box-header;
 
       h2 {
-        @include cm.ilios-heading;
+        @include m.ilios-heading;
       }
 
       .title {

diff --git a/packages/frontend/app/styles/components/curriculum-inventory/sequence-block-list.scss b/packages/frontend/app/styles/components/curriculum-inventory/sequence-block-list.scss
@@ -1,15 +1,14 @@
 @use "../../ilios-common/colors" as c;
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .curriculum-inventory-sequence-block-list {
-  @include cm.main-section;
+  @include m.main-section;
 
   .header {
     @include m.main-list-box-header;
 
     h2 {
-      @include cm.ilios-heading;
+      @include m.ilios-heading;
     }
 
     .title {
@@ -33,8 +32,6 @@
   }
 
   .saved-result {
-    border: 1px solid c.$fernGreen;
-    margin: 1rem;
-    padding: 0.75rem;
+    @include m.main-list-saved-new;
   }
 }
diff --git a/packages/frontend/app/styles/components/ilios-users.scss b/packages/frontend/app/styles/components/ilios-users.scss
@@ -1,8 +1,7 @@
-@use "../ilios-common/mixins" as cm;
-@use "../mixins" as m;
+@use "../ilios-common/mixins" as m;
 
 .ilios-users {
-  @include cm.main-section;
+  @include m.main-section;
 
   .filters {
     @include m.main-list-filters;
@@ -19,7 +18,7 @@
       @include m.main-list-box-header;
 
       h2 {
-        @include cm.ilios-heading;
+        @include m.ilios-heading;
       }
 
       .title {

diff --git a/packages/frontend/app/styles/components/instructor-groups/loading.scss b/packages/frontend/app/styles/components/instructor-groups/loading.scss
@@ -1,4 +1,4 @@
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .instructor-groups-loading {
   @include m.main-list-loading-table;

diff --git a/packages/frontend/app/styles/components/instructor-groups/root.scss b/packages/frontend/app/styles/components/instructor-groups/root.scss
@@ -1,8 +1,7 @@
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .instructor-groups-root {
-  @include cm.main-section;
+  @include m.main-section;
 
   .filters {
     @include m.main-list-filters;
@@ -24,7 +23,7 @@
       @include m.main-list-box-header;
 
       h2 {
-        @include cm.ilios-heading;
+        @include m.ilios-heading;
       }
 
       .title {

diff --git a/packages/frontend/app/styles/components/learner-group/cohort-user-manager.scss b/packages/frontend/app/styles/components/learner-group/cohort-user-manager.scss
@@ -1,29 +1,28 @@
 @use "../../ilios-common/colors" as c;
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .learner-group-cohort-user-manager {
-  @include cm.detail-container(c.$tealBlue);
+  @include m.detail-container(c.$tealBlue);
   border-bottom: 0;
   border-top: 1px dotted c.$orange;
 
   .learner-group-cohort-user-manager-header {
-    @include cm.detail-container-header;
+    @include m.detail-container-header;
 
     .title {
-      @include cm.detail-container-title;
+      @include m.detail-container-title;
     }
 
     .actions {
       input {
-        @include cm.ilios-input;
+        @include m.ilios-input;
         width: 15rem;
       }
     }
   }
 
   .learner-group-cohort-user-manager-content {
-    @include cm.detail-container-content;
+    @include m.detail-container-content;
 
     .list {
       @include m.main-list-box-table;
@@ -33,7 +32,7 @@
   }
 
   .inline-button {
-    @include cm.ilios-button-reset;
+    @include m.ilios-button-reset;
     text-align: left;
     width: 100%;
   }

diff --git a/packages/frontend/app/styles/components/learner-group/members.scss b/packages/frontend/app/styles/components/learner-group/members.scss
@@ -1,39 +1,38 @@
 @use "../../ilios-common/colors" as c;
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .learner-group-members {
-  @include cm.detail-container(c.$tealBlue);
+  @include m.detail-container(c.$tealBlue);
   border-bottom: 0;
   display: grid;
   grid-template-columns: 3fr 1fr;
 
   .title {
-    @include cm.detail-container-title-style;
+    @include m.detail-container-title-style;
   }
 
   .actions {
     input {
-      @include cm.ilios-input;
+      @include m.ilios-input;
       width: 15rem;
     }
   }
 
   .learner-group-members-content {
-    @include cm.detail-container-content;
+    @include m.detail-container-content;
     grid-column: 1 / -1;
 
     .list {
       @include m.main-list-box-table;
-      @include cm.ilios-zebra-table;
+      @include m.ilios-zebra-table;
       grid-column: 1 / -1;
       max-height: 540px;
       overflow: auto;
     }
   }
 
   .inline-button {
-    @include cm.ilios-button-reset;
+    @include m.ilios-button-reset;
     text-align: left;
     width: 100%;
   }

diff --git a/packages/frontend/app/styles/components/learner-group/root.scss b/packages/frontend/app/styles/components/learner-group/root.scss
@@ -1,18 +1,17 @@
 @use "../../ilios-common/colors" as c;
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 @use "sass:color";
 
 .learner-group-root {
-  @include cm.main-section;
+  @include m.main-section;
 
   .learner-group-overview {
-    @include cm.ilios-overview(c.$orange);
+    @include m.ilios-overview(c.$orange);
     margin-left: 0.8rem;
 
     .block {
-      @include cm.ilios-overview-block;
+      @include m.ilios-overview-block;
 
       &.associatedcourses {
         align-items: flex-start;
@@ -23,7 +22,7 @@
           white-space: nowrap;
         }
         ul {
-          @include cm.ilios-tag-list;
+          @include m.ilios-tag-list;
 
           li {
             margin-top: 0;
@@ -41,16 +40,16 @@
     }
 
     .learner-group-overview-actions {
-      @include cm.detail-container-header;
+      @include m.detail-container-header;
       margin-top: 0.25rem;
       padding-top: 0.5rem;
 
       .title {
-        @include cm.detail-container-title;
+        @include m.detail-container-title;
       }
 
       .actions {
-        @include cm.for-phone-and-up {
+        @include m.for-phone-and-up {
           .toggle-buttons {
             display: inline;
           }
@@ -66,20 +65,20 @@
   .cohortmembers {
     .cohortmembers-loading {
       display: block;
-      @include cm.font-size("xxl");
+      @include m.font-size("xxl");
       margin: auto;
       text-align: center;
     }
   }
 
   .subgroups {
-    @include cm.detail-container-content;
+    @include m.detail-container-content;
 
     .header {
-      @include cm.detail-container-header;
+      @include m.detail-container-header;
 
       .title {
-        @include cm.detail-container-title;
+        @include m.detail-container-title;
       }
     }
 

diff --git a/packages/frontend/app/styles/components/learner-group/user-manager.scss b/packages/frontend/app/styles/components/learner-group/user-manager.scss
@@ -1,39 +1,38 @@
 @use "../../ilios-common/colors" as c;
-@use "../../ilios-common/mixins" as cm;
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .learner-group-user-manager {
-  @include cm.detail-container(c.$tealBlue);
+  @include m.detail-container(c.$tealBlue);
   border-bottom: 0;
   display: grid;
   grid-template-columns: 3fr 1fr;
 
   .title {
-    @include cm.detail-container-title-style;
+    @include m.detail-container-title-style;
   }
 
   .actions {
     input {
-      @include cm.ilios-input;
+      @include m.ilios-input;
       width: 15rem;
     }
   }
 
   .learner-group-user-manager-content {
-    @include cm.detail-container-content;
+    @include m.detail-container-content;
     grid-column: 1 / -1;
 
     .list {
       @include m.main-list-box-table;
-      @include cm.ilios-zebra-table;
+      @include m.ilios-zebra-table;
       grid-column: 1 / -1;
       max-height: 540px;
       overflow: auto;
     }
   }
 
   .inline-button {
-    @include cm.ilios-button-reset;
+    @include m.ilios-button-reset;
     text-align: left;
     width: 100%;
   }

diff --git a/packages/frontend/app/styles/components/learner-groups/loading.scss b/packages/frontend/app/styles/components/learner-groups/loading.scss
@@ -1,4 +1,4 @@
-@use "../../mixins" as m;
+@use "../../ilios-common/mixins" as m;
 
 .learner-groups-loading {
   @include m.main-list-loading-table;