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
428
assets/webapps/download.gaiamobile.org/shared/style/buttons.css
Normal file
428
assets/webapps/download.gaiamobile.org/shared/style/buttons.css
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
/* ----------------------------------
|
||||
* Buttons
|
||||
* ---------------------------------- */
|
||||
|
||||
.button::-moz-focus-inner,
|
||||
.bb-button::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button,
|
||||
.bb-button,
|
||||
.button {
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0 1.2rem;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: #d8d8d8;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 4rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Recommend */
|
||||
button.recommend,
|
||||
.bb-button.recommend {
|
||||
background-color: #00caf2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
button.danger,
|
||||
.danger.bb-button {
|
||||
background-color: #e51e1e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pressed */
|
||||
button:active,
|
||||
.bb-button:active,
|
||||
.button:active {
|
||||
background-color: #b2f2ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
button[data-icon],
|
||||
.bb-button[data-icon],
|
||||
.button[data-icon] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button[data-icon]:before,
|
||||
.bb-button[data-icon]:before,
|
||||
.button[data-icon]:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -1.5rem;
|
||||
offset-inline-end: 1.5rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
button[data-icon]:active:before,
|
||||
.bb-button[data-icon]:active:before,
|
||||
.button[data-icon]:active:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pressed with dark skin */
|
||||
.skin-dark button:active,
|
||||
.skin-dark .bb-button:active,
|
||||
.skin-dark .button:active {
|
||||
background-color: #00aacc;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
button[disabled],
|
||||
.bb-button[aria-disabled="true"],
|
||||
.button[aria-disabled="true"] {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
color: #c7c7c7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button[disabled].recommend,
|
||||
.bb-button[aria-disabled="true"].recommend,
|
||||
.button[aria-disabled="true"].recommend {
|
||||
background-color: #97cbd5;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
button[disabled].danger,
|
||||
.bb-button[aria-disabled="true"].danger,
|
||||
.button[aria-disabled="true"].danger {
|
||||
background-color: #eb7474;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
/* Disabled with dark background */
|
||||
.skin-dark button[disabled],
|
||||
.skin-dark .button[aria-disabled="true"],
|
||||
.skin-dark .bb-button[aria-disabled="true"] {
|
||||
background-color: #565656;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
.skin-dark button[disabled].recommend,
|
||||
.skin-dark .button[aria-disabled="true"].recommend,
|
||||
.skin-dark .bb-button[aria-disabled="true"].recommend {
|
||||
background-color: #006579;
|
||||
}
|
||||
|
||||
.skin-dark button[disabled].danger,
|
||||
.skin-dark .button[aria-disabled="true"].danger,
|
||||
.skin-dark .bb-button[aria-disabled="true"].danger {
|
||||
background-color: #730f0f;
|
||||
}
|
||||
|
||||
button[disabled]::-moz-selection,
|
||||
.button[aria-disabled="true"]::-moz-selection,
|
||||
.bb-button[aria-disabled="true"]::-moz-selection {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
* Buttons inside lists
|
||||
* ---------------------------------- */
|
||||
|
||||
li button,
|
||||
li .bb-button,
|
||||
li .button {
|
||||
position: relative;
|
||||
border: 0.1rem solid #c7c7c7;
|
||||
background: rgba(0,0,0,0.05);
|
||||
margin: 0 0 1rem;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
height: auto;
|
||||
min-height: 4rem;
|
||||
text-overflow: initial;
|
||||
white-space: normal;
|
||||
line-height: 2rem;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
html[dir="ltr"] li button,
|
||||
html[dir="ltr"] li .bb-button,
|
||||
html[dir="ltr"] li .button {
|
||||
text-align: left;
|
||||
}
|
||||
html[dir="rtl"] li button,
|
||||
html[dir="rtl"] li .bb-button,
|
||||
html[dir="rtl"] li .button {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Press */
|
||||
li .bb-button:active:after,
|
||||
li .button:active:after,
|
||||
li button:active:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
li button:disabled,
|
||||
li .bb-button[aria-disabled="true"],
|
||||
li .button[aria-disabled="true"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
li button.icon,
|
||||
li .bb-button.icon,
|
||||
li .button.icon {
|
||||
padding-inline-end: 4rem;
|
||||
}
|
||||
|
||||
li button.icon:before,
|
||||
li .bb-button.icon:before,
|
||||
li .button.icon:before {
|
||||
content: "";
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
offset-inline-end: 0.5rem;
|
||||
margin-top: -1.5rem;
|
||||
background: transparent no-repeat center center / 100% auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
li button[data-icon]:before,
|
||||
li .bb-button[data-icon]:before,
|
||||
li .button[data-icon]:before {
|
||||
offset-inline-end: 1rem;
|
||||
}
|
||||
|
||||
li button.icon-view:active,
|
||||
li .bb-button.icon-view:active,
|
||||
li .button.icon-view:active {
|
||||
background-color: #b2f2ff;
|
||||
}
|
||||
|
||||
li button[data-icon="expand"]:before,
|
||||
li .bb-button[data-icon="expand"]:before,
|
||||
li .button[data-icon="expand"]:before {
|
||||
color: #00aac5;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
li button[data-icon="expand"][disabled]:before,
|
||||
li .bb-button[data-icon="expand"][aria-disabled="true"]:before,
|
||||
li .button[data-icon="expand"][aria-disabled="true"]:before {
|
||||
color: #A9A9A9;
|
||||
}
|
||||
|
||||
li button[data-icon="forward"]:before,
|
||||
li .bb-button[data-icon="forward"]:before,
|
||||
li .button[data-icon="forward"]:before {
|
||||
color: #686f72;
|
||||
}
|
||||
|
||||
/* Getting more space for text, as icon is shorter */
|
||||
li button.icon-dialog,
|
||||
li .bb-button.icon-dialog,
|
||||
li .button.icon-dialog {
|
||||
padding-inline-end: 3rem;
|
||||
}
|
||||
|
||||
li button.icon-dialog:before,
|
||||
li .bb-button.icon-dialog:before,
|
||||
li .button.icon-dialog:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: auto;
|
||||
offset-inline-end: 0.8rem;
|
||||
bottom: 0.5rem;
|
||||
border-top: 0.7rem solid transparent;
|
||||
border-bottom: 0.7rem solid transparent;
|
||||
border-inline-start: 0.7rem solid #00aac5;
|
||||
z-index: 1;
|
||||
}
|
||||
html[dir="ltr"] li button.icon-dialog:before,
|
||||
html[dir="ltr"] li .bb-button.icon-dialog:before,
|
||||
html[dir="ltr"] li .button.icon-dialog:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
html[dir="rtl"] li button.icon-dialog:before,
|
||||
html[dir="rtl"] li .bb-button.icon-dialog:before,
|
||||
html[dir="rtl"] li .button.icon-dialog:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
li button.icon-dialog:disabled:before,
|
||||
li .bb-button[aria-disabled="true"].icon-dialog:before,
|
||||
li .button[aria-disabled="true"].icon-dialog:before {
|
||||
border-inline-start: 0.7rem solid #a9a9a9;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
* Theme: Dark
|
||||
* ---------------------------------- */
|
||||
|
||||
.skin-dark li button,
|
||||
.skin-dark li .bb-button,
|
||||
.skin-dark li .button {
|
||||
background-color: #454545;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.skin-dark li button:active,
|
||||
.skin-dark li .button:active,
|
||||
.skin-dark li .bb-button:active {
|
||||
background-color: #00aacc;
|
||||
}
|
||||
|
||||
.skin-dark li button.icon-view:active,
|
||||
.skin-dark li .button.icon-view:active,
|
||||
.skin-dark li .bb-button.icon-view:active {
|
||||
background-color: #00aacc;
|
||||
}
|
||||
|
||||
.skin-dark li button.icon-dialog:active:before,
|
||||
.skin-dark li .bb-button.icon-dialog:active:before,
|
||||
.skin-dark li .button.icon-dialog:active:before {
|
||||
border-inline-start: 0.7rem solid #b2f2ff;
|
||||
}
|
||||
|
||||
.skin-dark li button:disabled,
|
||||
.skin-dark li .bb-button[aria-disabled="true"],
|
||||
.skin-dark li .button[aria-disabled="true"] {
|
||||
background-color: #454545;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Inputs inside of .button */
|
||||
.button input,
|
||||
body[role="application"] .bb-button input,
|
||||
body[role="application"] .button input {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* select */
|
||||
select {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
font-size: 1.6rem;
|
||||
color: #333;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
padding-inline-start: 1.1rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
height: 4rem;
|
||||
border: 0.1rem solid #c7c7c7;
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.skin-dark select {
|
||||
background-color: rgba(87, 87, 87, 0.8);
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* remove dotted outline */
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #333;
|
||||
}
|
||||
|
||||
.skin-dark select:-moz-focusring {
|
||||
text-shadow: 0 0 0 #fff;
|
||||
}
|
||||
|
||||
/* Hides dropdown arrow until bug #649849 is fixed */
|
||||
.bb-button.icon select,
|
||||
.button.icon select,
|
||||
.bb-button[data-icon] select,
|
||||
.button[data-icon] select {
|
||||
position: absolute;
|
||||
top: -0.6rem;
|
||||
offset-inline-start: 0;
|
||||
width: calc(100% + 3rem);
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-inline-end: 5rem;
|
||||
text-indent: 0;
|
||||
font-weight: 400;
|
||||
font-size: 1.7rem;
|
||||
color: rgba(0,0,0,0);
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
/**
|
||||
* The select element uses the text color to determine the color of the outline.
|
||||
* We put a text shadow with needed offset and no blur, so that replaces the text.
|
||||
*/
|
||||
html[dir="ltr"] .bb-button.icon select,
|
||||
html[dir="ltr"] .button.icon select,
|
||||
html[dir="ltr"] .bb-button[data-icon] select,
|
||||
html[dir="ltr"] .button[data-icon] select,
|
||||
html[dir="ltr"] .bb-button.icon-dialog select,
|
||||
html[dir="ltr"] .button.icon-dialog select {
|
||||
text-shadow: 1rem 0.5rem 0 #333;
|
||||
}
|
||||
html[dir="rtl"] .bb-button.icon select,
|
||||
html[dir="rtl"] .button.icon select,
|
||||
html[dir="rtl"] .bb-button[data-icon] select,
|
||||
html[dir="rtl"] .button[data-icon] select,
|
||||
html[dir="rtl"] .bb-button.icon-dialog select,
|
||||
html[dir="rtl"] .button.icon-dialog select {
|
||||
text-shadow: -1rem 0.5rem 0 #333;
|
||||
}
|
||||
|
||||
.bb-button.icon select option,
|
||||
.button.icon select option,
|
||||
.bb-button[data-icon] select option,
|
||||
.button[data-icon] select option {
|
||||
color: #000;
|
||||
border: 0;
|
||||
padding: 0.6rem 1.3rem;
|
||||
text-shadow: 0 0 0 rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.bb-button.icon-dialog,
|
||||
.button.icon-dialog {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .skin-dark .bb-button.icon select,
|
||||
html[dir="ltr"] .skin-dark .button.icon select,
|
||||
html[dir="ltr"] .skin-dark .bb-button[data-icon] select,
|
||||
html[dir="ltr"] .skin-dark .button[data-icon] select,
|
||||
html[dir="ltr"] .skin-dark .bb-button.icon-dialog select,
|
||||
html[dir="ltr"] .skin-dark .button.icon-dialog select {
|
||||
text-shadow: 1rem 0.5rem 0 #fff;
|
||||
}
|
||||
html[dir="rtl"] .skin-dark .bb-button.icon select,
|
||||
html[dir="rtl"] .skin-dark .button.icon select,
|
||||
html[dir="rtl"] .skin-dark .bb-button[data-icon] select,
|
||||
html[dir="rtl"] .skin-dark .button[data-icon] select,
|
||||
html[dir="rtl"] .skin-dark .bb-button.icon-dialog select,
|
||||
html[dir="rtl"] .skin-dark .button.icon-dialog select {
|
||||
text-shadow: -1rem 0.5rem 0 #fff;
|
||||
}
|
||||
|
|
@ -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>
|
||||
265
assets/webapps/download.gaiamobile.org/shared/style/confirm.css
Normal file
265
assets/webapps/download.gaiamobile.org/shared/style/confirm.css
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
/* ----------------------------------
|
||||
* Confirm
|
||||
* ---------------------------------- */
|
||||
|
||||
/* Main dialog setup */
|
||||
form[role="dialog"][data-type="confirm"] {
|
||||
background: #2d2d2d;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: 7rem;
|
||||
font-size: 0;
|
||||
/* Using font-size: 0; we avoid the unwanted visual space (about 3px)
|
||||
created by white-spaces and break lines in the code betewen inline-block elements */
|
||||
color: #fff;
|
||||
}
|
||||
html[dir="ltr"] form[role="dialog"][data-type="confirm"] { text-align: left; }
|
||||
html[dir="rtl"] form[role="dialog"][data-type="confirm"] { text-align: right; }
|
||||
|
||||
form[role="dialog"][data-type="confirm"]:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
margin-inline-start: -0.1rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] > section {
|
||||
font-weight: 300;
|
||||
font-size: 2.2rem;
|
||||
color: #FAFAFA;
|
||||
padding: 0 1.5rem;
|
||||
box-sizing: padding-box;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
overflow-y: scroll;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] h1 {
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.5em;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
padding: 1rem 1.5rem 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Menu & buttons setup */
|
||||
form[role="dialog"][data-type="confirm"] menu {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 1.5rem;
|
||||
background: #4d4d4d;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] menu button::-moz-focus-inner {
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-top: -0.2rem; /* To fix line-height bug (697451) */
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] menu button {
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0 0.2rem;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: #d8d8d8;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 4rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Recommend */
|
||||
form[role="dialog"][data-type="confirm"] menu button.recommend {
|
||||
background-color: #00caf2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
form[role="dialog"][data-type="confirm"] menu button.danger {
|
||||
background-color: #e51e1e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pressed */
|
||||
form[role="dialog"][data-type="confirm"] menu button:active {
|
||||
background: #00aacc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
form[role="dialog"][data-type="confirm"] > menu > button[disabled] {
|
||||
background-color: #565656;
|
||||
color: rgba(255,255,255,0.4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] > menu > button[disabled].recommend {
|
||||
background-color: #006579;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] > menu > button[disabled].danger {
|
||||
background-color: #730f0f;
|
||||
}
|
||||
|
||||
button[disabled]::-moz-selection {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] menu button {
|
||||
margin: 0;
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] menu button:last-child {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
** Specific component code
|
||||
**
|
||||
** 1. Text in confirm dialog should not be selectable.
|
||||
*/
|
||||
form[role="dialog"][data-type="confirm"] p:nth-child(2) {
|
||||
margin: 1rem 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p {
|
||||
word-wrap: break-word;
|
||||
margin: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 0.1rem solid #686868;
|
||||
line-height: 3rem;
|
||||
-moz-user-select: none; /* 1 */
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p > span {
|
||||
font-size: 1.5rem;
|
||||
display: block;
|
||||
line-height: 1.7rem;
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p img {
|
||||
margin-inline-end: 2rem;
|
||||
}
|
||||
html[dir="ltr"] form[role="dialog"][data-type="confirm"] p img { float: left; }
|
||||
html[dir="rtl"] form[role="dialog"][data-type="confirm"] p img { float: right; }
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p strong {
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p small {
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: #cbcbcb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] dl {
|
||||
border-top: 0.1rem solid #686868;
|
||||
margin: 1rem 0 0;
|
||||
overflow: hidden;
|
||||
padding-top: 1rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] dl > dt {
|
||||
clear: both;
|
||||
width: 7rem;
|
||||
padding-inline-start: 1.5rem;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
html[dir="ltr"] form[role="dialog"][data-type="confirm"] dl > dt { float: left; }
|
||||
html[dir="rtl"] form[role="dialog"][data-type="confirm"] dl > dt { float: right; text-align: right; }
|
||||
|
||||
form[role="dialog"][data-type="confirm"] dl > dd {
|
||||
padding-inline-end: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] dl > dd > div {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] figure {
|
||||
margin: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] figure img {
|
||||
padding-inline-end: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] figure figcaption {
|
||||
font-size: 2.1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] ul {
|
||||
margin: 0;
|
||||
padding: 2rem 1.5rem;
|
||||
border-top: 0.1rem solid #686868;
|
||||
list-style: none;
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] ul li {
|
||||
word-wrap: break-word;
|
||||
line-height: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] ul li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] ul li ul {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Confirm</title>
|
||||
<meta name="description" content="Prompts user to take action">
|
||||
|
||||
<link rel="stylesheet" href="../confirm.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;
|
||||
}
|
||||
#dir {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
direction: ltr;
|
||||
background-color: white;
|
||||
}
|
||||
#dir input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var input = document.querySelector('#dir input');
|
||||
input.checked = false;
|
||||
input.onchange = function() {
|
||||
document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<label id="dir">
|
||||
<input type="checkbox"> RTL mode
|
||||
</label>
|
||||
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<h1>Confirmation</h1>
|
||||
<p>Are you sure you want to delete this contact?</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button>Cancel</button>
|
||||
<button class="danger">Delete</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Confirm</title>
|
||||
<meta name="description" content="Prompts user to take action">
|
||||
|
||||
<link rel="stylesheet" href="../confirm.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;
|
||||
}
|
||||
#dir {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
direction: ltr;
|
||||
background-color: white;
|
||||
}
|
||||
#dir input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var input = document.querySelector('#dir input');
|
||||
input.checked = false;
|
||||
input.onchange = function() {
|
||||
document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<label id="dir">
|
||||
<input type="checkbox"> RTL mode
|
||||
</label>
|
||||
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<h1>Confirmation</h1>
|
||||
<p dir="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button>Cancel</button>
|
||||
<button class="danger">Delete</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Confirm, w/o title</title>
|
||||
<meta name="description" content="Prompts user to take action">
|
||||
|
||||
<link rel="stylesheet" href="../confirm.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;
|
||||
}
|
||||
#dir {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
direction: ltr;
|
||||
background-color: white;
|
||||
}
|
||||
#dir input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var input = document.querySelector('#dir input');
|
||||
input.checked = false;
|
||||
input.onchange = function() {
|
||||
document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<label id="dir">
|
||||
<input type="checkbox"> RTL mode
|
||||
</label>
|
||||
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<p dir="auto">Are you sure you want to delete this contact?</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button>Cancel</button>
|
||||
<button class="danger">Delete</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
242
assets/webapps/download.gaiamobile.org/shared/style/lists.css
Normal file
242
assets/webapps/download.gaiamobile.org/shared/style/lists.css
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
/* ----------------------------------
|
||||
* Lists
|
||||
* ---------------------------------- */
|
||||
[data-type="list"] {
|
||||
font-weight: 400;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
[data-type="list"] ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-type="list"] strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Title divisors */
|
||||
[data-type="list"] header {
|
||||
padding: 0 1.5rem;
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
height: 3rem;
|
||||
line-height: 4rem;
|
||||
font-weight: normal;
|
||||
color: #ff4e00;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
html[dir="ltr"] [data-type="list"] header { text-align: left; }
|
||||
html[dir="rtl"] [data-type="list"] header { text-align: right; }
|
||||
|
||||
/* List items */
|
||||
[data-type="list"] li {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 0.1rem #e7e7e7;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-type="list"] li:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Pressed State */
|
||||
li a:active {
|
||||
background-color: transparent; /* remove default color for active state */
|
||||
}
|
||||
|
||||
[data-type="list"] li > a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
display: block;
|
||||
height: 6rem;
|
||||
position: relative;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[data-type="list"].active li:after,
|
||||
[data-type="list"] li > a:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: -1.5rem;
|
||||
top: 0;
|
||||
right: -1.5rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
[data-type="list"].active li:active:after,
|
||||
[data-type="list"] li > a:active:after {
|
||||
background-color: rgba(0,213,255,0.3);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
[data-type="list"] li[aria-disabled="true"] {
|
||||
pointer-events: none;
|
||||
opacity: 0.2;
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
/* Graphic content */
|
||||
[data-type="list"] aside {
|
||||
margin: 0;
|
||||
margin-inline-end: 0.5rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
html[dir="ltr"] [data-type="list"] aside { float: left; }
|
||||
html[dir="rtl"] [data-type="list"] aside { float: right; }
|
||||
|
||||
[data-type="list"] li > a aside,
|
||||
[data-type="list"] li > a aside.icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[data-type="list"] aside.pack-end {
|
||||
margin: 0;
|
||||
margin-inline-start: 0.5rem;
|
||||
text-align: end;
|
||||
}
|
||||
html[dir="ltr"] [data-type="list"] aside.pack-end { float: right; }
|
||||
html[dir="rtl"] [data-type="list"] aside.pack-end { float: left; }
|
||||
|
||||
[data-type="list"] aside.icon {
|
||||
width: 3rem;
|
||||
height: 6rem;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
font-size: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
html[dir="ltr"] [data-type="list"] aside.icon {
|
||||
background-position: left center;
|
||||
}
|
||||
html[dir="rtl"] [data-type="list"] aside.icon {
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
[data-type="list"] aside span[data-type=img],
|
||||
[data-type="list"] aside img {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 2.5rem;
|
||||
margin-top: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
background: transparent center center / cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-icon] {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-icon]:before {
|
||||
line-height: 6rem;
|
||||
text-align: center;
|
||||
width: 3rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Text content */
|
||||
[data-type="list"] li p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: #858585;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
[data-type="list"] li p:first-of-type {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.2rem;
|
||||
color: #333;
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
|
||||
[data-type="list"] li p:only-child,
|
||||
[data-type="list"] li p:first-of-type:last-of-type {
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
[data-type="list"] li p em {
|
||||
font-size: 1.5rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[data-type="list"] li p time {
|
||||
margin-inline-end: 0.3rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Checkable content */
|
||||
[data-type="list"] li > .pack-checkbox,
|
||||
[data-type="list"] li > .pack-switch {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -0.1rem;
|
||||
bottom: 0;
|
||||
/* Intentionally adding a conflict between right/left here: this will be
|
||||
* resolved differently whether we're in LTR or RTL mode. */
|
||||
right: -4rem;
|
||||
left: -4rem;
|
||||
width: calc(100% + 4rem);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[data-type="list"] li > .pack-checkbox input ~ span:after,
|
||||
[data-type="list"] li > .pack-switch input ~ span:after {
|
||||
/* because width is set in switches.css, the conflict between left/right will
|
||||
* be resolved in favor of "left" in LTR and "right" in RTL */
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
/* Edit mode */
|
||||
[data-type="list"] [data-type="edit"] li {
|
||||
padding-inline-start: 4rem;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-type="edit"] li > .pack-checkbox,
|
||||
[data-type="list"] [data-type="edit"] li > .pack-switch {
|
||||
pointer-events: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-type="edit"] li > a {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-type="edit"] li > a:active:after,
|
||||
[data-type="list"] [data-type="edit"] li > a:hover:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-type="edit"] aside.pack-end {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Themes */
|
||||
.skin-comms [data-type="list"] header {
|
||||
color: #4997a7;
|
||||
}
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lists</title>
|
||||
<meta name="description" content="Displaying an enumeration of a set of items ">
|
||||
|
||||
<link rel="stylesheet" href="../lists.css">
|
||||
|
||||
<!--
|
||||
- These <style>, <script> and <link> elements are only used for the example
|
||||
- code, they are not needed for the real case.
|
||||
-->
|
||||
<link rel="stylesheet" href="../../style/headers.css">
|
||||
<link rel="stylesheet" href="../../style/switches.css">
|
||||
<link rel="stylesheet" href="../../style/buttons.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
h2.pack-docs {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -1px 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem 0.4rem 0.4rem 3rem;
|
||||
border: solid 1px #e8e8e8;
|
||||
}
|
||||
|
||||
h2.pack-docs:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
[data-type="list"] li img[alt="placeholder"] {
|
||||
background: #ccc url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiLz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTAiIHkxPSIwIiB4Mj0iMC4wODIiIHkyPSI0OS45MTkiLz4NCjwvc3ZnPg0K);
|
||||
background-size: 100% 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-icon="forward"]:before {
|
||||
color: #686f72;
|
||||
}
|
||||
|
||||
#settings-list { background-color: #eff0eb; }
|
||||
#settings-list li { border-color: #dcdcdc; }
|
||||
#settings-list button { max-width: 8rem; margin: 1rem 1rem 0 0; }
|
||||
#settings-list aside label { margin: 0 1rem 0 0; height: 100%; }
|
||||
#settings-list > header h2 { margin: 0 1.5rem; }
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var dirInput = document.getElementById('dir');
|
||||
dirInput.checked = false;
|
||||
dirInput.onchange = function() {
|
||||
document.documentElement.dir = this.checked ? "rtl" : "ltr";
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<p dir="ltr">
|
||||
<label class="bb-docs">
|
||||
<input id="dir" type="checkbox"> RTL mode
|
||||
</label>
|
||||
</p>
|
||||
<section data-type="list">
|
||||
<header>Title</header>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Margherita <strong>Gomez</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<aside class="pack-end" data-icon="forward" data-l10n-id="" aria-label="forward"></aside>
|
||||
<p>Margherita Clickable <strong>Gomez</strong></p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<aside class="pack-end">
|
||||
<img alt="placeholder" src="myimage.jpg">
|
||||
</aside>
|
||||
<a href="#">
|
||||
<p>Margherita <strong>Gomez</strong></p>
|
||||
<p>Family</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<header>Another title</header>
|
||||
<ul>
|
||||
<li aria-disabled="true">
|
||||
<aside class="pack-end">
|
||||
<img alt="placeholder" src="myimage.jpg">
|
||||
</aside>
|
||||
<a href="#">
|
||||
<p>Margherita <strong>Gomez</strong></p>
|
||||
<p>Family</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<aside class="pack-end icon icon-nopic"></aside>
|
||||
<a href="#">
|
||||
<aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call">
|
||||
asidecall
|
||||
</aside>
|
||||
<p dir="auto">
|
||||
Margherita <strong>Gomez</strong>
|
||||
<em>(2)</em>
|
||||
</p>
|
||||
<p>
|
||||
<time datetime="17:43">5:43PM</time>
|
||||
Mobile, Vivo
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section data-type="list">
|
||||
<header>Edit mode</header>
|
||||
<ul data-type="edit">
|
||||
<li>
|
||||
<label class="pack-checkbox danger">
|
||||
<input type="checkbox">
|
||||
<span></span>
|
||||
</label>
|
||||
<aside class="pack-end">
|
||||
<img alt="placeholder" src="myimage.jpg">
|
||||
</aside>
|
||||
<a href="#">
|
||||
<p>Margherita <strong>Gomez</strong></p>
|
||||
<p>Family</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<label class="pack-checkbox danger">
|
||||
<input type="checkbox">
|
||||
<span></span>
|
||||
</label>
|
||||
<a href="#">
|
||||
<aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call"></aside>
|
||||
<p dir="auto">
|
||||
Margherita <strong>Gomez</strong>
|
||||
<em>(2)</em>
|
||||
</p>
|
||||
<p>
|
||||
<time datetime="17:43">5:43PM</time>
|
||||
Mobile, Vivo
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="settings-list" role="region" class="skin-organic">
|
||||
<section data-type="list">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call"></aside>
|
||||
<p>Phone lock</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<header>
|
||||
<h2>Settings style</h2>
|
||||
</header>
|
||||
<section data-type="list">
|
||||
<ul>
|
||||
<li>
|
||||
<aside class="pack-end">
|
||||
<button class="icon icon-dialog">Spain</button>
|
||||
</aside>
|
||||
<p>Time zone</p>
|
||||
<p>Choose your country</p>
|
||||
</li>
|
||||
<li>
|
||||
<aside class="pack-end">
|
||||
<label class="pack-switch">
|
||||
<input type="checkbox" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
</aside>
|
||||
<p>Phone lock</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue