mirror of
https://github.com/heyman/heynote.git
synced 2024-12-25 16:18:49 +01:00
Avoid zoom in on input focus, in the webapp on mobile devices
Set LanguageSelector's input font-size to 16px on mobile devices. Add SASS mixins "webapp" and "webapp-mobile" to write specific CSS for those clients.
This commit is contained in:
parent
54e390eeec
commit
c645b0bac8
@ -126,6 +126,9 @@
|
|||||||
+dark-mode
|
+dark-mode
|
||||||
background: #151516
|
background: #151516
|
||||||
box-shadow: 0 0 10px rgba(0,0,0,0.5)
|
box-shadow: 0 0 10px rgba(0,0,0,0.5)
|
||||||
|
+webapp-mobile
|
||||||
|
max-width: calc(100% - 80px)
|
||||||
|
|
||||||
input
|
input
|
||||||
background: #fff
|
background: #fff
|
||||||
padding: 4px 5px
|
padding: 4px 5px
|
||||||
@ -144,6 +147,9 @@
|
|||||||
border: 1px solid #5a5a5a
|
border: 1px solid #5a5a5a
|
||||||
&:focus
|
&:focus
|
||||||
border: 1px solid #3b3b3b
|
border: 1px solid #3b3b3b
|
||||||
|
+webapp-mobile
|
||||||
|
font-size: 16px
|
||||||
|
max-width: 100%
|
||||||
|
|
||||||
.items
|
.items
|
||||||
> li
|
> li
|
||||||
|
@ -1,3 +1,12 @@
|
|||||||
=dark-mode()
|
=dark-mode()
|
||||||
html[theme=dark] &
|
html[theme=dark] &
|
||||||
@content
|
@content
|
||||||
|
|
||||||
|
=webapp()
|
||||||
|
html[webapp] &
|
||||||
|
@content
|
||||||
|
|
||||||
|
=webapp-mobile()
|
||||||
|
@media (max-width: 600px)
|
||||||
|
html[webapp] &
|
||||||
|
@content
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" webapp="true">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
|
Loading…
Reference in New Issue
Block a user