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
321
gaia/shared/style/action_menu.css
Executable file
321
gaia/shared/style/action_menu.css
Executable file
|
|
@ -0,0 +1,321 @@
|
|||
/* ----------------------------------
|
||||
* Action menu
|
||||
* ---------------------------------- */
|
||||
|
||||
html[dir="ltr"] [role="dialog"][data-type="action"] [dir],
|
||||
html[dir="ltr"] [role="dialog"][data-type="action"] button {
|
||||
text-align: left;
|
||||
}
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] [dir],
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] button {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Main dialog setup */
|
||||
[role="dialog"][data-type="action"] {
|
||||
background: #2d2d2d;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 0 7rem;
|
||||
/**
|
||||
* Using "font-size: 0" to avoid the unwanted visual space (about 3px) created
|
||||
* by white spaces and line breaks in the code between inline-block elements.
|
||||
*/
|
||||
font-size: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"]:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
margin-inline-start: -0.1rem;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > header {
|
||||
box-sizing: border-box;
|
||||
font-size: 1.6rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
height: 5rem;
|
||||
line-height: 4.9rem;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-weight: normal;
|
||||
padding: 0 3rem;
|
||||
border-bottom: 0.1rem solid #616262;
|
||||
}
|
||||
[role="dialog"][data-type="action"] > header * {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > header h1 {
|
||||
font-size: 1.6rem;
|
||||
line-height: 4.9rem;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Generic set of actions in toolbar */
|
||||
[role="dialog"][data-type="action"] > header menu[type="toolbar"] {
|
||||
height: 100%;
|
||||
margin: 0 -3rem;
|
||||
margin-inline-start: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
html[dir="ltr"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] { float: right; }
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] { float: left; }
|
||||
|
||||
[role="dialog"][data-type="action"] > header menu[type="toolbar"] a,
|
||||
[role="dialog"][data-type="action"] > header menu[type="toolbar"] button {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: auto;
|
||||
min-width: 5rem;
|
||||
height: 4.9rem;
|
||||
margin-bottom: 0;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
line-height: 4.9rem;
|
||||
background: none;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
z-index: 5;
|
||||
}
|
||||
html[dir="ltr"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] a,
|
||||
html[dir="ltr"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] button {
|
||||
float: left;
|
||||
}
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] a,
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] > header menu[type="toolbar"] button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > header a,
|
||||
[role="dialog"][data-type="action"] > header button {
|
||||
border: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.1em;
|
||||
color: #fff;
|
||||
border-radius: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] button::-moz-focus-inner {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Pressed state */
|
||||
[role="dialog"][data-type="action"] > header a:active .icon:after,
|
||||
[role="dialog"][data-type="action"] > header button:active .icon:after,
|
||||
[role="dialog"][data-type="action"] > header menu[type="toolbar"] a:active,
|
||||
[role="dialog"][data-type="action"] > header menu[type="toolbar"] button:active {
|
||||
background: #008aaa !important;
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
[role="dialog"][data-type="action"] > header menu[type="toolbar"] a[aria-disabled="true"],
|
||||
[role="dialog"][data-type="action"] > header menu[type="toolbar"] button[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Icon definitions */
|
||||
[role="dialog"][data-type="action"] > header .icon {
|
||||
position: relative;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 4rem;
|
||||
height: 4.9rem;
|
||||
margin: 0 -1rem;
|
||||
background: transparent no-repeat center center / 3rem auto;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > header .icon.icon-close {
|
||||
background-image: url(action_menu/images/icons/close.png);
|
||||
}
|
||||
|
||||
html[dir="ltr"] [role="dialog"][data-type="action"] > header .icon.icon-back {
|
||||
background-image: url(action_menu/images/icons/left.png);
|
||||
}
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] > header .icon.icon-back {
|
||||
background-image: url(action_menu/images/icons/right.png);
|
||||
}
|
||||
|
||||
/* Navigation links (back, cancel, etc) */
|
||||
[role="dialog"][data-type="action"] > header > button,
|
||||
[role="dialog"][data-type="action"] > header > a {
|
||||
width: 5rem;
|
||||
height: 4.9rem;
|
||||
background: none;
|
||||
overflow: visible;
|
||||
margin: 0 -1rem;
|
||||
margin-inline-start: -3rem;
|
||||
position: relative;
|
||||
}
|
||||
html[dir="ltr"] [role="dialog"][data-type="action"] > header > button,
|
||||
html[dir="ltr"] [role="dialog"][data-type="action"] > header > a {
|
||||
float: left;
|
||||
}
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] > header > button,
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] > header > a {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > header > button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > header > button .icon,
|
||||
[role="dialog"][data-type="action"] > header > a .icon {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 4.9rem;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > header > button .icon:after,
|
||||
[role="dialog"][data-type="action"] > header > a .icon:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
offset-inline-start: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
width: 3rem;
|
||||
height: 4.9rem;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
[role="dialog"][data-type="action"] > section {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 7rem;
|
||||
left: 1.5rem;
|
||||
right: 1.5rem;
|
||||
bottom: 2rem;
|
||||
font-size: 1.6rem;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
/* Specific component code */
|
||||
[role="dialog"][data-type="action"] > menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: calc(100% - 13.5rem); /*header(5rem) + footer(7rem) + padding(1.5rem)*/
|
||||
height: auto;
|
||||
padding-top: 1.5rem;
|
||||
overflow: auto;
|
||||
width: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 7rem;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > menu > button {
|
||||
width: calc(100% - 3rem);
|
||||
height: 4rem;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-weight: normal;
|
||||
line-height: 4rem;
|
||||
outline: none;
|
||||
font-size: 1.6rem;
|
||||
text-shadow: none;
|
||||
padding: 0 1.2rem;
|
||||
margin: 0 1.5rem 1rem;
|
||||
background: rgba(87, 87, 87, 0.8);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > menu > .last-button-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: #4d4d4d;
|
||||
height: 7rem;
|
||||
offset-inline-start: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > menu > .last-button-container button {
|
||||
width: calc(100% - 3rem);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
margin: 0 1.5rem 1.5rem;
|
||||
offset-inline-start: 0;
|
||||
color: #333;
|
||||
background: #d8d8d8;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
height: 4rem;
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > menu > button:nth-last-child(2) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Press state */
|
||||
[role="dialog"][data-type="action"] > menu button:active {
|
||||
background: #00aacc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
[role="dialog"][data-type="action"] > menu > button[disabled] {
|
||||
background-color: rgba(87, 87, 87, 0.8);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="action"] > menu > .last-button-container button[disabled] {
|
||||
background-color: #e7e7e7;
|
||||
color: #a6a6a6;
|
||||
opacity: 1;
|
||||
}
|
||||
48
gaia/shared/style/action_menu/header_actions.html
Executable file
48
gaia/shared/style/action_menu/header_actions.html
Executable file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Action menu</title>
|
||||
<meta name="description" content="Presenting a list of actions related to the App content">
|
||||
|
||||
<link rel="stylesheet" href="../action_menu.css">
|
||||
<!--
|
||||
- This <style> element is only used for the example code;
|
||||
- it is not required for the real use case.
|
||||
-->
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body role="application">
|
||||
<p dir="ltr">
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
|
||||
RTL mode
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<form role="dialog" data-type="action">
|
||||
<header>
|
||||
<button><span class="icon icon-close">close</span></button>
|
||||
<menu type="toolbar">
|
||||
<button>done</button>
|
||||
</menu>
|
||||
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
|
||||
</header>
|
||||
<section>
|
||||
<p>Curabitur condimentum diam mollis lacus hendrerit congue. Phasellus porttitor orci elit, ac consequat est mollis ut. Ut consequat ipsum a ullamcorper aliquam.</p>
|
||||
</section>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
BIN
gaia/shared/style/action_menu/images/icons/close.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/close.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 245 B |
BIN
gaia/shared/style/action_menu/images/icons/close@1.5x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/close@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 321 B |
BIN
gaia/shared/style/action_menu/images/icons/close@2.25x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/close@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 562 B |
BIN
gaia/shared/style/action_menu/images/icons/close@2x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/close@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 674 B |
BIN
gaia/shared/style/action_menu/images/icons/left.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/left.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
BIN
gaia/shared/style/action_menu/images/icons/left@1.5x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/left@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
BIN
gaia/shared/style/action_menu/images/icons/left@2.25x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/left@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 378 B |
BIN
gaia/shared/style/action_menu/images/icons/left@2x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/left@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 485 B |
BIN
gaia/shared/style/action_menu/images/icons/right.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/right.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
BIN
gaia/shared/style/action_menu/images/icons/right@1.5x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/right@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
BIN
gaia/shared/style/action_menu/images/icons/right@2.25x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/right@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
BIN
gaia/shared/style/action_menu/images/icons/right@2x.png
Executable file
BIN
gaia/shared/style/action_menu/images/icons/right@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 420 B |
51
gaia/shared/style/action_menu/index.html
Executable file
51
gaia/shared/style/action_menu/index.html
Executable file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Action menu</title>
|
||||
<meta name="description" content="Presenting a list of actions related to the App content">
|
||||
|
||||
<link rel="stylesheet" href="../action_menu.css">
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code;
|
||||
- they are not required for the real use case.
|
||||
-->
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onkeypress = event => {
|
||||
var dir = document.documentElement.dir;
|
||||
document.documentElement.dir = (dir === 'ltr') ? 'rtl' : 'ltr';
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body role="application">
|
||||
<form role="dialog" data-type="action">
|
||||
<header><span class="icon icon-back"></span>Title</header> <!-- this header is optional -->
|
||||
<menu type="toolbar">
|
||||
<button>Action 1</button>
|
||||
<button disabled> Action 2 (disabled) </button>
|
||||
<button> Action 3. </button>
|
||||
<button> الولايات 4</button>
|
||||
<button disabled> Action 5 (disabled) </button>
|
||||
<button> Action 6 </button>
|
||||
<button> Action 7 </button>
|
||||
<button disabled> Action 8 (disabled) </button>
|
||||
<button> Action 9 </button>
|
||||
<button> Cancel </button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
167
gaia/shared/style/animations.css
Executable file
167
gaia/shared/style/animations.css
Executable file
|
|
@ -0,0 +1,167 @@
|
|||
.fade-in {
|
||||
animation: fade-in 0.2s forwards;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fade-out 0.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
html[dir="ltr"] .app-go-deeper-out {
|
||||
animation: current-to-left var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .app-go-deeper-out {
|
||||
animation: current-to-right var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .app-go-deeper-in {
|
||||
animation: right-to-current var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .app-go-deeper-in {
|
||||
animation: left-to-current var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .app-go-deeper-back-in {
|
||||
animation: left-to-current var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .app-go-deeper-back-in {
|
||||
animation: right-to-current var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .app-go-deeper-back-out {
|
||||
animation: current-to-right var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .app-go-deeper-back-out {
|
||||
animation: current-to-left var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes right-to-current {
|
||||
0% { transform: translateX(100%); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes current-to-left {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
@keyframes current-to-right {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
@keyframes left-to-current {
|
||||
/* To pre-render the incoming screen and avoid a flick we are getting if
|
||||
setting it to 100%. */
|
||||
0% { transform: translateX(-99.99%); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes header-current-to-left {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-30%); }
|
||||
}
|
||||
|
||||
@keyframes header-left-to-current {
|
||||
0% { transform: translateX(-30%); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.app-go-up-in {
|
||||
animation: app-go-up-in var(--transition-duration) forwards ease-in;
|
||||
}
|
||||
|
||||
.app-go-up-back-out {
|
||||
animation: app-go-up-back-out var(--transition-duration) forwards ease-in;
|
||||
}
|
||||
|
||||
@keyframes app-go-up-in {
|
||||
0% { transform: translateY(100%); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes app-go-up-back-out {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100%); }
|
||||
}
|
||||
|
||||
html[dir="ltr"] .app-go-in {
|
||||
animation: right-to-current var(--transition-duration) forwards ease-in;
|
||||
}
|
||||
html[dir="rtl"] .app-go-in {
|
||||
animation: left-to-current var(--transition-duration) forwards ease-in;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .app-go-back-out {
|
||||
animation: current-to-right var(--transition-duration) forwards ease-in;
|
||||
}
|
||||
html[dir="rtl"] .app-go-back-out {
|
||||
animation: current-to-left var(--transition-duration) forwards ease-in;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .move-in-from-forward {
|
||||
animation: move-left-in var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .move-in-from-forward {
|
||||
animation: move-right-in var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .move-out-from-forward {
|
||||
animation: move-left-out var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .move-out-from-forward {
|
||||
animation: move-right-out var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .move-in-from-backward {
|
||||
animation: move-right-in var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .move-in-from-backward {
|
||||
animation: move-left-in var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .move-out-from-backward {
|
||||
animation: move-right-out var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .move-out-from-backward {
|
||||
animation: move-left-out var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
@keyframes move-left-in {
|
||||
0% { transform: translateX(100%);}
|
||||
100% { transform: translateX(0);}
|
||||
}
|
||||
|
||||
@keyframes move-left-out {
|
||||
0% { transform: translateX(0);}
|
||||
100% { transform: translateX(-100%);}
|
||||
}
|
||||
|
||||
@keyframes move-right-in {
|
||||
0% { transform: translateX(-100%);}
|
||||
100% { transform: translateX(0%);}
|
||||
}
|
||||
|
||||
@keyframes move-right-out {
|
||||
0% { transform: translateX(0%);}
|
||||
100% { transform: translateX(100%);}
|
||||
}
|
||||
428
gaia/shared/style/buttons.css
Executable file
428
gaia/shared/style/buttons.css
Executable 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;
|
||||
}
|
||||
1
gaia/shared/style/buttons/images/left-light.svg
Executable file
1
gaia/shared/style/buttons/images/left-light.svg
Executable file
|
|
@ -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 |
1
gaia/shared/style/buttons/images/right-light.svg
Executable file
1
gaia/shared/style/buttons/images/right-light.svg
Executable file
|
|
@ -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 |
280
gaia/shared/style/buttons/index.html
Executable file
280
gaia/shared/style/buttons/index.html
Executable file
|
|
@ -0,0 +1,280 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Buttons</title>
|
||||
<link rel="stylesheet" href="../buttons.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
|
||||
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code,
|
||||
- they are not needed for the real case.
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
label.bb-docs {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -0.1rem 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem 3rem;
|
||||
border: solid 0.1rem #e8e8e8;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
div.bb-docs {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
div.bb-docs.skin-organic {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
div.bb-docs.skin-dark {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body[role="application"] > [role="region"] {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.getElementById('dir').checked = false;
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body role="application">
|
||||
<p dir="ltr">
|
||||
<label class="bb-docs">
|
||||
<input id="dir" type="checkbox" checked="false"
|
||||
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
|
||||
RTL mode
|
||||
</label>
|
||||
</p>
|
||||
<h2 class="bb-docs">Special buttons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button>Default</button>
|
||||
<button class="recommend">Recommend</button>
|
||||
<button class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Buttons with icons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">Default</button>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="" class="recommend">Recommend</button>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="" class="danger">Danger</button>
|
||||
<button data-icon="forward-light" aria-label="forward-light" data-l10n-id="">Default</button>
|
||||
<button data-icon="back" aria-label="back" data-l10n-id="">Default</button>
|
||||
<button data-icon="back-light" aria-label="back-light" data-l10n-id="">Default</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button disabled>Default</button>
|
||||
<a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
|
||||
<button disabled class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<button>Default</button>
|
||||
<button class="recommend">Recommend</button>
|
||||
<button class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<button disabled>Default</button>
|
||||
<a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
|
||||
<button disabled class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">List buttons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<ul>
|
||||
<li>
|
||||
<button>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled>Disabled</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-view">
|
||||
Icon view button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog">
|
||||
Icon dialog button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<span class="button icon icon-dialog">
|
||||
<select>
|
||||
<option selected>Icon dialog with options</option>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog" disabled>
|
||||
Icon dialog button disabled
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin Dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<ul>
|
||||
<li>
|
||||
<button>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled>Disabled</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog">
|
||||
Dark icon dialog button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Select</h2>
|
||||
<div class="bb-docs">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Fake select</h2>
|
||||
<div class="bb-docs">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled select</h2>
|
||||
<div class="bb-docs">
|
||||
<ul>
|
||||
<li>
|
||||
<span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Fake select</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
265
gaia/shared/style/confirm.css
Executable file
265
gaia/shared/style/confirm.css
Executable 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;
|
||||
}
|
||||
70
gaia/shared/style/confirm/content.html
Executable file
70
gaia/shared/style/confirm/content.html
Executable file
File diff suppressed because one or more lines are too long
82
gaia/shared/style/confirm/content_details.html
Executable file
82
gaia/shared/style/confirm/content_details.html
Executable file
File diff suppressed because one or more lines are too long
BIN
gaia/shared/style/confirm/images/ui/gradient.png
Executable file
BIN
gaia/shared/style/confirm/images/ui/gradient.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
gaia/shared/style/confirm/images/ui/gradient@1.5x.png
Executable file
BIN
gaia/shared/style/confirm/images/ui/gradient@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
gaia/shared/style/confirm/images/ui/gradient@2.25x.png
Executable file
BIN
gaia/shared/style/confirm/images/ui/gradient@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
gaia/shared/style/confirm/images/ui/gradient@2x.png
Executable file
BIN
gaia/shared/style/confirm/images/ui/gradient@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
gaia/shared/style/confirm/images/ui/pattern.png
Executable file
BIN
gaia/shared/style/confirm/images/ui/pattern.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
gaia/shared/style/confirm/images/ui/pattern@1.5x.png
Executable file
BIN
gaia/shared/style/confirm/images/ui/pattern@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
BIN
gaia/shared/style/confirm/images/ui/pattern@2.25x.png
Executable file
BIN
gaia/shared/style/confirm/images/ui/pattern@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
gaia/shared/style/confirm/images/ui/pattern@2x.png
Executable file
BIN
gaia/shared/style/confirm/images/ui/pattern@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
65
gaia/shared/style/confirm/index.html
Executable file
65
gaia/shared/style/confirm/index.html
Executable file
|
|
@ -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>
|
||||
65
gaia/shared/style/confirm/long_content.html
Executable file
65
gaia/shared/style/confirm/long_content.html
Executable file
|
|
@ -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>
|
||||
64
gaia/shared/style/confirm/no_title.html
Executable file
64
gaia/shared/style/confirm/no_title.html
Executable file
|
|
@ -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>
|
||||
1
gaia/shared/style/contacts.css
Executable file
1
gaia/shared/style/contacts.css
Executable file
|
|
@ -0,0 +1 @@
|
|||
|
||||
80
gaia/shared/style/contacts/contact_in_overlay.css
Executable file
80
gaia/shared/style/contacts/contact_in_overlay.css
Executable file
|
|
@ -0,0 +1,80 @@
|
|||
/* Overrides building blocks */
|
||||
#contact-list .contact-item {
|
||||
height: auto;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
/* End overrides building blocks */
|
||||
|
||||
.contact-item {
|
||||
flex: 1;
|
||||
padding: 0 2rem;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-item .ci__tel-type:not(:empty) ~ .js-separator::before {
|
||||
content: ',';
|
||||
-moz-margin-end: 5px;
|
||||
}
|
||||
|
||||
.contact-item .ci__tel-type:not(:empty) {
|
||||
min-width: 4rem;
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.ci__name {
|
||||
line-height: 1.9rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ci--action-menu .ci__name {
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ci__details {
|
||||
display: flex;
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.3rem;
|
||||
pointer-events: none;
|
||||
margin-bottom: -0.4rem;
|
||||
}
|
||||
|
||||
.ci--action-menu .ci__details {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.ci__mark {
|
||||
background-color: #94EEE9;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.ci--action-menu .ci__mark {
|
||||
background: #333;
|
||||
color: #94eee9;
|
||||
}
|
||||
|
||||
.js-tel {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* FIXME Move to some kind of "building blocks" file? */
|
||||
.ellipsis {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Override BB styles for LTR */
|
||||
[role="dialog"][data-type="action"] > menu > button.contact-item {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Override BB styles for RTL */
|
||||
html[dir="rtl"] [role="dialog"][data-type="action"] > menu > button.contact-item,
|
||||
html[dir="rtl"] .contact-item {
|
||||
text-align: right;
|
||||
}
|
||||
170
gaia/shared/style/contacts/contacts_buttons.css
Executable file
170
gaia/shared/style/contacts/contacts_buttons.css
Executable file
|
|
@ -0,0 +1,170 @@
|
|||
/* Hidden elements */
|
||||
.hide, [data-template] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
li .icon-call:before {
|
||||
background-image: url("/shared/style/contacts/images/call.png") !important;
|
||||
}
|
||||
|
||||
li button.icon-message:before {
|
||||
background-image: url("/shared/style/contacts/images/sms.png") !important;
|
||||
}
|
||||
|
||||
li button.send-sms {
|
||||
width: 0;
|
||||
}
|
||||
li button.icon-email:before {
|
||||
background-image: url("/shared/style/contacts/images/mail.png") !important;
|
||||
}
|
||||
|
||||
.has-preferred-sim .button.icon-call {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
|
||||
.has-preferred-sim .button.icon-call b {
|
||||
position: unset;
|
||||
order: 1;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.has-preferred-sim .activity.icon-call:before {
|
||||
margin-top: 0;
|
||||
background-size: 3rem !important;
|
||||
position: unset;
|
||||
order: 2;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.call-action .js-sim-indication {
|
||||
display: none;
|
||||
font-size: 1.3rem;
|
||||
color: #5F5F5F;
|
||||
font-style: normal;
|
||||
line-height: 4rem;
|
||||
height: 4rem;
|
||||
text-align: end;
|
||||
margin: 0;
|
||||
background: url("/shared/elements/gaia_sim_picker/images/long-tap-indicator.png") no-repeat right bottom 0.2rem / 1.4rem 1rem;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.has-preferred-sim .call-action .js-sim-indication {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sim-picker {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
#contact-detail h2 {
|
||||
display: flex;
|
||||
margin: 0 1.5rem 0.2rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.8rem;
|
||||
color: #4997a7;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#contact-detail .carrier {
|
||||
font-size: 1.4rem;
|
||||
color: #5f5f5f;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
/* ITEM: The smallest complete structure; */
|
||||
.item {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#contact-detail .item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item-media {
|
||||
float: left;
|
||||
-moz-margin-end: 1rem;
|
||||
}
|
||||
|
||||
.item-media.pull-right {
|
||||
-moz-margin-start: 1rem;
|
||||
-moz-margin-end: 0;
|
||||
}
|
||||
|
||||
.item-media.pull-right .activity {
|
||||
-moz-padding-end: 3rem;
|
||||
}
|
||||
|
||||
.item-body {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.item-body-exp {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#contact-detail .item-body-exp {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* PULLS: Float an element to the desired position; */
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
li .activity > b {
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 1.5rem;
|
||||
right: 3rem;
|
||||
top: 1rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.remark {
|
||||
color: #339999 !important;
|
||||
}
|
||||
|
||||
.remark-missed {
|
||||
color: #CC0000 !important;
|
||||
}
|
||||
|
||||
/* RTL View */
|
||||
html[dir="rtl"] .call-action .js-sim-indication {
|
||||
background-position: left bottom 0.2rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .item-media {
|
||||
float: right;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .pull-left {
|
||||
float: right;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .pull-right {
|
||||
float: left;
|
||||
}
|
||||
|
||||
html[dir="rtl"] li .activity > b {
|
||||
left: 3rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"] li .icon-call {
|
||||
text-align: right;
|
||||
}
|
||||
BIN
gaia/shared/style/contacts/images/call.png
Executable file
BIN
gaia/shared/style/contacts/images/call.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
BIN
gaia/shared/style/contacts/images/call@1.5x.png
Executable file
BIN
gaia/shared/style/contacts/images/call@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
BIN
gaia/shared/style/contacts/images/call@2.25x.png
Executable file
BIN
gaia/shared/style/contacts/images/call@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 673 B |
BIN
gaia/shared/style/contacts/images/call@2x.png
Executable file
BIN
gaia/shared/style/contacts/images/call@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 589 B |
BIN
gaia/shared/style/contacts/images/mail.png
Executable file
BIN
gaia/shared/style/contacts/images/mail.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 191 B |
BIN
gaia/shared/style/contacts/images/mail@1.5x.png
Executable file
BIN
gaia/shared/style/contacts/images/mail@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 250 B |
BIN
gaia/shared/style/contacts/images/mail@2.25x.png
Executable file
BIN
gaia/shared/style/contacts/images/mail@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 358 B |
BIN
gaia/shared/style/contacts/images/mail@2x.png
Executable file
BIN
gaia/shared/style/contacts/images/mail@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 298 B |
BIN
gaia/shared/style/contacts/images/sms.png
Executable file
BIN
gaia/shared/style/contacts/images/sms.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 332 B |
BIN
gaia/shared/style/contacts/images/sms@1.5x.png
Executable file
BIN
gaia/shared/style/contacts/images/sms@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 453 B |
BIN
gaia/shared/style/contacts/images/sms@2.25x.png
Executable file
BIN
gaia/shared/style/contacts/images/sms@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
BIN
gaia/shared/style/contacts/images/sms@2x.png
Executable file
BIN
gaia/shared/style/contacts/images/sms@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
287
gaia/shared/style/date_selector.css
Executable file
287
gaia/shared/style/date_selector.css
Executable file
|
|
@ -0,0 +1,287 @@
|
|||
/* ----------------------------------
|
||||
* Date selector
|
||||
* ---------------------------------- */
|
||||
|
||||
/* Main dialog setup */
|
||||
[role="dialog"][data-type="date-selector"] {
|
||||
background: #2d2d2d;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 0 7rem;
|
||||
color: #fff;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] h1 {
|
||||
font-weight: 400;
|
||||
font-size: 1.9rem;
|
||||
line-height: 4.8rem;
|
||||
color: #fff;
|
||||
border-bottom: 0.1rem solid #616262;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
margin: 0;
|
||||
padding: 0 3rem 1rem;
|
||||
height: 4.8rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Date picker */
|
||||
[role="dialog"][data-type="date-selector"] .picker-container {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: calc(100% - 5rem);
|
||||
height: 22.5rem;
|
||||
margin: 5.4rem auto 0;
|
||||
padding-top: 8.8rem;
|
||||
border-left: 0.1rem solid #111;
|
||||
border-right: 0.1rem solid #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .picker-container:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-top: solid 0.7rem;
|
||||
-moz-border-top-colors:
|
||||
rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3)
|
||||
rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1)
|
||||
rgba(0, 0, 0, 0.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .picker-container:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-bottom: solid 0.7rem;
|
||||
-moz-border-bottom-colors:
|
||||
rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3)
|
||||
rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1)
|
||||
rgba(0, 0, 0, 0.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .picker-bar-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
offset-inline-end: 0;
|
||||
width: 27%;
|
||||
height: 100%;
|
||||
background: #4d4d4d;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-date-wrapper,
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-month-wrapper,
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-year-wrapper {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
padding-top: 8.3rem;
|
||||
/**
|
||||
* BiDi-proof:
|
||||
* the edge shadow is always on the right edge of the two first columns.
|
||||
*/
|
||||
border-right: solid 0.2rem;
|
||||
-moz-border-right-colors: #1d1d1d #4a4a4a;
|
||||
}
|
||||
|
||||
/* BiDi-proof: the right-most column has no border. */
|
||||
html[dir="ltr"] [role="dialog"][data-type="date-selector"] .DMY .value-picker-year-wrapper,
|
||||
html[dir="ltr"] [role="dialog"][data-type="date-selector"] .MDY .value-picker-year-wrapper,
|
||||
html[dir="ltr"] [role="dialog"][data-type="date-selector"] .YMD .value-picker-date-wrapper,
|
||||
html[dir="rtl"] [role="dialog"][data-type="date-selector"] .DMY .value-picker-date-wrapper,
|
||||
html[dir="rtl"] [role="dialog"][data-type="date-selector"] .MDY .value-picker-month-wrapper,
|
||||
html[dir="rtl"] [role="dialog"][data-type="date-selector"] .YMD .value-picker-year-wrapper {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* DMY (default) */
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-date-wrapper {
|
||||
width: 21%;
|
||||
offset-inline-start: 0;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-month-wrapper {
|
||||
width: 52%;
|
||||
offset-inline-start: 21%;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-year-wrapper {
|
||||
width: 27%;
|
||||
offset-inline-end: 0;
|
||||
}
|
||||
|
||||
/* YMD */
|
||||
[role="dialog"][data-type="date-selector"] .YMD .value-picker-year-wrapper {
|
||||
offset-inline-start: 0;
|
||||
offset-inline-end: unset;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .YMD .value-picker-month-wrapper {
|
||||
offset-inline-start: 27%;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .YMD .value-picker-date-wrapper {
|
||||
offset-inline-start: unset;
|
||||
offset-inline-end: 0;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .YMD .picker-bar-background {
|
||||
offset-inline-start: 0;
|
||||
offset-inline-end: unset;
|
||||
}
|
||||
|
||||
/* MDY */
|
||||
[role="dialog"][data-type="date-selector"] .MDY .value-picker-month-wrapper {
|
||||
offset-inline-start: 0;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .MDY .value-picker-date-wrapper {
|
||||
offset-inline-start: 52%;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-date,
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-month,
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-year {
|
||||
-moz-user-select: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-date > *[data-disabled="true"],
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-month > *[data-disabled="true"],
|
||||
[role="dialog"][data-type="date-selector"] .value-picker-year > *[data-disabled="true"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .value-indicator {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
background-color: #00A5C5;
|
||||
box-shadow: 0 0 0.7rem rgba(0,0,0, .4);
|
||||
opacity: .99;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .animation-on {
|
||||
transition: transform var(--transition-duration) cubic-bezier(0, 0, 0.4, 1);
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .picker-unit {
|
||||
position: relative;
|
||||
font: 2.2rem/5.6rem sans-serif;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 5.6rem;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] .picker-unit.selected {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Menu & buttons setup */
|
||||
[role="dialog"][data-type="date-selector"] menu {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 1.5rem;
|
||||
background: #4d4d4d;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 0; /* collapse the whitespaces around menu buttons */
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] menu button::-moz-focus-inner {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] menu button {
|
||||
width: calc((100% - 1rem) / 2);
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
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-shadow: none;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Affirmative */
|
||||
[role="dialog"][data-type="date-selector"] menu button.affirmative,
|
||||
[role="dialog"][data-type="date-selector"] menu button.recommend {
|
||||
background-color: #00caf2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pressed */
|
||||
[role="dialog"][data-type="date-selector"] menu button:active {
|
||||
background: #00aacc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
[role="dialog"][data-type="date-selector"] > menu > button[disabled] {
|
||||
background-color: #565656;
|
||||
color: rgba(255,255,255,0.4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] > menu > button[disabled].recommend {
|
||||
background-color: #006579;
|
||||
}
|
||||
|
||||
button[disabled]::-moz-selection {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] menu button:last-child {
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] menu button,
|
||||
[role="dialog"][data-type="date-selector"] menu button:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="date-selector"] menu button.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
BIN
gaia/shared/style/date_selector/images/ui/gradient.png
Executable file
BIN
gaia/shared/style/date_selector/images/ui/gradient.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
gaia/shared/style/date_selector/images/ui/gradient@1.5x.png
Executable file
BIN
gaia/shared/style/date_selector/images/ui/gradient@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
gaia/shared/style/date_selector/images/ui/pattern-time.png
Executable file
BIN
gaia/shared/style/date_selector/images/ui/pattern-time.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 106 B |
BIN
gaia/shared/style/date_selector/images/ui/pattern.png
Executable file
BIN
gaia/shared/style/date_selector/images/ui/pattern.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
314
gaia/shared/style/date_selector/index.html
Executable file
314
gaia/shared/style/date_selector/index.html
Executable file
|
|
@ -0,0 +1,314 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Date selector</title>
|
||||
<link rel="stylesheet" href="../date_selector.css">
|
||||
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code:
|
||||
- they are not needed for the real use case.
|
||||
-->
|
||||
<style type="text/css">
|
||||
html, body { font-size: 10px; margin: 0; padding: 0; }
|
||||
html[dir="rtl"] [dir] { text-align: right; }
|
||||
h1 + p { padding: 1rem 3rem; }
|
||||
</style>
|
||||
<script>
|
||||
var formatIndex = 0;
|
||||
var formatList = [ 'DMY', 'YMD', 'MDY' ];
|
||||
window.onkeypress = event => {
|
||||
switch (event.key) {
|
||||
case 'j':
|
||||
case 'ArrowDown':
|
||||
formatIndex--;
|
||||
break;
|
||||
case 'k':
|
||||
case 'ArrowUp':
|
||||
formatIndex++;
|
||||
break;
|
||||
default:
|
||||
var dir = document.documentElement.dir;
|
||||
document.documentElement.dir = (dir === 'ltr') ? 'rtl' : 'ltr';
|
||||
}
|
||||
formatIndex = (formatIndex + formatList.length) % formatList.length;
|
||||
document.querySelector('.picker-container').className =
|
||||
'picker-container ' + formatList[formatIndex]
|
||||
document.querySelector('h1').textContent =
|
||||
'Select day (' + formatList[formatIndex] + ')';
|
||||
};
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form role="dialog" data-type="date-selector">
|
||||
<h1 dir="ltr">Select Day (DMY)</h1>
|
||||
<p dir="ltr">Use the arrow keys to change the direction and format.</p>
|
||||
|
||||
<div class="picker-container DMY">
|
||||
<div class="picker-bar-background"></div>
|
||||
<div class="value-picker-date-wrapper">
|
||||
<div style="transform: translateY(-392px);" class="value-picker-date animation-on">
|
||||
<div class="picker-unit">01</div>
|
||||
<div class="picker-unit">02</div>
|
||||
<div class="picker-unit">03</div>
|
||||
<div class="picker-unit">04</div>
|
||||
<div class="picker-unit">05</div>
|
||||
<div class="picker-unit">06</div>
|
||||
<div class="picker-unit">07</div>
|
||||
<div class="picker-unit">08</div>
|
||||
<div class="picker-unit">09</div>
|
||||
<div class="picker-unit">10</div>
|
||||
<div class="picker-unit">11</div>
|
||||
<div class="picker-unit">12</div>
|
||||
<div class="picker-unit">13</div>
|
||||
<div class="picker-unit">14</div>
|
||||
<div class="picker-unit">15</div>
|
||||
<div class="picker-unit">16</div>
|
||||
<div class="picker-unit">17</div>
|
||||
<div class="picker-unit">18</div>
|
||||
<div class="picker-unit">19</div>
|
||||
<div class="picker-unit">20</div>
|
||||
<div class="picker-unit">21</div>
|
||||
<div class="picker-unit">22</div>
|
||||
<div class="picker-unit">23</div>
|
||||
<div class="picker-unit">24</div>
|
||||
<div class="picker-unit">25</div>
|
||||
<div class="picker-unit">26</div>
|
||||
<div class="picker-unit">27</div>
|
||||
<div class="picker-unit">28</div>
|
||||
<div class="picker-unit">29</div>
|
||||
<div class="picker-unit">30</div>
|
||||
<div class="picker-unit">31</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-picker-month-wrapper">
|
||||
<div style="transform: translateY(-392px);" class="value-picker-month">
|
||||
<div class="picker-unit">January</div>
|
||||
<div class="picker-unit">February</div>
|
||||
<div class="picker-unit">March</div>
|
||||
<div class="picker-unit">April</div>
|
||||
<div class="picker-unit">May</div>
|
||||
<div class="picker-unit">June</div>
|
||||
<div class="picker-unit">July</div>
|
||||
<div class="picker-unit">August</div>
|
||||
<div class="picker-unit">September</div>
|
||||
<div class="picker-unit">October</div>
|
||||
<div class="picker-unit">November</div>
|
||||
<div class="picker-unit">December</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-picker-year-wrapper">
|
||||
<div style="transform: translateY(-6328px);" class="value-picker-year">
|
||||
<div class="picker-unit">1900</div>
|
||||
<div class="picker-unit">1901</div>
|
||||
<div class="picker-unit">1902</div>
|
||||
<div class="picker-unit">1903</div>
|
||||
<div class="picker-unit">1904</div>
|
||||
<div class="picker-unit">1905</div>
|
||||
<div class="picker-unit">1906</div>
|
||||
<div class="picker-unit">1907</div>
|
||||
<div class="picker-unit">1908</div>
|
||||
<div class="picker-unit">1909</div>
|
||||
<div class="picker-unit">1910</div>
|
||||
<div class="picker-unit">1911</div>
|
||||
<div class="picker-unit">1912</div>
|
||||
<div class="picker-unit">1913</div>
|
||||
<div class="picker-unit">1914</div>
|
||||
<div class="picker-unit">1915</div>
|
||||
<div class="picker-unit">1916</div>
|
||||
<div class="picker-unit">1917</div>
|
||||
<div class="picker-unit">1918</div>
|
||||
<div class="picker-unit">1919</div>
|
||||
<div class="picker-unit">1920</div>
|
||||
<div class="picker-unit">1921</div>
|
||||
<div class="picker-unit">1922</div>
|
||||
<div class="picker-unit">1923</div>
|
||||
<div class="picker-unit">1924</div>
|
||||
<div class="picker-unit">1925</div>
|
||||
<div class="picker-unit">1926</div>
|
||||
<div class="picker-unit">1927</div>
|
||||
<div class="picker-unit">1928</div>
|
||||
<div class="picker-unit">1929</div>
|
||||
<div class="picker-unit">1930</div>
|
||||
<div class="picker-unit">1931</div>
|
||||
<div class="picker-unit">1932</div>
|
||||
<div class="picker-unit">1933</div>
|
||||
<div class="picker-unit">1934</div>
|
||||
<div class="picker-unit">1935</div>
|
||||
<div class="picker-unit">1936</div>
|
||||
<div class="picker-unit">1937</div>
|
||||
<div class="picker-unit">1938</div>
|
||||
<div class="picker-unit">1939</div>
|
||||
<div class="picker-unit">1940</div>
|
||||
<div class="picker-unit">1941</div>
|
||||
<div class="picker-unit">1942</div>
|
||||
<div class="picker-unit">1943</div>
|
||||
<div class="picker-unit">1944</div>
|
||||
<div class="picker-unit">1945</div>
|
||||
<div class="picker-unit">1946</div>
|
||||
<div class="picker-unit">1947</div>
|
||||
<div class="picker-unit">1948</div>
|
||||
<div class="picker-unit">1949</div>
|
||||
<div class="picker-unit">1950</div>
|
||||
<div class="picker-unit">1951</div>
|
||||
<div class="picker-unit">1952</div>
|
||||
<div class="picker-unit">1953</div>
|
||||
<div class="picker-unit">1954</div>
|
||||
<div class="picker-unit">1955</div>
|
||||
<div class="picker-unit">1956</div>
|
||||
<div class="picker-unit">1957</div>
|
||||
<div class="picker-unit">1958</div>
|
||||
<div class="picker-unit">1959</div>
|
||||
<div class="picker-unit">1960</div>
|
||||
<div class="picker-unit">1961</div>
|
||||
<div class="picker-unit">1962</div>
|
||||
<div class="picker-unit">1963</div>
|
||||
<div class="picker-unit">1964</div>
|
||||
<div class="picker-unit">1965</div>
|
||||
<div class="picker-unit">1966</div>
|
||||
<div class="picker-unit">1967</div>
|
||||
<div class="picker-unit">1968</div>
|
||||
<div class="picker-unit">1969</div>
|
||||
<div class="picker-unit">1970</div>
|
||||
<div class="picker-unit">1971</div>
|
||||
<div class="picker-unit">1972</div>
|
||||
<div class="picker-unit">1973</div>
|
||||
<div class="picker-unit">1974</div>
|
||||
<div class="picker-unit">1975</div>
|
||||
<div class="picker-unit">1976</div>
|
||||
<div class="picker-unit">1977</div>
|
||||
<div class="picker-unit">1978</div>
|
||||
<div class="picker-unit">1979</div>
|
||||
<div class="picker-unit">1980</div>
|
||||
<div class="picker-unit">1981</div>
|
||||
<div class="picker-unit">1982</div>
|
||||
<div class="picker-unit">1983</div>
|
||||
<div class="picker-unit">1984</div>
|
||||
<div class="picker-unit">1985</div>
|
||||
<div class="picker-unit">1986</div>
|
||||
<div class="picker-unit">1987</div>
|
||||
<div class="picker-unit">1988</div>
|
||||
<div class="picker-unit">1989</div>
|
||||
<div class="picker-unit">1990</div>
|
||||
<div class="picker-unit">1991</div>
|
||||
<div class="picker-unit">1992</div>
|
||||
<div class="picker-unit">1993</div>
|
||||
<div class="picker-unit">1994</div>
|
||||
<div class="picker-unit">1995</div>
|
||||
<div class="picker-unit">1996</div>
|
||||
<div class="picker-unit">1997</div>
|
||||
<div class="picker-unit">1998</div>
|
||||
<div class="picker-unit">1999</div>
|
||||
<div class="picker-unit">2000</div>
|
||||
<div class="picker-unit">2001</div>
|
||||
<div class="picker-unit">2002</div>
|
||||
<div class="picker-unit">2003</div>
|
||||
<div class="picker-unit">2004</div>
|
||||
<div class="picker-unit">2005</div>
|
||||
<div class="picker-unit">2006</div>
|
||||
<div class="picker-unit">2007</div>
|
||||
<div class="picker-unit">2008</div>
|
||||
<div class="picker-unit">2009</div>
|
||||
<div class="picker-unit">2010</div>
|
||||
<div class="picker-unit">2011</div>
|
||||
<div class="picker-unit">2012</div>
|
||||
<div class="picker-unit">2013</div>
|
||||
<div class="picker-unit">2014</div>
|
||||
<div class="picker-unit">2015</div>
|
||||
<div class="picker-unit">2016</div>
|
||||
<div class="picker-unit">2017</div>
|
||||
<div class="picker-unit">2018</div>
|
||||
<div class="picker-unit">2019</div>
|
||||
<div class="picker-unit">2020</div>
|
||||
<div class="picker-unit">2021</div>
|
||||
<div class="picker-unit">2022</div>
|
||||
<div class="picker-unit">2023</div>
|
||||
<div class="picker-unit">2024</div>
|
||||
<div class="picker-unit">2025</div>
|
||||
<div class="picker-unit">2026</div>
|
||||
<div class="picker-unit">2027</div>
|
||||
<div class="picker-unit">2028</div>
|
||||
<div class="picker-unit">2029</div>
|
||||
<div class="picker-unit">2030</div>
|
||||
<div class="picker-unit">2031</div>
|
||||
<div class="picker-unit">2032</div>
|
||||
<div class="picker-unit">2033</div>
|
||||
<div class="picker-unit">2034</div>
|
||||
<div class="picker-unit">2035</div>
|
||||
<div class="picker-unit">2036</div>
|
||||
<div class="picker-unit">2037</div>
|
||||
<div class="picker-unit">2038</div>
|
||||
<div class="picker-unit">2039</div>
|
||||
<div class="picker-unit">2040</div>
|
||||
<div class="picker-unit">2041</div>
|
||||
<div class="picker-unit">2042</div>
|
||||
<div class="picker-unit">2043</div>
|
||||
<div class="picker-unit">2044</div>
|
||||
<div class="picker-unit">2045</div>
|
||||
<div class="picker-unit">2046</div>
|
||||
<div class="picker-unit">2047</div>
|
||||
<div class="picker-unit">2048</div>
|
||||
<div class="picker-unit">2049</div>
|
||||
<div class="picker-unit">2050</div>
|
||||
<div class="picker-unit">2051</div>
|
||||
<div class="picker-unit">2052</div>
|
||||
<div class="picker-unit">2053</div>
|
||||
<div class="picker-unit">2054</div>
|
||||
<div class="picker-unit">2055</div>
|
||||
<div class="picker-unit">2056</div>
|
||||
<div class="picker-unit">2057</div>
|
||||
<div class="picker-unit">2058</div>
|
||||
<div class="picker-unit">2059</div>
|
||||
<div class="picker-unit">2060</div>
|
||||
<div class="picker-unit">2061</div>
|
||||
<div class="picker-unit">2062</div>
|
||||
<div class="picker-unit">2063</div>
|
||||
<div class="picker-unit">2064</div>
|
||||
<div class="picker-unit">2065</div>
|
||||
<div class="picker-unit">2066</div>
|
||||
<div class="picker-unit">2067</div>
|
||||
<div class="picker-unit">2068</div>
|
||||
<div class="picker-unit">2069</div>
|
||||
<div class="picker-unit">2070</div>
|
||||
<div class="picker-unit">2071</div>
|
||||
<div class="picker-unit">2072</div>
|
||||
<div class="picker-unit">2073</div>
|
||||
<div class="picker-unit">2074</div>
|
||||
<div class="picker-unit">2075</div>
|
||||
<div class="picker-unit">2076</div>
|
||||
<div class="picker-unit">2077</div>
|
||||
<div class="picker-unit">2078</div>
|
||||
<div class="picker-unit">2079</div>
|
||||
<div class="picker-unit">2080</div>
|
||||
<div class="picker-unit">2081</div>
|
||||
<div class="picker-unit">2082</div>
|
||||
<div class="picker-unit">2083</div>
|
||||
<div class="picker-unit">2084</div>
|
||||
<div class="picker-unit">2085</div>
|
||||
<div class="picker-unit">2086</div>
|
||||
<div class="picker-unit">2087</div>
|
||||
<div class="picker-unit">2088</div>
|
||||
<div class="picker-unit">2089</div>
|
||||
<div class="picker-unit">2090</div>
|
||||
<div class="picker-unit">2091</div>
|
||||
<div class="picker-unit">2092</div>
|
||||
<div class="picker-unit">2093</div>
|
||||
<div class="picker-unit">2094</div>
|
||||
<div class="picker-unit">2095</div>
|
||||
<div class="picker-unit">2096</div>
|
||||
<div class="picker-unit">2097</div>
|
||||
<div class="picker-unit">2098</div>
|
||||
<div class="picker-unit">2099</div></div>
|
||||
</div>
|
||||
<div class="value-indicator"></div>
|
||||
</div>
|
||||
|
||||
<menu>
|
||||
<button>Cancel</button>
|
||||
<button class="affirmative">OK</button>
|
||||
</menu>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
62
gaia/shared/style/dialer/dialer.css
Executable file
62
gaia/shared/style/dialer/dialer.css
Executable file
|
|
@ -0,0 +1,62 @@
|
|||
* {
|
||||
/* By default do not allow any user text selection, only enable for certain
|
||||
parts on a per-element/region area. We are enabling this at the * level
|
||||
as opposed to the body level as the -moz-user-select attribute is not
|
||||
inherited by absolute positioned elements and dialer has several
|
||||
elements that are absolute positioned that should be non-selectable. */
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
html,body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
color: white;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#call-log-view > div {
|
||||
background-color: white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.font-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:hover, a:active, a:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.contact-primary-info {
|
||||
font-size: calc(15 * 0.226rem);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.contact-secondary-info {
|
||||
font-size: calc(6 * 0.226rem);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.grid-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.hidden *[data-l10n-id] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
370
gaia/shared/style/dialer/keypad.css
Executable file
370
gaia/shared/style/dialer/keypad.css
Executable file
|
|
@ -0,0 +1,370 @@
|
|||
/*
|
||||
* The code is being shared between system/emergency-call/js/keypad.js
|
||||
* and dialer/js/keypad.js. Be sure to update both files when you commit!
|
||||
*
|
||||
* BiDi note: keypads are always displayed in LTR (hardware legacy).
|
||||
* This stylesheet must *NOT* be mirrored for RTL.
|
||||
*/
|
||||
|
||||
.reset-button {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.reset-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#phone-number-view-container {
|
||||
width: 100%;
|
||||
height: 28%;
|
||||
background: var(--header-background);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
font-weight: 300;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#phone-number-view-container .phone-number-view-wrapper-input {
|
||||
width: 100%;
|
||||
margin-bottom: 4.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem 0 2rem;
|
||||
}
|
||||
|
||||
#phone-number-view-container.keypad-visible {
|
||||
height: calc(100% - 34.5rem);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#phone-number-view {
|
||||
font-size: 4.1rem;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
color: var(--header-color);
|
||||
text-align: left;
|
||||
cursor: none;
|
||||
padding: 0;
|
||||
pointer-events: auto;
|
||||
-moz-user-select: text;
|
||||
}
|
||||
|
||||
#fake-phone-number-view {
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
line-height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#keypad-delete {
|
||||
margin-bottom: 4.5rem;
|
||||
padding: 0 2.5rem 0 0;
|
||||
visibility: hidden;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#keypad-delete::before {
|
||||
content: "";
|
||||
background: url('keypad/images/keypad/actionicon_dialer_delete.png') no-repeat;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
display: inline-block;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#keypad-delete:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#keyboard-container {
|
||||
height: 72%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
#keypad {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.keypad-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.keypad-key {
|
||||
display: table-cell;
|
||||
padding: 1.3rem 0 0 2rem;
|
||||
box-sizing: border-box;
|
||||
height: 20%;
|
||||
vertical-align: middle;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
font-size: 5rem;
|
||||
line-height: 1rem;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.keypad-key span {
|
||||
width: 1.5rem;
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.keypad-key em {
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
color: #038282;
|
||||
font-style: normal;
|
||||
width: 4.5rem;
|
||||
overflow: visible;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.keypad-key.active {
|
||||
background: #94eee9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.keypad-key * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#keypad-delete * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.keypad-key .font-size-plus {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.keypad-subicon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
-moz-user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.voicemail {
|
||||
background-image: url('keypad/images/keypad/actionicon_dialer_voicemail.png');
|
||||
background-size: 3rem;
|
||||
background-position: -0.4rem -0.1rem;
|
||||
}
|
||||
|
||||
.asterisk {
|
||||
width: 4rem;
|
||||
margin-top: 1rem;
|
||||
margin-left: 0.2rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sharp {
|
||||
font-size: 4.5rem;
|
||||
width: 4rem;
|
||||
line-height: 0;
|
||||
margin-top: -0.5rem;
|
||||
margin-left: 0.2rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#keypad-callbar {
|
||||
height: 20%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.keypad-callbar-button {
|
||||
position: relative;
|
||||
width: 9rem;
|
||||
background: #e7e7e7;
|
||||
background-size: auto 100%;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
height: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.keypad-callbar-button.cancel {
|
||||
background: #575757;
|
||||
line-height: 4rem;
|
||||
font-size: 1.8rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.keypad-callbar-button.cancel:active {
|
||||
background: #9ef2e7;
|
||||
}
|
||||
|
||||
#keypad-callbar-call-action {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
background-image: url("keypad/images/keypad/actionicon_activecall_pickup.png");
|
||||
background-color: #00adad;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 4rem 4rem;
|
||||
border-radius: 2rem;
|
||||
margin-inline-start: 1rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
#keypad-callbar-call-action:active {
|
||||
background-color: #94eee9;
|
||||
}
|
||||
|
||||
.icon-add-contact::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: url("keypad/images/keypad/actionicon_activecall_addcontact_40x80.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
background-size: 4rem 8rem;
|
||||
}
|
||||
|
||||
/* we won't do anything on click but this prevents fluffing/rendering issues */
|
||||
.icon-add-contact:disabled {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.icon-add-contact:disabled::before {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.icon-add-contact:not(:disabled):active::before {
|
||||
background-position: center -4rem;
|
||||
}
|
||||
|
||||
.js-sim-indication {
|
||||
display: none;
|
||||
font-size: 1.3rem;
|
||||
text-align: right;
|
||||
margin-right: 0.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.has-preferred-sim .js-sim-indication {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.has-preferred-sim #keypad-callbar-call-action:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1.4rem;
|
||||
height: 1rem;
|
||||
bottom: 0;
|
||||
right: 1.7rem;
|
||||
background-image: url("/shared/elements/gaia_sim_picker/images/long-tap-indicator.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.4rem 1rem;
|
||||
}
|
||||
|
||||
#keypad-hidebar {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 7.5rem;
|
||||
}
|
||||
|
||||
.kh__button {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background: #ded9d6;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
margin-top: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.kh__button::before {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
left: .5rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.kh__button:active::before {
|
||||
background-position: 0 -4rem;
|
||||
}
|
||||
|
||||
.kh__button:active {
|
||||
background-color: #9ef2e7;
|
||||
}
|
||||
|
||||
.kh__button.active-state::before {
|
||||
background-position: 0 -8rem;
|
||||
}
|
||||
|
||||
.kh__button--mute::before {
|
||||
background-image: url('keypad/images/keypad/actionicon_activecall_mute.png');
|
||||
}
|
||||
|
||||
.kh__button--hide::before {
|
||||
background-image: url('keypad/images/keypad/actionicon_activecall_dismisskeyboard.png');
|
||||
}
|
||||
|
||||
.kh__call-end-button {
|
||||
width: 6.5rem;
|
||||
height: 6.5rem;
|
||||
background: #e00;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.kh__call-end-button::before {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 1.1rem;
|
||||
left: 1.2rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
background-image: url('keypad/images/actionicon_activecall_hangup.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.kh__call-end-button:active::before {
|
||||
background-position: 1.2rem 6rem;
|
||||
}
|
||||
|
||||
.phone-number-font {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_dismisskeyboard.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_dismisskeyboard.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 311 B |
Binary file not shown.
|
After Width: | Height: | Size: 427 B |
Binary file not shown.
|
After Width: | Height: | Size: 345 B |
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
Binary file not shown.
|
After Width: | Height: | Size: 319 B |
Binary file not shown.
|
After Width: | Height: | Size: 426 B |
Binary file not shown.
|
After Width: | Height: | Size: 345 B |
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_hangup.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_hangup.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_hangup@1.5x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_hangup@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 344 B |
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_hangup@2.25x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_hangup@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_hangup@2x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_hangup@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 435 B |
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_pickup.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_pickup.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_pickup@1.5x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_pickup@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 354 B |
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_pickup@2.25x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_pickup@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_pickup@2x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/actionicon_activecall_pickup@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 437 B |
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
Binary file not shown.
|
After Width: | Height: | Size: 557 B |
Binary file not shown.
|
After Width: | Height: | Size: 838 B |
Binary file not shown.
|
After Width: | Height: | Size: 741 B |
Binary file not shown.
|
After Width: | Height: | Size: 600 B |
Binary file not shown.
|
After Width: | Height: | Size: 990 B |
Binary file not shown.
|
After Width: | Height: | Size: 852 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_activecall_mute.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_activecall_mute.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 799 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_activecall_mute@2x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_activecall_mute@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_activecall_pickup.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_activecall_pickup.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
Binary file not shown.
|
After Width: | Height: | Size: 354 B |
Binary file not shown.
|
After Width: | Height: | Size: 467 B |
Binary file not shown.
|
After Width: | Height: | Size: 429 B |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_delete.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_delete.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 234 B |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_delete@1.5x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_delete@1.5x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 300 B |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_delete@2.25x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_delete@2.25x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 476 B |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_delete@2x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_delete@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 385 B |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_voicemail.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_voicemail.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 290 B |
Binary file not shown.
|
After Width: | Height: | Size: 444 B |
Binary file not shown.
|
After Width: | Height: | Size: 685 B |
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_voicemail@2x.png
Executable file
BIN
gaia/shared/style/dialer/keypad/images/keypad/actionicon_dialer_voicemail@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 567 B |
59
gaia/shared/style/dialer/overlay.css
Executable file
59
gaia/shared/style/dialer/overlay.css
Executable file
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
* Extend action menu as an overlay
|
||||
*/
|
||||
form.overlay {
|
||||
font-size: 1.5rem;
|
||||
opacity: 1;
|
||||
visibility: hidden;
|
||||
transform: translateY(-100%);
|
||||
transition: transform var(--transition-duration) ease-in-out,
|
||||
visibility var(--transition-duration);
|
||||
}
|
||||
|
||||
form.overlay > menu {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
form.overlay.display {
|
||||
transform: translateY(0%);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
form.overlay menu ul {
|
||||
height: calc(100% - 13rem);
|
||||
overflow: auto;
|
||||
margin-top: 5rem;
|
||||
padding: 0;
|
||||
line-height: 2.4rem;
|
||||
list-style: none outside none;
|
||||
}
|
||||
|
||||
form.overlay menu ul > li,
|
||||
form.overlay menu ul > section {
|
||||
height: 4.5rem;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.7rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form.overlay menu ul > li:after,
|
||||
form.overlay menu ul > section:after {
|
||||
content: ' ';
|
||||
border-bottom: 0.1rem solid #666;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
bottom: 0;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
form.overlay menu ul > li:last-child:after,
|
||||
form.overlay menu ul > section:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form.overlay menu ul > li:active,
|
||||
form.overlay menu ul > section:active {
|
||||
background-color: #00ABCC;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
254
gaia/shared/style/drawer.css
Executable file
254
gaia/shared/style/drawer.css
Executable file
|
|
@ -0,0 +1,254 @@
|
|||
/* ----------------------------------
|
||||
* Drawer
|
||||
* ---------------------------------- */
|
||||
|
||||
/* Main region */
|
||||
section[role="region"] {
|
||||
width: 100%;
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
section[role="region"]:target {
|
||||
transform: translateX(80%);
|
||||
}
|
||||
|
||||
/* Hide anchor to change target */
|
||||
section[role="region"] > header:first-child > a:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
section[role="region"]:target > header:first-child > a:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
section[role="region"] > header:first-child > a:last-of-type {
|
||||
display: block;
|
||||
}
|
||||
section[role="region"]:target > header:first-child > a:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Sidebar */
|
||||
section[data-type="sidebar"] {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
background: url(drawer/images/ui/pattern.png) repeat;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar header */
|
||||
section[data-type="sidebar"] > header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: 5rem;
|
||||
color: #fff;
|
||||
background: url(drawer/images/ui/header.png) repeat-x left bottom / 100% auto;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > header:after {
|
||||
content: "";
|
||||
height: 0.3rem;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: url(drawer/images/ui/shadow_header.png) repeat-x left top;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > header h1 {
|
||||
font-size: 2.2rem;
|
||||
line-height: 4.8rem;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 3rem;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > header h1 em {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
/* Generic set of actions in toolbar */
|
||||
section[data-type="sidebar"] > header menu[type="toolbar"] {
|
||||
height: 100%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > header menu[type="toolbar"] a,
|
||||
section[data-type="sidebar"] > header menu[type="toolbar"] button {
|
||||
height: 4.9rem;
|
||||
line-height: 4.9rem;
|
||||
float: left;
|
||||
background: none;
|
||||
padding: 0 1.75rem;
|
||||
-moz-box-sizing: border-box;
|
||||
min-width: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > header menu[type="toolbar"] a:last-child,
|
||||
section[data-type="sidebar"] > header menu[type="toolbar"] button:last-child {
|
||||
background: url(drawer/images/ui/separator.png) no-repeat left center / auto 3.1rem;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > header menu[type="toolbar"] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > header a,
|
||||
section[data-type="sidebar"] > header button {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.1em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > header a:first-letter,
|
||||
section[data-type="sidebar"] > header button:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Icon definitions */
|
||||
section[data-type="sidebar"] > header .icon {
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 4.9rem;
|
||||
margin: 0 -1rem;
|
||||
background: transparent no-repeat center center / 100% auto;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"]:after {
|
||||
content: "";
|
||||
width: 1rem;
|
||||
background: url(drawer/images/ui/shadow.png) right top repeat-y;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > nav {
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
margin-right: -0.8rem;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > nav > h2 {
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
line-height: 3.3rem;
|
||||
text-indent: 3rem;
|
||||
color: #fff;
|
||||
background: url(drawer/images/ui/pattern_subheader.png) repeat left top;
|
||||
border-bottom: 0.1rem solid #596068;
|
||||
margin: 0;
|
||||
padding-right: 0.8rem;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] [role="toolbar"] {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > nav > ul {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > nav > ul > li {
|
||||
color: #fff;
|
||||
list-style: none;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > nav > ul > li:active {
|
||||
background: #00ABCC;
|
||||
}
|
||||
|
||||
section[data-type="sidebar"] > nav > ul > li > a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 1.6rem;
|
||||
line-height: 4.35rem;
|
||||
border-bottom: 0.1rem solid #596068;
|
||||
text-indent: 3rem;
|
||||
padding-right: 0.8rem;
|
||||
width: 100%;
|
||||
-moz-box-sizing: border-box;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* RTL View */
|
||||
|
||||
html[dir="rtl"] section[role="region"]:target {
|
||||
transform: translateX(-80%);
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
html[dir="rtl"] section[data-type="sidebar"] {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Sidebar header */
|
||||
html[dir="rtl"] section[data-type="sidebar"] > header {
|
||||
background-position: right bottom;
|
||||
}
|
||||
|
||||
html[dir="rtl"] section[data-type="sidebar"] > header:after {
|
||||
background-position: right top;
|
||||
}
|
||||
|
||||
html[dir="rtl"] section[data-type="sidebar"] > header h1 {
|
||||
text-align: right;
|
||||
margin: 0 3rem 0 0;
|
||||
}
|
||||
|
||||
/* Generic set of actions in toolbar */
|
||||
html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] a,
|
||||
html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] button {
|
||||
float: left;
|
||||
}
|
||||
|
||||
html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] a:last-child,
|
||||
html[dir="rtl"] section[data-type="sidebar"] > header menu[type="toolbar"] button:last-child {
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
html[dir="rtl"] section[data-type="sidebar"]:after {
|
||||
background-image: url(drawer/images/ui/shadow_rtl.png);
|
||||
background-position: left top;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
html[dir="rtl"] section[data-type="sidebar"] > nav > h2 {
|
||||
background-position: right top;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: unset;
|
||||
}
|
||||
BIN
gaia/shared/style/drawer/images/icons/menu.png
Executable file
BIN
gaia/shared/style/drawer/images/icons/menu.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 119 B |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue