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.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
280
gaia/shared/style/buttons/index.html
Executable file
280
gaia/shared/style/buttons/index.html
Executable file
|
|
@ -0,0 +1,280 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Buttons</title>
|
||||
<link rel="stylesheet" href="../buttons.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
|
||||
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code,
|
||||
- they are not needed for the real case.
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
label.bb-docs {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -0.1rem 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem 3rem;
|
||||
border: solid 0.1rem #e8e8e8;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
div.bb-docs {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
div.bb-docs.skin-organic {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
div.bb-docs.skin-dark {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body[role="application"] > [role="region"] {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.getElementById('dir').checked = false;
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body role="application">
|
||||
<p dir="ltr">
|
||||
<label class="bb-docs">
|
||||
<input id="dir" type="checkbox" checked="false"
|
||||
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
|
||||
RTL mode
|
||||
</label>
|
||||
</p>
|
||||
<h2 class="bb-docs">Special buttons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button>Default</button>
|
||||
<button class="recommend">Recommend</button>
|
||||
<button class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Buttons with icons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">Default</button>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="" class="recommend">Recommend</button>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="" class="danger">Danger</button>
|
||||
<button data-icon="forward-light" aria-label="forward-light" data-l10n-id="">Default</button>
|
||||
<button data-icon="back" aria-label="back" data-l10n-id="">Default</button>
|
||||
<button data-icon="back-light" aria-label="back-light" data-l10n-id="">Default</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button disabled>Default</button>
|
||||
<a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
|
||||
<button disabled class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<button>Default</button>
|
||||
<button class="recommend">Recommend</button>
|
||||
<button class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<button disabled>Default</button>
|
||||
<a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
|
||||
<button disabled class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">List buttons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<ul>
|
||||
<li>
|
||||
<button>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled>Disabled</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-view">
|
||||
Icon view button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog">
|
||||
Icon dialog button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<span class="button icon icon-dialog">
|
||||
<select>
|
||||
<option selected>Icon dialog with options</option>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog" disabled>
|
||||
Icon dialog button disabled
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin Dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<ul>
|
||||
<li>
|
||||
<button>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled>Disabled</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog">
|
||||
Dark icon dialog button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Select</h2>
|
||||
<div class="bb-docs">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Fake select</h2>
|
||||
<div class="bb-docs">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled select</h2>
|
||||
<div class="bb-docs">
|
||||
<ul>
|
||||
<li>
|
||||
<span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Fake select</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue