added theme ads to options page

BenSibley · Jul 11, 2022 · 4481f9e · 4481f9e
1 parent 8219adf
commit 4481f9e
Show file tree

Hide file tree

Showing 8 changed files with 281 additions and 30 deletions.
diff --git a/assets/images/iawp.svg b/assets/images/iawp.svg
diff --git a/assets/images/reviews.png b/assets/images/reviews.png
diff --git a/assets/images/strive.svg b/assets/images/strive.svg
diff --git a/sass/admin.scss b/sass/admin.scss
@@ -124,6 +124,97 @@
       }
     }
   }
+  .ad {
+    padding: 24px;
+    margin-bottom: 24px;
+    background: #fff;
+    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.05);
+    border-color: #5123A0;
+
+    img {
+      width: 100%;
+      max-width: 100%;
+      height: auto;
+      line-height: 0;
+      margin: 0;
+    }
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 1.333;
+    }
+    .features,
+    .products {
+      padding-top: 12px;
+
+      ul {
+        margin: 12px 0 24px 12px;
+        font-size: 16px;
+        line-height: 1.5;
+      }
+    }
+    .product {
+      font-weight: 700;
+    }
+    .button {
+      text-align: center;
+      padding: 0;
+      border: none;
+
+      a {
+        display: block;
+        background-color: #FF9900;
+        border-radius: 3px;
+        padding: 11px;
+        color: #fff;
+        font-size: 18px;
+        line-height: 1.333;
+        font-weight: 700;
+        border: none;
+        text-decoration: none;
+        transition: color 0.2s, background-color 0.2s;
+
+        &:link,
+        &:visited {
+          color: #fff;
+        }
+        &:hover,
+        &:active,
+        &:focus {
+          color: #fff;
+          background-color: #FF9900;
+          text-decoration: none;
+        }
+      }
+    }
+    .logo-container {
+      line-height: 0;
+      height: 60px;
+    }
+    .features ul {
+      list-style: none;
+      margin-left: 0;
+
+      li {
+        margin-bottom: 4px;
+
+        &:before {
+          content: '\2714';
+          margin-right: 6px;
+          color: #5123A0;
+        }
+      }
+    }
+    &.strive {
+
+      .logo-container {
+        height: 100px;
+      }
+      .features ul li:before {
+        color: #43C47C;
+      }
+    }
+  }
   // Don't affect the admin notice that Chosen was activated
   .updated p {
     font-size: 13px;

diff --git a/styles/admin.css b/styles/admin.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 #apex-dashboard-wrap h2 {
   margin-bottom: 24px;
 }
@@ -108,6 +109,87 @@
 .apex-dashboard-wrap .sidebar .dashboard-widget img {
   max-width: 100%;
 }
+.apex-dashboard-wrap .ad {
+  padding: 24px;
+  margin-bottom: 24px;
+  background: #fff;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
+  border-color: #5123A0;
+}
+.apex-dashboard-wrap .ad img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  line-height: 0;
+  margin: 0;
+}
+.apex-dashboard-wrap .ad .title {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 1.333;
+}
+.apex-dashboard-wrap .ad .features,
+.apex-dashboard-wrap .ad .products {
+  padding-top: 12px;
+}
+.apex-dashboard-wrap .ad .features ul,
+.apex-dashboard-wrap .ad .products ul {
+  margin: 12px 0 24px 12px;
+  font-size: 16px;
+  line-height: 1.5;
+}
+.apex-dashboard-wrap .ad .product {
+  font-weight: 700;
+}
+.apex-dashboard-wrap .ad .button {
+  text-align: center;
+  padding: 0;
+  border: none;
+}
+.apex-dashboard-wrap .ad .button a {
+  display: block;
+  background-color: #FF9900;
+  border-radius: 3px;
+  padding: 11px;
+  color: #fff;
+  font-size: 18px;
+  line-height: 1.333;
+  font-weight: 700;
+  border: none;
+  text-decoration: none;
+  -webkit-transition: color 0.2s, background-color 0.2s;
+          transition: color 0.2s, background-color 0.2s;
+}
+.apex-dashboard-wrap .ad .button a:link, .apex-dashboard-wrap .ad .button a:visited {
+  color: #fff;
+}
+.apex-dashboard-wrap .ad .button a:hover, .apex-dashboard-wrap .ad .button a:active, .apex-dashboard-wrap .ad .button a:focus {
+  color: #fff;
+  background-color: #FF9900;
+  text-decoration: none;
+}
+.apex-dashboard-wrap .ad .logo-container {
+  line-height: 0;
+  height: 60px;
+}
+.apex-dashboard-wrap .ad .features ul {
+  list-style: none;
+  margin-left: 0;
+}
+.apex-dashboard-wrap .ad .features ul li {
+  margin-bottom: 4px;
+}
+.apex-dashboard-wrap .ad .features ul li:before {
+  content: "✔";
+  margin-right: 6px;
+  color: #5123A0;
+}
+.apex-dashboard-wrap .ad.strive .logo-container {
+  height: 100px;
+}
+.apex-dashboard-wrap .ad.strive .features ul li:before {
+  color: #43C47C;
+}
 .apex-dashboard-wrap .updated p {
   font-size: 13px;
   line-height: 1.5;

diff --git a/styles/admin.css.map b/styles/admin.css.map
diff --git a/styles/admin.min.css b/styles/admin.min.css