ash-project/ash_hq
1
0
Fork 0
mirror of https://github.com/ash-project/ash_hq.git synced 2024-09-20 05:13:23 +12:00
Code Issues Projects Releases Packages Wiki Activity

style: custom scrollbar

Browse source
This commit is contained in:
brettkolodny 2022-09-07 10:48:10 -04:00
parent db50e2b1ef
commit c8bd91cf8d
2 changed files with 42 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/css/app.css
View file

@ -6,7 +6,7 @@
@import "syntax.css";
.search-hit {
color: #fb923c
color: #fb923c;
}
/* Alerts and form errors used by phx.new */
@ -96,4 +96,23 @@
color: black;
text-decoration: none;
cursor: pointer;
}
}
/* Hide scrollbar for Chrome, Safari and Opera */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
padding: 0px 4px 0px 4px;
margin-right: 12px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #888888;
border-radius: 12px;
}
/* Hide scrollbar for IE, Edge and Firefox */
.custom-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: 8px; /* Firefox */
scrollbar-color: #888888 transparent;
}

40
lib/ash_hq_web/pages/docs.ex
View file

@ -82,27 +82,29 @@ defmodule AshHqWeb.Pages.Docs do
</div>
</span>
<div class="grow w-screen overflow-hidden flex flex-row h-full justify-between md:space-x-12 bg-white dark:bg-primary-black">
<DocSidebar
id="sidebar"
class="hidden xl:block pt-10 w-80 overflow-x-hidden border-r"
change_version={@change_version}
add_version={@add_version}
remove_version={@remove_version}
module={@module}
libraries={@libraries}
extension={@extension}
sidebar_state={@sidebar_state}
collapse_sidebar={@collapse_sidebar}
expand_sidebar={@expand_sidebar}
guide={@guide}
library={@library}
library_version={@library_version}
selected_versions={@selected_versions}
dsl={@dsl}
/>
<div class="lg:border-r lg:pr-2 lg:pt-14">
<DocSidebar
id="sidebar"
class="hidden xl:block w-80 overflow-x-hidden custom-scrollbar"
change_version={@change_version}
add_version={@add_version}
remove_version={@remove_version}
module={@module}
libraries={@libraries}
extension={@extension}
sidebar_state={@sidebar_state}
collapse_sidebar={@collapse_sidebar}
expand_sidebar={@expand_sidebar}
guide={@guide}
library={@library}
library_version={@library_version}
selected_versions={@selected_versions}
dsl={@dsl}
/>
</div>
<div
id="docs-window"
class="w-full prose prose-xl max-w-4xl dark:bg-primary-black dark:prose-invert overflow-y-auto overflow-x-visible md:pr-8 md:mt-14 px-4 md:px-auto"
class="w-full prose prose-xl max-w-4xl dark:bg-primary-black dark:prose-invert overflow-y-auto overflow-x-visible md:pr-8 md:mt-14 px-4 md:px-auto custom-scrollbar"
phx-hook="Docs"
>
<div id="module-docs" class="w-full nav-anchor text-black dark:text-white relative py-4 md:py-auto">