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.
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>
|
||||
|
After Width: | Height: | Size: 294 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 11.698,19.66 5.056,-5.057 -5.056,-5.056 c 0.31,-0.516 0.62,-1.032 0.93,-1.34 L 18.3,13.88 v 1.652 l -5.675,5.676 c -0.31,-0.515 -0.722,-0.928 -0.93,-1.547 z"/></svg>
|
||||
|
After Width: | Height: | Size: 292 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#00AAC5" enable-background="new" d="M9 0L9 9 0 9"/></svg>
|
||||
|
After Width: | Height: | Size: 148 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#B2F2FF" d="M9 0v9h-9"/></svg>
|
||||
|
After Width: | Height: | Size: 121 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path opacity=".5" fill="#A9A9A9" d="M9 0L9 9 0 9"/></svg>
|
||||
|
After Width: | Height: | Size: 137 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path opacity=".5" fill="#A9A9A9" enable-background="new" d="M0 0L0 9 9 9"/></svg>
|
||||
|
After Width: | Height: | Size: 161 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#00AAC5" enable-background="new" d="M0 0L0 9 9 9"/></svg>
|
||||
|
After Width: | Height: | Size: 148 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" fill="#424242" d="M23.385 21.494c.266.266.057.903-.465 1.426s-1.16.729-1.426.465l-4.041-4.039c-1.01.656-2.21 1.047-3.505 1.047-3.561 0-6.448-2.885-6.448-6.446 0-3.56 2.887-6.446 6.448-6.446 3.562 0 6.449 2.887 6.449 6.446 0 1.297-.393 2.499-1.051 3.509l4.041 4.039h-.002zm-9.437-12.459c-2.712 0-4.914 2.198-4.914 4.912s2.202 4.913 4.914 4.913c2.714 0 4.914-2.199 4.914-4.913-.001-2.714-2.2-4.912-4.914-4.912z"/></svg>
|
||||
|
After Width: | Height: | Size: 546 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" fill="#8F9091" d="M23.385 21.494c.266.266.057.903-.465 1.426s-1.16.729-1.426.465l-4.041-4.039c-1.01.656-2.21 1.047-3.505 1.047-3.561 0-6.448-2.885-6.448-6.446 0-3.56 2.887-6.446 6.448-6.446 3.562 0 6.449 2.887 6.449 6.446 0 1.297-.393 2.499-1.051 3.509l4.041 4.039h-.002zm-9.437-12.459c-2.712 0-4.914 2.198-4.914 4.912s2.202 4.913 4.914 4.913c2.714 0 4.914-2.199 4.914-4.913-.001-2.714-2.2-4.912-4.914-4.912z"/></svg>
|
||||
|
After Width: | Height: | Size: 546 B |
|
|
@ -0,0 +1,236 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Input areas</title>
|
||||
<link rel="stylesheet" href="../input_areas.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 use case.
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
label.bb-docs {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-family: sans-serif;
|
||||
padding: 0.4rem 3rem;
|
||||
margin: -0.1rem 0 0;
|
||||
border: solid 0.1rem #e8e8e8;
|
||||
color: #666;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
form { margin: 1rem 1.5rem; }
|
||||
|
||||
form[role="search"] { margin: 1rem 0; }
|
||||
|
||||
div.skin-dark {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
div.skin-dark.margins {
|
||||
margin: 1rem -1.5rem;
|
||||
padding: 1.5rem 1.5rem 0.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* .bb-editable
|
||||
* Added properties for this example, don't add on app.
|
||||
*/
|
||||
.bb-editable {
|
||||
padding: 1.5rem 1rem 0.5rem;
|
||||
background: #bbb;
|
||||
}
|
||||
|
||||
/**
|
||||
* .icon-email:before
|
||||
* Define the background-image with custom icon for App.
|
||||
* Attention, the pseudo-element is required for compatibility with Building Blocks.
|
||||
*
|
||||
* Example:
|
||||
* .icon-mms:before { background-image: url(...); }
|
||||
*/
|
||||
.icon-email:after {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASRJREFUeNrsl8ENgjAUhqlhAEfxQDyzgXdOjoCT0ClYg54Nu+gGtcRiAlJ5fQ9CDP+XFJOW+hlo6/uTBADw76hfg9ba0n0cBd//VErp6FlO3FgZDevn9pO50u4iEXPkn/ul4hj54L4lxBT51/hS4odrVUA62b+UOCSvfP+q4rE8KF1DTF5w3JPLio9Gx1T/Yauzen/idGb8Jv13QgEAAAAAyNJi27bitJhlmeYUAhfXcoHYuKY5pU/uJ3OluaTm4sjN3JOiFnsxckN5PTFVJkVuqGsitrw9hRaL7ycvxFhxt7WuE3Lt+1ct6MfyXhq131PmVukkpX+n5RYRhn24IC0iLQIAAABIi2/uRSFOi+e6RlpEWkRaRFpEWkRaRFoEYG+8BBgAvaeWTjgXDaoAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
</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">Default inputs</h2>
|
||||
<form>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Placeholder">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<textarea placeholder="Placeholder in textarea"></textarea>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Placeholder" value="Some written text" required>
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Disabled" disabled required>
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
|
||||
<div class="skin-dark margins">
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Placeholder" value="Some written text">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Required inputs</h2>
|
||||
<form>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Placeholder" required>
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<textarea placeholder="Placeholder in textarea" required></textarea>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Date/time inputs</h2>
|
||||
<form>
|
||||
<p>
|
||||
<input dir="auto" disabled type="date" placeholder="YYYY-MM-DD">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input dir="auto" type="time" placeholder="hh:mm:ss">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Fieldset</h2>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend class="action">Mobile</legend>
|
||||
<section>
|
||||
<p>
|
||||
<input dir="ltr" type="tel" placeholder="Phone number">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Name" value="Jessy James">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</section>
|
||||
</fieldset>
|
||||
|
||||
<fieldset disabled>
|
||||
<legend>Work</legend>
|
||||
<section>
|
||||
<p>
|
||||
<input dir="ltr" type="tel" placeholder="Email">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</section>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Forms: Input text</h2>
|
||||
<form role="search">
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Search…">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form role="search">
|
||||
<button type="submit">Cancel</button>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Search…" value="Some text here">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div class="skin-dark">
|
||||
<h2 class="bb-docs">Skin dark</h2>
|
||||
<form role="search" class="skin-dark">
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Search…">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form role="search" class="skin-dark">
|
||||
<button type="submit">Cancel</button>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Search…" value="Some text here">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Forms: Text area</h2>
|
||||
<form role="search" class="bottom">
|
||||
<!-- this button should be enabled after start typing in the input field-->
|
||||
<button type="submit" disabled>Send</button>
|
||||
<p>
|
||||
<textarea></textarea>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form role="search" class="bottom">
|
||||
<button type="submit">Send</button>
|
||||
<p>
|
||||
<textarea>Some text here</textarea>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form role="search" class="bottom">
|
||||
<button type="submit" class="icon" data-icon="send" aria-hidden="true">Send</button>
|
||||
<p>
|
||||
<textarea>Some text here</textarea>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Content Editable</h2>
|
||||
<ul class="bb-editable">
|
||||
<li dir="auto" contenteditable="false">Travis Gray Travis Gray</li>
|
||||
<li dir="auto" contenteditable="false" class="invalid">Lucy B.</li>
|
||||
<li dir="auto" contenteditable="false" class="icon icon-email">Mary</li>
|
||||
<li dir="auto" contenteditable="false" class="invalid icon icon-email">Paul C.</li>
|
||||
<li dir="auto" contenteditable="true">John</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
assets/webapps/clock.gaiamobile.org/shared/style/status.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
html[dir="ltr"] section[role="status"] [dir] { text-align: left; }
|
||||
html[dir="rtl"] section[role="status"] [dir] { text-align: right; }
|
||||
section[role="status"] {
|
||||
background-color: #4d4d4d;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
}
|
||||
html[dir="ltr"] section[role="status"] { background-position: left top; }
|
||||
html[dir="rtl"] section[role="status"] { background-position: right top; }
|
||||
section[role="status"] p {
|
||||
font-size: 1.8rem;
|
||||
font-weight: normal;
|
||||
line-height: 2.2rem;
|
||||
margin: 1rem 3rem;
|
||||
padding: 0;
|
||||
}
|
||||
section[role="status"] p strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Status</title>
|
||||
<meta name="description" content="Most common used after Multi-Select edit, to confirm user action, and optional provide 'Undo' input">
|
||||
|
||||
<link rel="stylesheet" href="../status.css">
|
||||
|
||||
<!--
|
||||
This <style>, <script> and <link> are only used for the example code,
|
||||
they are not needed for the real use case
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
document.getElementById('dir').checked = false;
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<p dir="ltr">
|
||||
<label>
|
||||
<input id="dir" type="checkbox"
|
||||
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
|
||||
RTL mode
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<section role="status">
|
||||
<p>The Alarm is set for <strong>7 hours</strong> and <strong>14 minutes</strong> from now</p>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
234
assets/webapps/clock.gaiamobile.org/shared/style/tabs.css
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
|
||||
.bb-tablist:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 4.5rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-top: 0.1rem solid #e7e7e7;
|
||||
}
|
||||
.bb-tablist {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.bb-tablist > li {
|
||||
-moz-box-sizing: content-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 4.5rem;
|
||||
background-color: #ffffff;
|
||||
list-style: none;
|
||||
pointer-events: all;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
.bb-tablist > li > a,
|
||||
.bb-tablist > li > button {
|
||||
position: relative;
|
||||
-moz-box-sizing: content-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #5f5f5f;
|
||||
font-size: 1.6rem;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
line-height: 4.5rem;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-size: 3rem auto;
|
||||
background-repeat: no-repeat;
|
||||
outline: none;
|
||||
}
|
||||
.bb-tablist > li > button {
|
||||
background-image: none;
|
||||
}
|
||||
.bb-tablist > li > button::-moz-focus-inner {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.bb-tablist > li > .icon {
|
||||
font-size: 0;
|
||||
background-position: 50% 0;
|
||||
}
|
||||
.bb-tablist > li > a[data-icon] {
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
.bb-tablist > li > a[data-icon]:before {
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
.bb-tablist > li > a:active,
|
||||
.bb-tablist > li > button:active {
|
||||
border-radius: 0;
|
||||
background-color: #b2f2ff;
|
||||
}
|
||||
.bb-tablist.skin-dark:before {
|
||||
border-color: rgba(189,189,189, 0.1);
|
||||
}
|
||||
.bb-tablist.skin-dark > li:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 4.5rem;
|
||||
background-color: #000000;
|
||||
z-index: -1;
|
||||
}
|
||||
.bb-tablist.skin-dark > li {
|
||||
background-color: transparent;
|
||||
}
|
||||
.bb-tablist.skin-dark > li > a,
|
||||
.bb-tablist.skin-dark > li > button {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.bb-tablist.skin-dark > li > a:active,
|
||||
.bb-tablist.skin-dark > li > button:active {
|
||||
background-color: rgb(0,170,204);
|
||||
}
|
||||
.bb-tablist > li > a:after,
|
||||
.bb-tablist > li > button:after {
|
||||
display: none;
|
||||
}
|
||||
.bb-tablist > li > a[aria-selected="true"],
|
||||
.bb-tablist > li > button[aria-selected="true"] {
|
||||
color: #00aacc;
|
||||
font-weight: 500;
|
||||
background-position: 50% 100%;
|
||||
}
|
||||
.bb-tablist > li > a[aria-selected="true"]:after,
|
||||
.bb-tablist > li > button[aria-selected="true"]:after {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top:0;
|
||||
height: calc(100% - 0.3rem);
|
||||
border-bottom: 0.3rem solid #00aacc;
|
||||
}
|
||||
.bb-tablist > li > a[aria-selected="true"]:active,
|
||||
.bb-tablist > li > button[aria-selected="true"]:active {
|
||||
color: #5f5f5f;
|
||||
background-position: 50% 0;
|
||||
}
|
||||
.bb-tablist.skin-dark > li > a[aria-selected="true"]:active,
|
||||
.bb-tablist.skin-dark > li > button[aria-selected="true"]:active {
|
||||
background-color: #00aacc;
|
||||
color: #fff;
|
||||
}
|
||||
.bb-tablist > li[aria-disabled="true"] > a,
|
||||
.bb-tablist > li[aria-disabled="true"] > button,
|
||||
.bb-tablist > li[disabled] > a,
|
||||
.bb-tablist > li[disabled] > button,
|
||||
.bb-tablist > li > a[aria-disabled="true"],
|
||||
.bb-tablist > li > button[aria-disabled="true"],
|
||||
.bb-tablist > li > a[disabled],
|
||||
.bb-tablist > li > button[disabled] {
|
||||
color: #333333;
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
.bb-tablist.skin-dark > li[aria-disabled="true"] > a,
|
||||
.bb-tablist.skin-dark > li[aria-disabled="true"] > button,
|
||||
.bb-tablist.skin-dark > li[disabled] > a,
|
||||
.bb-tablist.skin-dark > li[disabled] > button,
|
||||
.bb-tablist.skin-dark > li > a[aria-disabled="true"],
|
||||
.bb-tablist.skin-dark > li > button[aria-disabled="true"],
|
||||
.bb-tablist.skin-dark > li > a[disabled],
|
||||
.bb-tablist.skin-dark > li > button[disabled] {
|
||||
opacity: 0.35;
|
||||
background-color: transparent;
|
||||
}
|
||||
.bb-tablist .bb-tabpanel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 4.5rem;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
.bb-tablist [aria-selected="true"] ~.bb-tabpanel {
|
||||
visibility: visible;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-bottom: 0.1rem solid #e7e7e7;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bb-tablist[data-type="filter"]:before {
|
||||
display: none;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li {
|
||||
background: none;
|
||||
position: relative;
|
||||
color: #737272;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li:first-child {
|
||||
border-inline-start: none;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li > a,
|
||||
.bb-tablist[data-type="filter"] > li > button {
|
||||
height: 4rem;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
width: auto;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
padding: 0 0.5rem;
|
||||
color: #575757;
|
||||
line-height: 4rem;
|
||||
font-style: italic;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li > a:before,
|
||||
.bb-tablist[data-type="filter"] > li > button:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li:before,
|
||||
.bb-tablist[data-type="filter"] > li > a[aria-selected="true"]:after,
|
||||
.bb-tablist[data-type="filter"] > li > button[aria-selected="true"]:after {
|
||||
display: none;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li:active {
|
||||
color: #ffffff;
|
||||
background-color: #b2f2ff;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li > a[aria-selected="true"],
|
||||
.bb-tablist[data-type="filter"] > li > button[aria-selected="true"] {
|
||||
color: #000000;
|
||||
color: #0AC;
|
||||
border-bottom: 0.3rem solid #0AC;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li > a[aria-selected="true"]:after,
|
||||
.bb-tablist[data-type="filter"] > li > button[aria-selected="true"]:after {
|
||||
display: none;
|
||||
}
|
||||
.bb-tablist[data-type="filter"] > li > a:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Filters</title>
|
||||
<meta name="description" content="Filters can be used to enable the user to view a single set of data in a different lens">
|
||||
|
||||
<link rel="stylesheet" href="../tabs.css">
|
||||
|
||||
<!--
|
||||
This <style> and <link> is only used for the example code, is no needed for the real case use
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-family: sans-serif;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -1px 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem 0.4rem 0.4rem 3rem;
|
||||
border: solid 1px #e8e8e8;
|
||||
}
|
||||
|
||||
body[role="application"] ul.bb-tablist[data-type="filter"] {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body role="application">
|
||||
<section role="region">
|
||||
|
||||
<h2 class="bb-docs">Default position - Default Filters</h2>
|
||||
<ul role="tablist" class="bb-tablist" data-type="filter">
|
||||
<li id="filter1-1" role="presentation"><a href="#filter1-1" role="tab">Action 01</a></li>
|
||||
<li id="filter1-2" role="presentation"><a href="#filter1-2" role="tab">Action 02</a></li>
|
||||
</ul>
|
||||
|
||||
<ul role="tablist" class="bb-tablist" data-type="filter" >
|
||||
<li id="filter2-1" role="presentation"><a href="#filter2-1" role="tab">Action 01</a></li>
|
||||
<li id="filter2-2" role="presentation"><a href="#filter2-2" role="tab">Action 02</a></li>
|
||||
<li id="filter2-3" role="presentation"><a href="#filter2-3" role="tab">Action 02</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 88 B |
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Tabs</title>
|
||||
<meta name="description" content="Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views. ">
|
||||
|
||||
<link rel="stylesheet" href="../tabs.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
|
||||
<!--
|
||||
This <style> and <link> is only used for the example code, is no needed for the real case use
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-family: sans-serif;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -1px 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem 0.4rem 0.4rem 3rem;
|
||||
border: solid 1px #e8e8e8;
|
||||
}
|
||||
|
||||
.bb-tabpanel {
|
||||
padding: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body role="application">
|
||||
|
||||
<section role="region">
|
||||
<!-- if your tabs are at the top, remove class="bottom" -->
|
||||
<ul role="tablist" class="bb-tablist">
|
||||
<li id="panel1" role="presentation">
|
||||
<a id="tab1" href="#panel1" data-icon="recent-calls" aria-label="recent calls" role="tab" aria-controls="tabpanel1">comms</a>
|
||||
<div id="tabpanel1" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab1">Tab Panel 1</div>
|
||||
</li>
|
||||
<li id="panel2" role="presentation">
|
||||
<a id="tab2" href="#panel2" data-icon="user" aria-label="contacts" role="tab" aria-controls="tabpanel2">contacts</a>
|
||||
<div id="tabpanel2" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab2">Tab Panel 2</div>
|
||||
</li>
|
||||
<li id="panel3" role="presentation" aria-disabled="true">
|
||||
<a id="tab3" href="#panel3" data-icon="dialpad" aria-label="dialer" role="tab" aria-controls="tabpanel3">dialer</a>
|
||||
<div id="tabpanel3" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab3">Tab Panel 3</div>
|
||||
</li>
|
||||
<li id="panel4" role="presentation">
|
||||
<a id="tab4" href="#panel4" role="tab" aria-controls="tabpanel4">Tab name</a>
|
||||
<div id="tabpanel4" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab4">Tab Panel 4</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Tabs</title>
|
||||
<meta name="description" content="Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views. ">
|
||||
|
||||
<link rel="stylesheet" href="../tabs.css">
|
||||
|
||||
<!--
|
||||
This <style> and <link> is only used for the example code, is no needed for the real case use
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-family: sans-serif;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -1px 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem 0.4rem 0.4rem 3rem;
|
||||
border: solid 1px #e8e8e8;
|
||||
}
|
||||
|
||||
.bb-tabpanel {
|
||||
padding: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
#panel1 a {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDMwIDkwIj48cGF0aCBmaWxsPSIjMDBDQUYyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IiBkPSJNMjkuODYzIDY4LjU2OWgtNS41Nzd2Mi43MmMtLjMyLjA2Ni0uNjY1LS4wMDgtLjkxMi0uMjU5bC0zLjA0NC0zLjA5NGMtLjM5NC0uNC0uMzk0LTEuMDQ4IDAtMS40NDhsMy4wNDQtMy4wOTNjLjI0OS0uMjUzLjU5NC0uMzI2LjkxMi0uMjYxdjIuNzM0aDUuNTc4Yy4xODEuODkuMTgxIDEuODEyLS4wMDEgMi43MDF6bS0xMS44MDktNS43MzJjLS4yNDguMjUzLS41OTEuMzI2LS45MTIuMjYxdi0yLjcyaC01LjU3N2MtLjE4MS0uODktLjE4MS0xLjgxLS4wMDEtMi42OTloNS41Nzd2LTIuNzM1Yy4zMjEtLjA2Ni42NjYuMDA4LjkxMi4yNjFsMy4wNDQgMy4wOTRjLjM5NS40LjM5NSAxLjA0OCAwIDEuNDQ2bC0zLjA0MyAzLjA5MnptLTEuNTIxIDEwLjY4bC4wMjIuMDIyYy42MTMtLjM0MyAxLjIxNy0uNzU2IDEuODE3LTEuMTk5bDUuNzI5IDUuMTU0Yy0xLjIwOCAxLjA2MS0yLjUyIDEuOTMtMy44OTkgMi41ODYtMy42NjUtLjY4OC04LjM2My0zLjQ1OS0xMi41NzktNy43NDUtNC4yMTctNC4yODItNi45NDItOS4wNTMtNy42MjMtMTIuNzc1LjY0NS0xLjQwNCAxLjUwMy0yLjczNyAyLjU0OC0zLjk2OGw1LjA3NiA1LjgyNmMtLjQzNS42MDktLjg0MSAxLjIyMy0xLjE3OSAxLjg0NWwuMDIyLjAyM2MtLjU5NCAxLjMyNi43ODEgNC4yMSAzLjM1MiA2LjgyMyAyLjU3MiAyLjYxMyA1LjQxMSA0LjAxMSA2LjcxNCAzLjQwOHoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjkuODYzIDIzLjU2OGgtNS41Nzd2Mi43MmMtLjMyLjA2Ni0uNjY1LS4wMDgtLjkxMi0uMjU5bC0zLjA0NC0zLjA5NGMtLjM5NC0uNC0uMzk0LTEuMDQ4IDAtMS40NDhsMy4wNDQtMy4wOTNjLjI0OS0uMjUzLjU5NC0uMzI4LjkxMi0uMjYxdjIuNzM0aDUuNTc4Yy4xODEuODkxLjE4MSAxLjgxMi0uMDAxIDIuNzAxem0tMTEuODA5LTUuNzMxYy0uMjQ4LjI1My0uNTkxLjMyOC0uOTEyLjI2MXYtMi43MTloLTUuNTc3Yy0uMTgxLS44OS0uMTgxLTEuODEtLjAwMS0yLjcwMWg1LjU3N3YtMi43MzZjLjMyMS0uMDY2LjY2Ni4wMDguOTEyLjI2MWwzLjA0NCAzLjA5NGMuMzk1LjQuMzk1IDEuMDQ4IDAgMS40NDZsLTMuMDQzIDMuMDk0em0tMS41MjEgMTAuNjhsLjAyMi4wMjJjLjYxMy0uMzQzIDEuMjE3LS43NTYgMS44MTctMS4xOTdsNS43MjkgNS4xNTRjLTEuMjA4IDEuMDYxLTIuNTIgMS45MjktMy44OTkgMi41ODYtMy42NjUtLjY4OC04LjM2My0zLjQ1OC0xMi41NzktNy43NDUtNC4yMTctNC4yODQtNi45NDItOS4wNTMtNy42MjMtMTIuNzc3LjY0NS0xLjQwNCAxLjUwMy0yLjczNyAyLjU0OC0zLjk2OGw1LjA3NiA1LjgyNmMtLjQzNS42MDktLjg0MSAxLjIyMy0xLjE3OSAxLjg0NGwuMDIyLjAyM2MtLjU5NCAxLjMyNi43ODEgNC4yMSAzLjM1MiA2LjgyM3M1LjQxMSA0LjAxMSA2LjcxNCAzLjQwOXoiLz48L3N2Zz4=);
|
||||
}
|
||||
|
||||
#panel2 a {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDMwIDkwIj48cGF0aCBmaWxsPSIjMDBDQUYyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IiBkPSJNMjQuMjU5IDcyLjk1OGMwIDIuNTg0LS41MSA0Ljk5MS0xLjM3OCA3LjA0MmgtMTUuNzYyYy0uODY4LTIuMDUyLTEuMzc4LTQuNDU3LTEuMzc4LTcuMDQyaC4wMDV2LS4wMDFjMC0yLjU3NyAyLjEzMS00LjggNS4yMTctNS44NTZsNC4wMzggNC4wNzIgNC4wMzctNC4wNzJjMy4wODUgMS4wNTggNS4yMTcgMy4yNzkgNS4yMTcgNS44NTZ2LjAwMmwuMDA0LS4wMDF6bS05LjI1OS03LjMwNWMtMi45MTcgMC01LjI4NC0yLjM4NC01LjI4NC01LjMyNnMyLjM2Ny01LjMyNyA1LjI4NC01LjMyN2MyLjkxNiAwIDUuMjgzIDIuMzg1IDUuMjgzIDUuMzI3cy0yLjM2NyA1LjMyNi01LjI4MyA1LjMyNnoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjQuMjU5IDI3Ljk1OGMwIDIuNTg0LS41MSA0Ljk5MS0xLjM3OCA3LjA0MmgtMTUuNzYyYy0uODY4LTIuMDUyLTEuMzc4LTQuNDU4LTEuMzc4LTcuMDQyaC4wMDV2LS4wMDFjMC0yLjU3NyAyLjEzMS00LjggNS4yMTctNS44NTZsNC4wMzggNC4wNzIgNC4wMzctNC4wNzJjMy4wODUgMS4wNTggNS4yMTcgMy4yNzkgNS4yMTcgNS44NTZ2LjAwMmwuMDA0LS4wMDF6bS05LjI1OS03LjMwNWMtMi45MTcgMC01LjI4NC0yLjM4NC01LjI4NC01LjMyNiAwLTIuOTQzIDIuMzY3LTUuMzI3IDUuMjg0LTUuMzI3IDIuOTE2IDAgNS4yODMgMi4zODUgNS4yODMgNS4zMjcgMCAyLjk0MS0yLjM2NyA1LjMyNi01LjI4MyA1LjMyNnoiLz48L3N2Zz4=);
|
||||
}
|
||||
|
||||
#panel3 a {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDMwIDkwIj48cGF0aCBmaWxsPSIjMDBDQUYyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IiBkPSJNOS4zNTkgNjEuMDE1bC0uMDIzLjAxOWMtLjEwMy40MjMtLjQ5Ljc0Ni0uOTc3Ljc0NmwtLjAwMS4wMDFoLTIuNDg3bC0uMDAyLS4wMDFjLS40ODYgMC0uODczLS4zMjMtLjk3Ni0uNzQ2bC0uMDIzLS4wMTljLS4xODgtLjkxNS0uMzE4LTEuOTQ3LS4zNy0zLjA2aDUuMjI4Yy0uMDUyIDEuMTEzLS4xOCAyLjE0NS0uMzY5IDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ2LS45NzcuNzQ2bC0uMDAxLjAwMWgtMi40ODhsLS4wMDEtLjAwMWMtLjQ4NiAwLS44NzMtLjMyMy0uOTc2LS43NDZsLS4wMjMtLjAxOWMtLjE5LS45MTUtLjMxOC0xLjk0Ny0uMzY5LTMuMDZoNS4yMjhjLS4wNTMgMS4xMTMtLjE4MyAyLjE0NS0uMzcxIDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ2LS45NzcuNzQ2bC0uMDAxLjAwMWgtMi40ODh2LS4wMDFjLS40ODcgMC0uODc0LS4zMjMtLjk3OS0uNzQ2bC0uMDItLjAxOWMtLjE5LS45MTUtLjMxOC0xLjk0Ny0uMzY5LTMuMDZoNS4yMjVjLS4wNTIgMS4xMTMtLjE4MSAyLjE0NS0uMzY5IDMuMDZ6bS0xNS43NzIgNy42MzJsLS4wMjMuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ3LS45NzcuNzQ3aC0yLjQ5Yy0uNDg2IDAtLjg3My0uMzI1LS45NzYtLjc0N2wtLjAyMy0uMDE5Yy0uMTktLjkxNC0uMzE4LTEuOTQ3LS4zNy0zLjA2aDUuMjI4Yy0uMDUyIDEuMTEzLS4xOCAyLjE0Ny0uMzY5IDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ3LS45NzcuNzQ3aC0yLjQ4OWMtLjQ4NiAwLS44NzMtLjMyNS0uOTc2LS43NDdsLS4wMjMtLjAxOWMtLjE5LS45MTQtLjMxOC0xLjk0OS0uMzY5LTMuMDZoNS4yMjhjLS4wNTQgMS4xMTMtLjE4NCAyLjE0Ny0uMzcyIDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ3LS45NzcuNzQ3aC0yLjQ4OWMtLjQ4NyAwLS44NzQtLjMyNS0uOTc5LS43NDdsLS4wMi0uMDE5Yy0uMTktLjkxNC0uMzE4LTEuOTQ5LS4zNjktMy4wNmg1LjIyNWMtLjA1MiAxLjExMy0uMTgxIDIuMTQ3LS4zNjkgMy4wNnptLTE1Ljc3MiA3LjYzNGwtLjAyMy4wMTdjLS4xMDQuNDI1LS40OS43NDctLjk3OS43NDdoLTIuNDg5Yy0uNDg2IDAtLjg3My0uMzIzLS45NzYtLjc0N2wtLjAyMy0uMDE4Yy0uMTg4LS45MTUtLjMxOC0xLjk1LS4zNjktMy4wNmg1LjIyOGMtLjA1MiAxLjExMS0uMTggMi4xNDYtLjM2OSAzLjA2MXptNy44ODYgMGwtLjAyMi4wMTdjLS4xMDQuNDI1LS40OTEuNzQ3LS45NzkuNzQ3aC0yLjQ4OWMtLjQ4NiAwLS44NzMtLjMyMy0uOTc2LS43NDdsLS4wMjMtLjAxOGMtLjE5LS45MTUtLjMxOC0xLjk1LS4zNjktMy4wNmg1LjIyOGMtLjA1MiAxLjExMS0uMTgyIDIuMTQ2LS4zNyAzLjA2MXptNy44ODYgMGwtLjAyMi4wMTdjLS4xMDQuNDI1LS40OS43NDctLjk3OS43NDdoLTIuNDg5Yy0uNDg3IDAtLjg3NC0uMzIzLS45NzktLjc0N2wtLjAyLS4wMThjLS4xOS0uOTE1LS4zMTgtMS45NS0uMzY5LTMuMDZoNS4yMjdjLS4wNTIgMS4xMTEtLjE4MSAyLjE0Ni0uMzY5IDMuMDYxeiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik05LjM1OSAxNi4wMTVsLS4wMjMuMDE5Yy0uMTAzLjQyMy0uNDkuNzQ2LS45NzcuNzQ2bC0uMDAxLjAwMWgtMi40ODdsLS4wMDItLjAwMWMtLjQ4NiAwLS44NzMtLjMyMy0uOTc2LS43NDZsLS4wMjMtLjAxOWMtLjE4OC0uOTE0LS4zMTgtMS45NDctLjM3LTMuMDZoNS4yMjhjLS4wNTIgMS4xMTMtLjE4IDIuMTQ1LS4zNjkgMy4wNnptNy44ODYgMGwtLjAyMi4wMTljLS4xMDMuNDIzLS40OS43NDYtLjk3Ny43NDZsLS4wMDEuMDAxaC0yLjQ4OGwtLjAwMS0uMDAxYy0uNDg2IDAtLjg3My0uMzIzLS45NzYtLjc0NmwtLjAyMy0uMDE5Yy0uMTktLjkxNC0uMzE4LTEuOTQ3LS4zNjktMy4wNmg1LjIyOGMtLjA1MyAxLjExMy0uMTgzIDIuMTQ1LS4zNzEgMy4wNnptNy44ODYgMGwtLjAyMi4wMTljLS4xMDMuNDIzLS40OS43NDYtLjk3Ny43NDZsLS4wMDEuMDAxaC0yLjQ4OHYtLjAwMWMtLjQ4NyAwLS44NzQtLjMyMy0uOTc5LS43NDZsLS4wMi0uMDE5Yy0uMTktLjkxNC0uMzE4LTEuOTQ3LS4zNjktMy4wNmg1LjIyNWMtLjA1MiAxLjExMy0uMTgxIDIuMTQ1LS4zNjkgMy4wNnptLTE1Ljc3MiA3LjYzMmwtLjAyMy4wMTljLS4xMDMuNDIzLS40OS43NDctLjk3Ny43NDdoLTIuNDljLS40ODYgMC0uODczLS4zMjUtLjk3Ni0uNzQ3bC0uMDIzLS4wMTljLS4xOS0uOTE0LS4zMTgtMS45NDctLjM3LTMuMDZoNS4yMjhjLS4wNTIgMS4xMTMtLjE4IDIuMTQ3LS4zNjkgMy4wNnptNy44ODYgMGwtLjAyMi4wMTljLS4xMDMuNDIzLS40OS43NDctLjk3Ny43NDdoLTIuNDg5Yy0uNDg2IDAtLjg3My0uMzI1LS45NzYtLjc0N2wtLjAyMy0uMDE5Yy0uMTktLjkxNS0uMzE4LTEuOTQ5LS4zNjktMy4wNjFoNS4yMjhjLS4wNTQgMS4xMTQtLjE4NCAyLjE0OC0uMzcyIDMuMDYxem03Ljg4NiAwbC0uMDIyLjAxOWMtLjEwMy40MjMtLjQ5Ljc0Ny0uOTc3Ljc0N2gtMi40ODljLS40ODcgMC0uODc0LS4zMjUtLjk3OS0uNzQ3bC0uMDItLjAxOWMtLjE5LS45MTUtLjMxOC0xLjk0OS0uMzY5LTMuMDYxaDUuMjI1Yy0uMDUyIDEuMTE0LS4xODEgMi4xNDgtLjM2OSAzLjA2MXptLTE1Ljc3MiA3LjYzNGwtLjAyMy4wMTdjLS4xMDQuNDI1LS40OS43NDctLjk3OS43NDdoLTIuNDg5Yy0uNDg2IDAtLjg3My0uMzIzLS45NzYtLjc0N2wtLjAyMy0uMDE3Yy0uMTg4LS45MTUtLjMxOC0xLjk1LS4zNjktMy4wNmg1LjIyOGMtLjA1MiAxLjExLS4xOCAyLjE0NS0uMzY5IDMuMDZ6bTcuODg2IDBsLS4wMjIuMDE3Yy0uMTA0LjQyNS0uNDkxLjc0Ny0uOTc5Ljc0N2gtMi40ODljLS40ODYgMC0uODczLS4zMjMtLjk3Ni0uNzQ3bC0uMDIzLS4wMTdjLS4xOS0uOTE1LS4zMTgtMS45NS0uMzY5LTMuMDZoNS4yMjhjLS4wNTIgMS4xMS0uMTgyIDIuMTQ1LS4zNyAzLjA2em03Ljg4NiAwbC0uMDIyLjAxN2MtLjEwNC40MjUtLjQ5Ljc0Ny0uOTc5Ljc0N2gtMi40ODljLS40ODcgMC0uODc0LS4zMjMtLjk3OS0uNzQ3bC0uMDItLjAxN2MtLjE5LS45MTUtLjMxOC0xLjk1LS4zNjktMy4wNmg1LjIyN2MtLjA1MiAxLjExLS4xODEgMi4xNDUtLjM2OSAzLjA2eiIvPjwvc3ZnPg==);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body role="application">
|
||||
|
||||
<section role="region">
|
||||
<!-- if your tabs are at the top, remove class="bottom" -->
|
||||
<ul role="tablist" class="bb-tablist skin-dark">
|
||||
<li id="panel1" role="presentation">
|
||||
<a id="tab1" href="#panel1" class="icon" role="tab" aria-controls="tabpanel1">comms</a>
|
||||
<div id="tabpanel1" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab1">Tab Panel 1</div>
|
||||
</li>
|
||||
<li id="panel2" role="presentation">
|
||||
<a id="tab2" href="#panel2" class="icon" role="tab" aria-controls="tabpanel2">contacts</a>
|
||||
<div id="tabpanel2" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab2">Tab Panel 2</div>
|
||||
</li>
|
||||
<li id="panel3" role="presentation" aria-disabled="true">
|
||||
<a id="tab3" class="icon" role="tab" aria-controls="tabpanel3">dialer</a>
|
||||
<div id="tabpanel3" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab3">Tab Panel 3</div>
|
||||
</li>
|
||||
<li id="panel4" role="presentation">
|
||||
<a id="tab4" href="#panel4" role="tab" aria-controls="tabpanel4">Tab name</a>
|
||||
<div id="tabpanel4" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab4">Tab Panel 4</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||