VulpesOS/gaia/shared/style/object_menu/index.html
OverSu b38dea0597 Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
2026-09-30 23:13:03 +02:00

95 lines
2.3 KiB
HTML
Executable file

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Object menu</title>
<meta name="description" content="Presenting a list of actions related to the App content">
<link rel="stylesheet" href="../object_menu.css">
<link rel="stylesheet" href="../input_areas.css">
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
<!--
- These <style> and <script> elements are only used for the example code;
- they are not required for the real use case.
-->
<style type="text/css">
html, body {
font-family: sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
body {
background: none;
}
</style>
<script>
window.onkeypress = event => {
var dir = document.documentElement.dir;
document.documentElement.dir = (dir === 'ltr') ? 'rtl' : 'ltr';
};
</script>
</head>
<body role="application">
<p dir="ltr">
<label>
<input type="checkbox"
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
RTL mode
</label>
</p>
<form role="dialog" data-type="object">
<header>Title</header> <!-- this header is optional -->
<section>
<ul>
<li>First item</li>
<li><p>One Paragraph</p></li>
<li>
<p>Two</p>
<p>Paragraphs</p>
</li>
<li>
<p dir="auto">Two Paragraphs (one empty)</p>
<p></p>
</li>
</ul>
<h2>Buttons</h2>
<ul>
<li><button>Button</button></li>
<li><a href="#">Anchor</a></li>
<li>
<a href="#">
<p>Paragrah inside anchor</p>
</a>
</li>
<li>
<a href="#">
<p>Two Paragrahs</p>
<p>inside anchor</p>
</a>
</li>
</ul>
<h2>inputs</h2>
<ul class="skin-dark">
<li class="input">
<p>
<input type="text" placeholder="Placeholder">
<button type="reset"></button>
</p>
<p>
<textarea placeholder="Placeholder in textarea"></textarea>
</p>
</li>
</ul>
</section>
<menu>
<button>Cancel</button>
</menu>
</form>
</body>
</html>