chore(announcement bar): os announcement bar config ops and styles

ionic-team · Jun 5, 2024 · 965d32b · 965d32b
1 parent 86b025c
commit 965d32b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -72,6 +72,12 @@ const config = {
   themeConfig:
     /** @type {import('@ionic-docs/preset-classic').ThemeConfig} */
     ({
+      announcementBar: {
+        id: 'announcement-bar',
+        content:
+          '<a href="https://www.outsystems.com/?utm_source=ionic&utm_medium=referral&utm_campaign=ionic-referral&utm_term=none&utm_content=other&utm_campaignteam=digital-mktg&utm_partner=none" target="_blank" rel="noopener"><span>An <strong>OutSystems</strong> Company →</span></a>',
+        isCloseable: false,
+      },
       logo: {
         alt: 'Site Logo',
         src: `/img/logo-light.png`,

diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -24,4 +24,46 @@
 
     --search-border: var(--c-carbon-80);
   }
+
+  // OS Announcement Bar
+  :root {
+    --docusaurus-announcement-bar-height: 3.5rem;
+  }
+  [class*='announcementBar_'] {
+    background: linear-gradient(90deg, #440f14, #5e1219 15%, #03060b 35%, #03060b 45%, #5e1219 85%, #440f14);
+
+    &:hover,
+    &:focus,
+    &:active {
+      strong {
+        color: var(--c-red-50);
+      }
+    }
+  }
+  [class*='announcementBarContent_'] {
+    padding: 0;
+
+    > a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--docusaurus-announcement-bar-height);
+
+      letter-spacing: 0.01em;
+      text-decoration: none;
+
+      color: #fff;
+
+      font-size: 1rem;
+      font-weight: 500;
+
+      strong {
+        font-weight: 500;
+
+        color: var(--c-red-70);
+
+        transition: color 0.2s ease-out;
+      }
+    }
+  }
 }