mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 15:49:23 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improve mobile styling

Browse Source
This commit is contained in:
Philipp Kühn 2020-10-12 20:59:16 +02:00
parent 94e49b1c38
commit bfc23427e7
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/components/PageNavigation/style.scss
View File

@ -1,7 +1,7 @@
.page-navigation {
display: flex;
justify-content: space-between;
padding: 2rem 0;
padding: 1.5rem 0;
&__link {
color: rgba($colorWhite, 0.6);

31
docs/src/layouts/App/style.scss
View File

@ -1,4 +1,5 @@
$navHeight: 4.5rem;
$mobileBreakPoint: 600px;
$menuBreakPoint: 800px;
.app {
@ -36,6 +37,7 @@ $menuBreakPoint: 800px;
font: inherit;
color: $colorWhite;
padding: 0.5rem 0.75rem;
-webkit-appearance: none;
}
&__sidebar {
@ -73,6 +75,10 @@ $menuBreakPoint: 800px;
backdrop-filter: blur(10px);
max-height: 100vh;
@media (min-width: $menuBreakPoint) {
padding: 1.5rem 0;
}
&::after {
content: '';
z-index: -1;
@ -117,11 +123,19 @@ $menuBreakPoint: 800px;
&__inner {
margin: 0 auto;
max-width: 50rem;
padding: 0 2rem;
padding: 0 1rem;
@media (min-width: $mobileBreakPoint) {
padding: 0 2rem;
}
}
&__link-group {
margin-bottom: 2rem;
margin-bottom: 1rem;
@media (min-width: $mobileBreakPoint) {
margin-bottom: 2rem;
}
}
&__link-group-title {
@ -152,6 +166,7 @@ $menuBreakPoint: 800px;
border-radius: 5px;
font-size: 0.85rem;
margin-left: -0.5rem;
white-space: nowrap;
&:hover {
color: $colorWhite;
@ -173,7 +188,11 @@ $menuBreakPoint: 800px;
}
&__main {
padding: 2rem 0;
padding: 1rem 0;
@media (min-width: $mobileBreakPoint) {
padding: 2rem 0;
}
}
&__page-navigation {
@ -181,11 +200,15 @@ $menuBreakPoint: 800px;
}
&__mobile-nav {
padding: 1rem 2rem;
padding: 1rem;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
@media (min-width: $mobileBreakPoint) {
padding: 2rem;
}
}
}