Add Campaigns.components style

Author: christian147

src/Web/WebMVC/Views/Shared/_Layout.cshtml

@@ -13,6 +13,7 @@
         <link rel="stylesheet" href="~/css/shared/components/identity/identity.css" />
         <link rel="stylesheet" href="~/css/shared/components/pager/pager.css" />
         <link rel="stylesheet" href="~/css/basket/basket.component.css" />
+        <link rel="stylesheet" href="~/css/campaigns/campaigns.component.css" />
         <link rel="stylesheet" href="~/css/basket/basket-status/basket-status.component.css" />
         <link rel="stylesheet" href="~/css/catalog/catalog.component.css" />
         <link rel="stylesheet" href="~/css/orders/orders.component.css" />

src/Web/WebMVC/WebMVC.csproj

@@ -9,6 +9,18 @@
     <DockerComposeProjectPath>..\..\..\docker-compose.dcproj</DockerComposeProjectPath>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Content Remove="wwwroot/css\campaigns\catalog.component.css" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Include="wwwroot\css\campaigns\campaigns.component.css" />
+    <Content Include="wwwroot\css\campaigns\orders.component.css" />
+    <Content Include="wwwroot\css\catalog\orders.component.css">
+      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+    </Content>
+  </ItemGroup>
+
   <!--<ItemGroup>
     <Compile Remove="wwwroot\lib\bootstrap\**" />
     <Content Remove="wwwroot\lib\bootstrap\**" />

src/Web/WebMVC/wwwroot/css/campaigns/campaigns.component.css

@@ -0,0 +1,98 @@
+.esh-campaigns-hero {
+    background-image: url("../../images/main_banner.png");
+    background-size: cover;
+    height: 260px;
+    width: 100%;
+}
+
+.esh-campaigns-title {
+    position: relative;
+    top: 74.28571px;
+}
+
+    .esh-campaigns-label::before {
+        color: rgba(255, 255, 255, 0.5);
+        content: attr(data-title);
+        font-size: 0.65rem;
+        margin-top: 0.65rem;
+        margin-left: 0.5rem;
+        position: absolute;
+        text-transform: uppercase;
+        z-index: 1;
+    }
+
+    .esh-campaigns-label::after {
+        background-image: url("../../images/arrow-down.png");
+        height: 7px;
+        content: '';
+        position: absolute;
+        right: 1.5rem;
+        top: 2.5rem;
+        width: 10px;
+        z-index: 1;
+    }
+
+.esh-campaigns-items {
+    margin-top: 1rem;
+}
+
+.esh-campaigns-item {
+    text-align: center;
+    margin-bottom: 1.5rem;
+    width: 33%;
+    display: inline-block;
+    float: none !important;
+}
+
+@media screen and (max-width: 1024px) {
+    .esh-campaigns-item {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .esh-campaigns-item {
+        width: 100%;
+    }
+}
+
+.esh-campaigns-thumbnail {
+    max-width: 370px;
+    width: 100%;
+}
+
+.esh-campaigns-button {
+    background-color: #83D01B;
+    border: none;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-size: 1rem;
+    height: 3rem;
+    margin-top: 1rem;
+    transition: all 0.35s;
+    width: 80%;
+}
+    .esh-campaigns-button.is-disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
+
+    .esh-campaigns-button:hover {
+        background-color: #4a760f;
+        transition: all 0.35s;
+    }
+
+.esh-campaigns-name {
+    font-size: 1rem;
+    font-weight: 300;
+    margin-top: .5rem;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.esh-campaigns-description {
+    text-align: center;
+    font-weight: 300;
+    font-size: 14px;
+}
+

src/Web/WebMVC/wwwroot/css/shared/components/identity/identity.css

@@ -29,7 +29,7 @@
 
 .esh-identity-drop {
     background: #FFFFFF;
-    height: 0;
+    height: 0rem;
     min-width: 14rem;
     right: 0;
     overflow: hidden;
@@ -41,7 +41,7 @@
 
 .esh-identity:hover .esh-identity-drop {
     border: 1px solid #EEEEEE;
-    height: 7rem;
+    height: 9.5rem;
     transition: height 0.35s;
 }