update column container styles + form

Sitecore · Nov 25, 2024 · d48e807 · d48e807
1 parent 53befe5
commit d48e807
Show file tree

Hide file tree

Showing 9 changed files with 534 additions and 260 deletions.
diff --git a/headapps/MvpSite/MvpSite.Rendering/Properties/launchSettings.json b/headapps/MvpSite/MvpSite.Rendering/Properties/launchSettings.json
@@ -6,7 +6,7 @@
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
-      "applicationUrl": "https://localhost:61669;http://localhost:61670"
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
     }
   }
 }
diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/ColumnContainer.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/ColumnContainer.cshtml
@@ -1,11 +1,11 @@
 <section class="column-container two-column-equal  ">
     <div class="container">
         <div class="row inner ">
-        <div class="sc-power-gradient-bg">
-        <div class="row">
+        <div class="row col-12">
             <sc-placeholder name="column-container"></sc-placeholder>
             </div>
             </div>
         </div>
     </div>
+    </div>
 </section>
diff --git a/headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/components/feature-panel.scss b/headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/components/feature-panel.scss
@@ -26,11 +26,14 @@
   }
 }
 .column-container {
-  .sc-power-gradient-bg {
-    padding-right: 1rem;
-    padding-left: 1rem;
-    .row {
+  .row {
+
+    .row:has(.feature-panel-card) {
+      @extend .sc-power-gradient-bg;
       gap: 1rem;
+      padding-right: 1rem;
+        padding-left: 1rem;
+        width: 100%;
       row-gap: 0;
     }
   }
@@ -50,6 +53,18 @@
     transform: translateX(100%);
     top: 0;
   }
+
+    &:before{
+        position: absolute;
+          width: 1rem;
+          background-color: white;
+          content: "";
+          height: 100%;
+          left: -2rem;
+          transform: translateX(100%);
+          top: 0;
+    }
+
   .feature-panel-text {
     background: none;
     padding: 3px;

diff --git a/headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/components/people/directory.scss b/headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/components/people/directory.scss
@@ -47,7 +47,7 @@
   }
   .grid {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     width: 100%;
     gap: 1rem;
     .col {

diff --git a/headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/components/selections/_form.scss b/headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/components/selections/_form.scss
@@ -2,6 +2,7 @@
 
 @mixin form() {
   .btn {
+    @extend .cta;
     border: none;
     border-radius: 0;
 
@@ -11,11 +12,12 @@
   }
 
   .btn-primary {
-    background-color: $sitecore-teal;
+
+@extend .primary;
   }
 
   .btn-secondary {
-    background-color: $unfocussed-bg;
+   @extend .secondary;
   }
 
   input,

diff --git a/...s/MvpSite/MvpSite.Rendering/wwwroot/sass/components/selections/apply/applicationform.scss b/...s/MvpSite/MvpSite.Rendering/wwwroot/sass/components/selections/apply/applicationform.scss
@@ -31,7 +31,7 @@
         line-height: 45px;
         display: block;
         font-size: 1.2em;
-        color: $sitecore-teal;
+        color: var(--sc-violet-500);
         border-radius: 50%;
         margin: 0 auto 10px auto;
         padding: 2px;
@@ -52,16 +52,16 @@
       }
 
       &.active {
-        color: $sitecore-teal;
+        color: var(--sc-violet-500);
 
         &:before {
           color: $contrast-text;
           border: none;
-          background-color: $sitecore-teal;
+          background-color: var(--sc-violet-500);
         }
 
         &:after {
-          background-color: $sitecore-teal;
+          background-color: var(--sc-violet-500);
         }
       }
     }

diff --git a/headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/layout/nav.scss b/headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/layout/nav.scss
@@ -117,3 +117,18 @@ $sc-font-color: #212529;
     padding-left: 10px;
   }
 }
+@media (max-width: 992px){
+    .main-nav{
+        .navbar-nav{
+            padding: 1rem;
+        }
+        .nav-item{
+            .sub-menu{
+                position: relative !important;
+                width: 100%;
+                top:0 !important;
+                box-shadow: none !important;
+            }
+        }
+    }
+}