OpenSource/LoveIt
1
0
Fork 0
mirror of https://github.com/dillonzq/LoveIt.git synced 2025-01-07 11:15:44 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix: fix iPad TOC orientation css bug

Browse source
This commit is contained in:
Dillon 2019-08-22 04:29:39 +08:00
parent 0788330819
commit 99d52daf69
1 changed files with 73 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
assets/css/_core/_media.scss
View file

@ -1,77 +1,77 @@
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.navbar { .navbar {
display: none; display: none !important;
} }
.post-toc { .post-toc {
display: none; display: none !important;
} }
.navbar-mobile { .navbar-mobile {
display: block; display: block !important;
position: fixed; position: fixed !important;
width: 100%; width: 100% !important;
z-index: 100; z-index: 100 !important;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s !important;
.container { .container {
padding: 0; padding: 0 !important;
margin: 0; margin: 0 !important;
height: 4.5em; height: 4.5em !important;
line-height: 4.5em; line-height: 4.5em !important;
background: $global-background-color; background: $global-background-color !important;
.navbar-header { .navbar-header {
display: flex; display: flex !important;
justify-content: space-between; justify-content: space-between !important;
align-items: center; align-items: center !important;
width: 100%; width: 100% !important;
font-size: 18px; font-size: 18px !important;
padding-right: 1em; padding-right: 1em !important;
padding-left: 1em; padding-left: 1em !important;
box-sizing: border-box; box-sizing: border-box !important;
.menu-toggle { .menu-toggle {
cursor: pointer; cursor: pointer !important;
line-height: 4.5em; line-height: 4.5em !important;
span { span {
display: block; display: block !important;
background: #000; background: #000 !important;
width: 36px; width: 36px !important;
height: 2px; height: 2px !important;
-webkit-border-radius: 3px; -webkit-border-radius: 3px !important;
-moz-border-radius: 3px; -moz-border-radius: 3px !important;
border-radius: 3px; border-radius: 3px !important;
-webkit-transition: .2s margin .2s, .2s transform; -webkit-transition: .2s margin .2s, .2s transform !important;
-moz-transition: .2s margin .2s, .2s transform; -moz-transition: .2s margin .2s, .2s transform !important;
transition: .2s margin .2s, .2s transform; transition: .2s margin .2s, .2s transform !important;
.dark-theme & { .dark-theme & {
background: $global-font-color-dark; background: $global-font-color-dark !important;
} }
} }
span:nth-child(1) { span:nth-child(1) {
margin-bottom: 8px; margin-bottom: 8px !important;
} }
span:nth-child(3) { span:nth-child(3) {
margin-top: 8px; margin-top: 8px !important;
} }
&.active { &.active {
span { span {
-webkit-transition: .2s margin, .2s transform .2s; -webkit-transition: .2s margin, .2s transform .2s !important;
-moz-transition: .2s margin, .2s transform .2s; -moz-transition: .2s margin, .2s transform .2s !important;
transition: .2s margin, .2s transform .2s; transition: .2s margin, .2s transform .2s !important;
} }
span:nth-child(1) { span:nth-child(1) {
-moz-transform: rotate(45deg) translate(4px, 6px); -moz-transform: rotate(45deg) translate(4px, 6px) !important;
-ms-transform: rotate(45deg) translate(4px, 6px); -ms-transform: rotate(45deg) translate(4px, 6px) !important;
-webkit-transform: rotate(45deg) translate(4px, 6px); -webkit-transform: rotate(45deg) translate(4px, 6px) !important;
transform: rotate(45deg) translate(4px, 6px); transform: rotate(45deg) translate(4px, 6px) !important;
} }
span:nth-child(2) { span:nth-child(2) {
@ -79,51 +79,51 @@
} }
span:nth-child(3) { span:nth-child(3) {
-moz-transform: rotate(-45deg) translate(8px, -10px); -moz-transform: rotate(-45deg) translate(8px, -10px) !important;
-ms-transform: rotate(-45deg) translate(8px, -10px); -ms-transform: rotate(-45deg) translate(8px, -10px) !important;
-webkit-transform: rotate(-45deg) translate(8px, -10px); -webkit-transform: rotate(-45deg) translate(8px, -10px) !important;
transform: rotate(-45deg) translate(8px, -10px); transform: rotate(-45deg) translate(8px, -10px) !important;
} }
} }
} }
} }
.menu { .menu {
text-align: center; text-align: center !important;
background: $global-background-color; background: $global-background-color !important;
border-top: 2px solid $global-font-color; border-top: 2px solid $global-font-color !important;
display: none; display: none !important;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
a { a {
display: block; display: block !important;
line-height: 2.5em; line-height: 2.5em !important;
} }
&.active { &.active {
display: block; display: block !important;
} }
.dark-theme & { .dark-theme & {
background: $global-background-color-dark; background: $global-background-color-dark !important;
border-top: 2px solid $global-font-color-dark; border-top: 2px solid $global-font-color-dark !important;
} }
} }
.dark-theme & { .dark-theme & {
background: $global-background-color-dark; background: $global-background-color-dark !important;
} }
} }
} }
#dynamic-to-top { #dynamic-to-top {
display: none; display: none !important;
} }
.post-warp { .post-warp {
.categories-card { .categories-card {
.card-item { .card-item {
width: 95%; width: 95% !important;
} }
} }
} }
@ -131,66 +131,53 @@
/* iPads (portrait) ----------- */ /* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { @media only screen and (min-width: 768px) {
.post-warp { .post-warp {
max-width: 600px; max-width: 600px !important;
} }
.navbar-mobile { .navbar-mobile {
display: none; display: none !important;
} }
.post-toc { .post-toc {
display: none; display: none !important;
} }
.post-toc-mobile { .post-toc-mobile {
display: block; display: block !important;
} }
} }
/* iPads (landscape) ----------- */ /* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) { @media only screen and (min-width: 1366px) {
.post-warp { .post-warp {
max-width: 560px; max-width: 560px !important;
} }
.post-toc { .post-toc {
display: block; display: block !important;
margin-left: 580px; margin-left: 580px !important;
} }
.navbar-mobile { .navbar-mobile {
display: none; display: none !important;
} }
.post-toc-mobile { .post-toc-mobile {
display: none; display: none !important;
} }
} }
/* Desktops and laptops ----------- */ /* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) { @media only screen and (min-width: 1600) {
.navbar-mobile { .navbar-mobile {
display: none; display: none !important;
} }
.post-toc-mobile { .post-toc-mobile {
display: none; display: none !important;
}
}
/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
/* Styles */
.navbar-mobile {
display: none;
}
.post-toc-mobile {
display: none;
} }
} }