Add custom scrollbars and fix page heights
This commit is contained in:
parent
8e09c32643
commit
c33f51600a
|
@ -313,23 +313,6 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: var(--spectrum-global-color-gray-400)
|
|
||||||
var(--spectrum-alias-background-color-default);
|
|
||||||
}
|
|
||||||
.container::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
.container::-webkit-scrollbar-track {
|
|
||||||
background: var(--spectrum-alias-background-color-default);
|
|
||||||
}
|
|
||||||
.container::-webkit-scrollbar-thumb {
|
|
||||||
background-color: var(--spectrum-global-color-gray-400);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.container::-webkit-scrollbar-corner {
|
|
||||||
background: var(--spectrum-alias-background-color-default);
|
|
||||||
}
|
}
|
||||||
.container.quiet {
|
.container.quiet {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
|
|
|
@ -55,4 +55,25 @@ body {
|
||||||
|
|
||||||
* + .bb-margin-xl {
|
* + .bb-margin-xl {
|
||||||
margin-top: var(--spacing-xl);
|
margin-top: var(--spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbars */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--spectrum-alias-background-color-default);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--spectrum-global-color-gray-400);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: var(--spectrum-alias-background-color-default);
|
||||||
|
}
|
||||||
|
html * {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--spectrum-global-color-gray-400)
|
||||||
|
var(--spectrum-alias-background-color-default);
|
||||||
}
|
}
|
|
@ -21,7 +21,8 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.root {
|
.root {
|
||||||
height: calc(100% - 60px);
|
flex: 1 1 auto;
|
||||||
|
height: 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 260px minmax(510px, 1fr) 260px;
|
grid-template-columns: 260px minmax(510px, 1fr) 260px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -66,7 +66,8 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.root {
|
.root {
|
||||||
height: calc(100vh - 60px);
|
flex: 1 1 auto;
|
||||||
|
height: 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 260px minmax(0, 1fr);
|
grid-template-columns: 260px minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
|
|
|
@ -168,7 +168,8 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 260px 1fr 260px;
|
grid-template-columns: 260px 1fr 260px;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
height: calc(100vh - 60px);
|
flex: 1 1 auto;
|
||||||
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-nav {
|
.ui-nav {
|
||||||
|
|
Loading…
Reference in New Issue