fix website styles (#1335)

iTwin · Jun 8, 2023 · 6b197cd · 6b197cd
1 parent 4ddb8d0
commit 6b197cd
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 29 deletions.
diff --git a/apps/website/src/components/LeftSidebarContent.astro b/apps/website/src/components/LeftSidebarContent.astro
@@ -84,13 +84,17 @@ sections.set(
     padding-top: var(--space-7);
     max-height: 100vh;
     min-width: 220px;
-  }
 
-  .nav-groups > li + li:not(.nav-link) {
-    margin-top: var(--space-5);
+    > li:last-of-type {
+      padding-block-end: var(--space-7);
+    }
 
-    @media (max-width: 50em) {
-      margin-top: var(--space-7);
+    > li + li:not(.nav-link) {
+      margin-top: var(--space-5);
+
+      @media (max-width: 50em) {
+        margin-top: var(--space-7);
+      }
     }
   }
 

diff --git a/apps/website/src/components/LiveExample.astro b/apps/website/src/components/LiveExample.astro
@@ -34,6 +34,7 @@ if (code.includes('Copyright (c) Bentley Systems')) {
     className='demo-iui-wrapper'
     theme='dark'
     themeOptions={{ applyBackground: false }}
+    client:load
   >
     <slot />
   </ThemeProvider>
@@ -97,9 +98,10 @@ if (code.includes('Copyright (c) Bentley Systems')) {
     height: 100%;
     width: 100%;
     overflow: auto;
-    display: grid;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    justify-items: center;
   }
 
   .sandbox-link {

diff --git a/apps/website/src/components/variables/ColorList.astro b/apps/website/src/components/variables/ColorList.astro
@@ -1,35 +1,31 @@
 ---
-import ColorList from './ColorList';
-import '@itwin/itwinui-variables';
+import Wrapper from './_wrapper.astro';
+import ColorListR from './ColorList';
 
 type Props = { colors: string[] | string[][] } & astroHTML.JSX.HTMLAttributes;
 
 const { colors, ...rest } = Astro.props;
 ---
 
-<article class:list={[{ 'color-list-wrapper': Array.isArray(colors[0]) }]} {...rest}>
+<Wrapper class='color-list-wrapper' {...rest}>
   {
     Array.isArray(colors[0]) ? (
       <>
         {colors.map((_colors) => (
-          <ColorList client:visible colors={_colors} />
+          <ColorListR client:visible colors={_colors} />
         ))}
       </>
     ) : (
-      <ColorList client:visible colors={colors as string[]} />
+      <ColorListR client:visible colors={colors as string[]} />
     )
   }
-</article>
+</Wrapper>
 
 <style>
-  article {
-    border-radius: var(--space-2);
-    border: 1px solid var(--color-line-2);
-    padding: var(--space-3);
+  .color-list-wrapper {
     display: grid;
     grid-auto-flow: column;
     gap: var(--space-5);
-    justify-content: center;
   }
 </style>
 

diff --git a/apps/website/src/components/variables/FontsDemo.astro b/apps/website/src/components/variables/FontsDemo.astro
@@ -6,7 +6,7 @@ const { sizes, weights } = Astro.props;
 const howMany = sizes ? 6 : 4;
 ---
 
-<Wrapper class:list={[{ sizes: sizes, weights: !sizes && weights }]}>
+<Wrapper class={[sizes && 'sizes', !sizes && weights && 'weights'].filter(Boolean).join(' ')}>
   {
     Array.from({ length: howMany }).map((_, i) => (
       <p>The quick brown fox jumped over the lazy dog</p>

diff --git a/apps/website/src/components/variables/_wrapper.astro b/apps/website/src/components/variables/_wrapper.astro
@@ -1,4 +1,10 @@
-<article data-iui-theme='dark' {...Astro.props}>
+---
+import '@itwin/itwinui-variables';
+
+const { class: className, ...props } = Astro.props;
+---
+
+<article {...props} data-iui-theme='dark' class:list={['iui-root', className]}>
   <slot />
 </article>
 

diff --git a/apps/website/src/demos/Alert.demo.tsx b/apps/website/src/demos/Alert.demo.tsx
@@ -8,12 +8,13 @@ import { Alert, ThemeProvider } from '@itwin/itwinui-react';
 export default function AlertDemo() {
   return (
     <ThemeProvider theme='dark'>
-      <Alert
-        onClose={() => console.log('CLOSED')}
-        clickableText='Learn more'
-        style={{ minWidth: 'min(100%, 280px)' }}
-      >
-        This is an alert
+      <Alert style={{ minWidth: 'min(100%, 350px)' }}>
+        <Alert.Icon />
+        <Alert.Message>
+          This is an alert
+          <Alert.Action onClick={() => console.log('Clicked more info!')}>Learn more</Alert.Action>
+        </Alert.Message>
+        <Alert.CloseButton onClick={() => console.log('CLOSED')} />
       </Alert>
     </ThemeProvider>
   );

diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro
@@ -1,6 +1,7 @@
 ---
 // This file should contain all the global styles and markup shared between layouts.
 
+import '@itwin/itwinui-react/styles.css';
 import HeadSEO from '~/components/HeadSEO.astro';
 import MoveOnVisible from '~/components/utils/MoveOnVisible.astro';
 import '@fontsource/noto-sans';
@@ -235,7 +236,7 @@ const { content = {} } = Astro.props;
     </style>
   </head>
 
-  <body class='iui-root' data-iui-theme='dark'>
+  <body class='_iui3-root' data-iui-theme='dark'>
     <slot />
 
     <!-- Util classes/styles and scripts -->

diff --git a/apps/website/src/pages/docs/_layout.astro b/apps/website/src/pages/docs/_layout.astro
@@ -76,7 +76,6 @@ const currentPage = new URL(Astro.request.url).pathname;
     align-items: start;
     justify-content: center;
     padding: var(--space-7);
-    padding-block-end: calc(2 * var(--space-7));
     grid-template:
       'h1' auto
       'toc' auto
@@ -90,6 +89,13 @@ const currentPage = new URL(Astro.request.url).pathname;
         '. aftermain . toc' / 1fr var(--_content-width) 1fr auto;
       position: relative;
 
+      // using pseudo-element to work around firefox bug
+      &:global(::after) {
+        content: '';
+        grid-row: aftermain-end;
+        padding-block-end: var(--space-7);
+      }
+
       > :global(.toc-wrapper) {
         position: sticky;
         top: 0;

diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
@@ -1,5 +1,4 @@
 ---
-import '@itwin/itwinui-react/styles.css';
 import Global from './_global.astro';
 import Header from '~/components/Header.astro';
 import ITwinUILogo from '~/components/iTwinUILogo';