CSS demo fixes

atomiks · Oct 14, 2024 · 38d38fb · 38d38fb
1 parent dec8458
commit 38d38fb
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/docs/data/components/scroll-area/ScrollAreaInlay.js b/docs/data/components/scroll-area/ScrollAreaInlay.js
@@ -62,12 +62,17 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   width: 10px;
   height: calc(100% - var(--scroll-area-corner-height));
   background: rgb(220 220 220);
+  box-sizing: border-box;
 
   &[data-orientation='horizontal'] {
     width: calc(100% - var(--scroll-area-corner-width));

diff --git a/docs/data/components/scroll-area/ScrollAreaInlay.tsx b/docs/data/components/scroll-area/ScrollAreaInlay.tsx
@@ -62,12 +62,17 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   width: 10px;
   height: calc(100% - var(--scroll-area-corner-height));
   background: rgb(220 220 220);
+  box-sizing: border-box;
 
   &[data-orientation='horizontal'] {
     width: calc(100% - var(--scroll-area-corner-width));

diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js
@@ -48,13 +48,18 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   width: 10px;
   padding: 2px;
   visibility: hidden;
   background: transparent;
+  box-sizing: border-box;
   transition:
     opacity 0.2s,
     background 0.2s,
@@ -70,10 +75,6 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
     height: 10px;
   }
 
-  &[data-scrolling] {
-    transition: none;
-  }
-
   &[data-hovering],
   &[data-scrolling],
   &:hover {

diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx
@@ -48,13 +48,18 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   width: 10px;
   padding: 2px;
   visibility: hidden;
   background: transparent;
+  box-sizing: border-box;
   transition:
     opacity 0.2s,
     background 0.2s,
@@ -70,10 +75,6 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
     height: 10px;
   }
 
-  &[data-scrolling] {
-    transition: none;
-  }
-
   &[data-hovering],
   &[data-scrolling],
   &:hover {