adding styles to the list table

diff --git a/css/admin.min.css b/css/admin.min.css
index 859bb55..669cb32 100644 (file)
--- a/css/admin.min.css
+++ b/css/admin.min.css
@@ -1 +1 @@
-#map-area-container{padding:10px}#map-area-container #new-area-section{max-width:800px;background-color:white}#map-area-container #new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#map-area-container #new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#map-area-container #new-area-section .input-container input.area-name+label{top:15px !important}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#map-area-container #new-area-section .map-color-selection{margin-top:20px}#map-area-container #new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#map-area-container #list-header{padding:5px;background-color:#003366;color:white}#map-area-container #list-header .area-header{color:inherit}#map-area-container #area-list .record-container{margin-bottom:2px}#map-area-container #area-list .record-container .area-record{padding:5px;background-color:white;align-items:center}#map-area-container #area-list .record-container .area-record:hover{cursor:pointer;background-color:#F7F7F7}#map-area-container #area-list .record-container .area-record .area-record-delete{position:relative;right:15px}#map-area-container #area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}#area-update{margin-top:10px;float:right;margin-left:10px}#area-reset{margin-top:10px;background-color:rgba(244,67,54,0.8);display:none}.edit-field{background-color:rgba(30,202,162,0.3) !important}.error-field{background-color:rgba(244,67,54,0.3) !important}
+#map-area-container{padding:10px}#map-area-container #new-area-section{max-width:800px;background-color:white}#map-area-container #new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#map-area-container #new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#map-area-container #new-area-section .input-container input.area-name+label{top:15px !important}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#map-area-container #new-area-section .map-color-selection{margin-top:20px}#map-area-container #new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#map-area-container #list-header{padding:5px;background-color:#003366;color:white}#map-area-container #list-header .area-header{color:inherit;max-width:555px}#map-area-container #area-list .record-container{margin-bottom:0px}#map-area-container #area-list .record-container .area-record{padding:5px;background-color:white;align-items:center}#map-area-container #area-list .record-container .area-record:hover{cursor:pointer;background-color:#F7F7F7}#map-area-container #area-list .record-container .area-record .area-record-delete{position:relative;right:15px}#map-area-container #area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}#map-area-container #area-list .record-container:nth-child(even) .area-record{background-color:#E0F7F7}#area-update{margin-top:10px;float:right;margin-left:10px}#area-reset{margin-top:10px;background-color:rgba(244,67,54,0.8);display:none}.edit-field{background-color:rgba(30,202,162,0.3) !important}.error-field{background-color:rgba(244,67,54,0.3) !important}

diff --git a/sass/admin/_settings.scss b/sass/admin/_settings.scss
index d4e1e53..866c0fb 100644 (file)
--- a/sass/admin/_settings.scss
+++ b/sass/admin/_settings.scss
@@ -41,15 +41,18 @@
         color: white;
         .area-header{
             color: inherit;
+            max-width: 555px;
         }
     }
     #area-list{
         .record-container{
-            margin-bottom: 2px;
+            margin-bottom: 0px;
+            
             .area-record{
                 padding: 5px;
                 background-color: white;
                 align-items: center;
+                
                 &:hover{
                     cursor: pointer;
                     background-color: #F7F7F7;
@@ -62,6 +65,12 @@
                     }
                 }
             }
+            
+        }
+        .record-container:nth-child(even){
+            .area-record{
+                background-color: #E0F7F7;
+            }
         }
     }
 }

diff --git a/views/admin/settings/mapSettings.html b/views/admin/settings/mapSettings.html
index a58a175..a8ad7fd 100644 (file)
--- a/views/admin/settings/mapSettings.html
+++ b/views/admin/settings/mapSettings.html
@@ -43,10 +43,10 @@
         </div>
     </div>
     <div id="list-header" style="display: flex;">
-            <div class="aread-header" id="area-name-header" style="flex: 1; font-weight: bold;">Area Name</div>
-            <div class="aread-header" id="area-page-header" style="flex: 1; font-weight: bold;">Attached Page</div>
-            <div class="aread-header" id="area-color-header" style="flex: 1; font-weight: bold;">Hover Color</div>
-            <div class="aread-header" id="area-delete-header" style="flex: 0; font-weight: bold;"></div>
+            <div class="area-header" id="area-name-header" style="flex: 1; font-weight: bold;">Area Name</div>
+            <div class="area-header" id="area-page-header" style="flex: 1; font-weight: bold;">Attached Page</div>
+            <div class="area-header" id="area-color-header" style="flex: 1; font-weight: bold;">Hover Color</div>
+            <div class="area-header" id="area-delete-header" style="flex: 0; font-weight: bold;"></div>
     </div>
     <div id="area-list"></div>
 </div>