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
|
|
@ -0,0 +1,121 @@
|
|||
/* ----------------------------------
|
||||
* Progress + activities
|
||||
* ---------------------------------- */
|
||||
|
||||
/* Spinner */
|
||||
progress:not([value]) {
|
||||
background: url(progress_activity/images/ui/default.png) no-repeat center center / 100% auto;
|
||||
animation: 0.9s rotate infinite steps(30);
|
||||
width: 2.9rem;
|
||||
height: 2.9rem;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
progress:not([value]).light {
|
||||
background-image: url(progress_activity/images/ui/light.png);
|
||||
}
|
||||
|
||||
progress:not([value])::-moz-progress-bar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
progress[value] {
|
||||
width: 100%;
|
||||
background: #333;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
height: 0.4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
progress[value]::-moz-progress-bar {
|
||||
background: #01c5ed;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
progress[value].pack-activity {
|
||||
background-size: 15rem;
|
||||
}
|
||||
html[dir="ltr"] progress[value].pack-activity {
|
||||
animation: 1.5s move-right steps(15) infinite;
|
||||
background-image: repeating-linear-gradient(135deg, #92F4FE, #92F4FE 5rem, #00CDF0 5rem, #00CDF0 10rem);
|
||||
}
|
||||
html[dir="rtl"] progress[value].pack-activity {
|
||||
animation: 1.5s move-left steps(15) infinite;
|
||||
background-image: repeating-linear-gradient(-135deg, #92F4FE, #92F4FE 5rem, #00CDF0 5rem, #00CDF0 10rem);
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
p[role="status"] {
|
||||
padding: 0.5rem;
|
||||
font-weight: 300;
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.4em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
p[role="status"] progress:not([value]) {
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
p[role="status"] progress:not([value]) + span {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p[role="status"] span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Progress steps */
|
||||
.bb-steps {
|
||||
position: relative;
|
||||
height: 0.3rem;
|
||||
}
|
||||
html[dir="ltr"] .bb-steps { transform: scaleX(1); }
|
||||
html[dir="rtl"] .bb-steps { transform: scaleX(-1); }
|
||||
|
||||
.bb-steps:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 0;
|
||||
left: 0;
|
||||
top: 0.1rem;
|
||||
right: 0;
|
||||
border-top: 0.1rem solid #b7b7b7;
|
||||
border-bottom: 0.1rem solid #fff;
|
||||
}
|
||||
|
||||
.bb-steps progress[value] {
|
||||
position: absolute;
|
||||
height: 0.3rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #858585;
|
||||
transition: transform 0.35s cubic-bezier(0, 1, 0.5, 1.1);
|
||||
}
|
||||
|
||||
.bb-steps progress[value]::-moz-progress-bar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(1deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes move-right {
|
||||
from { background-position: -15rem 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
@keyframes move-left {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: -15rem 0; }
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 99 B |
Binary file not shown.
|
After Width: | Height: | Size: 789 B |
Binary file not shown.
|
After Width: | Height: | Size: 502 B |
|
|
@ -0,0 +1,155 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Progress & Activity Indicators</title>
|
||||
<meta name="description" content="Providing user with visual feedback that a process is active">
|
||||
|
||||
<link rel="stylesheet" href="../../style/headers.css">
|
||||
<link rel="stylesheet" href="../../style/confirm.css">
|
||||
<link rel="stylesheet" href="../progress_activity.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: #fff;
|
||||
}
|
||||
|
||||
body { background: none; }
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-family: sans-serif;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: 10px 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem;
|
||||
padding-inline-start: 3rem;
|
||||
border: solid 1px #e8e8e8;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] {
|
||||
position: relative;
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] > section {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bb-steps progress[value] {
|
||||
width: 25%;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
</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>
|
||||
<section role="region">
|
||||
<h2 class="bb-docs">Spinner</h2>
|
||||
<div style="text-align: center">
|
||||
<progress></progress>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Activity bar</h2>
|
||||
<progress class="pack-activity" value="0" max="100"></progress>
|
||||
|
||||
<h2 class="bb-docs">Progress steps</h2>
|
||||
<p class="bb-steps">
|
||||
<progress value="2" max="4"></progress>
|
||||
</p>
|
||||
|
||||
<h2 class="bb-docs">Progress bar</h2>
|
||||
<progress value="80" max="100"></progress>
|
||||
|
||||
<h2 class="bb-docs">Progress + activity bar</h2>
|
||||
<progress class="pack-activity" value="80" max="100"></progress>
|
||||
</section>
|
||||
|
||||
<h2 class="bb-docs">Progress bar + Confirm BB</h2>
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<h1>Name of the action</h1>
|
||||
<p style="text-align: center">
|
||||
<progress></progress>
|
||||
</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button class="full">Cancel</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
<br/>
|
||||
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<h1>Name of the action</h1>
|
||||
<p role="status">
|
||||
<span>80%</span>
|
||||
<progress value="80" max="100"></progress>
|
||||
</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button class="full">Cancel</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
<br/>
|
||||
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<h1>Name of the action</h1>
|
||||
<p role="status">
|
||||
<progress class="pack-activity" value="0" max="100"></progress>
|
||||
</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button class="full">Cancel</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
|
||||
<h2 class="bb-docs">Progress bar in Headers</h2>
|
||||
<section role="region">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-back">back</span></a>
|
||||
<h1>Song title</h1>
|
||||
</header>
|
||||
<progress value="80" max="100"></progress>
|
||||
<header>
|
||||
<h2>Subheader text</h2>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section role="region">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-back">back</span></a>
|
||||
<h1>Song title</h1>
|
||||
</header>
|
||||
<progress class="pack-activity" value="0" max="100"></progress>
|
||||
<header>
|
||||
<h2>Subheader text</h2>
|
||||
</header>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue