Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
|
|
@ -0,0 +1,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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 245 B |
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
|
|
@ -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>
|
||||
|
||||
|
|
@ -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%);}
|
||||
}
|
||||
|
|
@ -0,0 +1,428 @@
|
|||
/* ----------------------------------
|
||||
* Buttons
|
||||
* ---------------------------------- */
|
||||
|
||||
.button::-moz-focus-inner,
|
||||
.bb-button::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button,
|
||||
.bb-button,
|
||||
.button {
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0 1.2rem;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: #d8d8d8;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 4rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Recommend */
|
||||
button.recommend,
|
||||
.bb-button.recommend {
|
||||
background-color: #00caf2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
button.danger,
|
||||
.danger.bb-button {
|
||||
background-color: #e51e1e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pressed */
|
||||
button:active,
|
||||
.bb-button:active,
|
||||
.button:active {
|
||||
background-color: #b2f2ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
button[data-icon],
|
||||
.bb-button[data-icon],
|
||||
.button[data-icon] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button[data-icon]:before,
|
||||
.bb-button[data-icon]:before,
|
||||
.button[data-icon]:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -1.5rem;
|
||||
offset-inline-end: 1.5rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
button[data-icon]:active:before,
|
||||
.bb-button[data-icon]:active:before,
|
||||
.button[data-icon]:active:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pressed with dark skin */
|
||||
.skin-dark button:active,
|
||||
.skin-dark .bb-button:active,
|
||||
.skin-dark .button:active {
|
||||
background-color: #00aacc;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
button[disabled],
|
||||
.bb-button[aria-disabled="true"],
|
||||
.button[aria-disabled="true"] {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
color: #c7c7c7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button[disabled].recommend,
|
||||
.bb-button[aria-disabled="true"].recommend,
|
||||
.button[aria-disabled="true"].recommend {
|
||||
background-color: #97cbd5;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
button[disabled].danger,
|
||||
.bb-button[aria-disabled="true"].danger,
|
||||
.button[aria-disabled="true"].danger {
|
||||
background-color: #eb7474;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
/* Disabled with dark background */
|
||||
.skin-dark button[disabled],
|
||||
.skin-dark .button[aria-disabled="true"],
|
||||
.skin-dark .bb-button[aria-disabled="true"] {
|
||||
background-color: #565656;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
.skin-dark button[disabled].recommend,
|
||||
.skin-dark .button[aria-disabled="true"].recommend,
|
||||
.skin-dark .bb-button[aria-disabled="true"].recommend {
|
||||
background-color: #006579;
|
||||
}
|
||||
|
||||
.skin-dark button[disabled].danger,
|
||||
.skin-dark .button[aria-disabled="true"].danger,
|
||||
.skin-dark .bb-button[aria-disabled="true"].danger {
|
||||
background-color: #730f0f;
|
||||
}
|
||||
|
||||
button[disabled]::-moz-selection,
|
||||
.button[aria-disabled="true"]::-moz-selection,
|
||||
.bb-button[aria-disabled="true"]::-moz-selection {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
* Buttons inside lists
|
||||
* ---------------------------------- */
|
||||
|
||||
li button,
|
||||
li .bb-button,
|
||||
li .button {
|
||||
position: relative;
|
||||
border: 0.1rem solid #c7c7c7;
|
||||
background: rgba(0,0,0,0.05);
|
||||
margin: 0 0 1rem;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
height: auto;
|
||||
min-height: 4rem;
|
||||
text-overflow: initial;
|
||||
white-space: normal;
|
||||
line-height: 2rem;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
html[dir="ltr"] li button,
|
||||
html[dir="ltr"] li .bb-button,
|
||||
html[dir="ltr"] li .button {
|
||||
text-align: left;
|
||||
}
|
||||
html[dir="rtl"] li button,
|
||||
html[dir="rtl"] li .bb-button,
|
||||
html[dir="rtl"] li .button {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Press */
|
||||
li .bb-button:active:after,
|
||||
li .button:active:after,
|
||||
li button:active:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
li button:disabled,
|
||||
li .bb-button[aria-disabled="true"],
|
||||
li .button[aria-disabled="true"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
li button.icon,
|
||||
li .bb-button.icon,
|
||||
li .button.icon {
|
||||
padding-inline-end: 4rem;
|
||||
}
|
||||
|
||||
li button.icon:before,
|
||||
li .bb-button.icon:before,
|
||||
li .button.icon:before {
|
||||
content: "";
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
offset-inline-end: 0.5rem;
|
||||
margin-top: -1.5rem;
|
||||
background: transparent no-repeat center center / 100% auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
li button[data-icon]:before,
|
||||
li .bb-button[data-icon]:before,
|
||||
li .button[data-icon]:before {
|
||||
offset-inline-end: 1rem;
|
||||
}
|
||||
|
||||
li button.icon-view:active,
|
||||
li .bb-button.icon-view:active,
|
||||
li .button.icon-view:active {
|
||||
background-color: #b2f2ff;
|
||||
}
|
||||
|
||||
li button[data-icon="expand"]:before,
|
||||
li .bb-button[data-icon="expand"]:before,
|
||||
li .button[data-icon="expand"]:before {
|
||||
color: #00aac5;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
li button[data-icon="expand"][disabled]:before,
|
||||
li .bb-button[data-icon="expand"][aria-disabled="true"]:before,
|
||||
li .button[data-icon="expand"][aria-disabled="true"]:before {
|
||||
color: #A9A9A9;
|
||||
}
|
||||
|
||||
li button[data-icon="forward"]:before,
|
||||
li .bb-button[data-icon="forward"]:before,
|
||||
li .button[data-icon="forward"]:before {
|
||||
color: #686f72;
|
||||
}
|
||||
|
||||
/* Getting more space for text, as icon is shorter */
|
||||
li button.icon-dialog,
|
||||
li .bb-button.icon-dialog,
|
||||
li .button.icon-dialog {
|
||||
padding-inline-end: 3rem;
|
||||
}
|
||||
|
||||
li button.icon-dialog:before,
|
||||
li .bb-button.icon-dialog:before,
|
||||
li .button.icon-dialog:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: auto;
|
||||
offset-inline-end: 0.8rem;
|
||||
bottom: 0.5rem;
|
||||
border-top: 0.7rem solid transparent;
|
||||
border-bottom: 0.7rem solid transparent;
|
||||
border-inline-start: 0.7rem solid #00aac5;
|
||||
z-index: 1;
|
||||
}
|
||||
html[dir="ltr"] li button.icon-dialog:before,
|
||||
html[dir="ltr"] li .bb-button.icon-dialog:before,
|
||||
html[dir="ltr"] li .button.icon-dialog:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
html[dir="rtl"] li button.icon-dialog:before,
|
||||
html[dir="rtl"] li .bb-button.icon-dialog:before,
|
||||
html[dir="rtl"] li .button.icon-dialog:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
li button.icon-dialog:disabled:before,
|
||||
li .bb-button[aria-disabled="true"].icon-dialog:before,
|
||||
li .button[aria-disabled="true"].icon-dialog:before {
|
||||
border-inline-start: 0.7rem solid #a9a9a9;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
* Theme: Dark
|
||||
* ---------------------------------- */
|
||||
|
||||
.skin-dark li button,
|
||||
.skin-dark li .bb-button,
|
||||
.skin-dark li .button {
|
||||
background-color: #454545;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.skin-dark li button:active,
|
||||
.skin-dark li .button:active,
|
||||
.skin-dark li .bb-button:active {
|
||||
background-color: #00aacc;
|
||||
}
|
||||
|
||||
.skin-dark li button.icon-view:active,
|
||||
.skin-dark li .button.icon-view:active,
|
||||
.skin-dark li .bb-button.icon-view:active {
|
||||
background-color: #00aacc;
|
||||
}
|
||||
|
||||
.skin-dark li button.icon-dialog:active:before,
|
||||
.skin-dark li .bb-button.icon-dialog:active:before,
|
||||
.skin-dark li .button.icon-dialog:active:before {
|
||||
border-inline-start: 0.7rem solid #b2f2ff;
|
||||
}
|
||||
|
||||
.skin-dark li button:disabled,
|
||||
.skin-dark li .bb-button[aria-disabled="true"],
|
||||
.skin-dark li .button[aria-disabled="true"] {
|
||||
background-color: #454545;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Inputs inside of .button */
|
||||
.button input,
|
||||
body[role="application"] .bb-button input,
|
||||
body[role="application"] .button input {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* select */
|
||||
select {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
font-size: 1.6rem;
|
||||
color: #333;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
padding-inline-start: 1.1rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
height: 4rem;
|
||||
border: 0.1rem solid #c7c7c7;
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.skin-dark select {
|
||||
background-color: rgba(87, 87, 87, 0.8);
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* remove dotted outline */
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #333;
|
||||
}
|
||||
|
||||
.skin-dark select:-moz-focusring {
|
||||
text-shadow: 0 0 0 #fff;
|
||||
}
|
||||
|
||||
/* Hides dropdown arrow until bug #649849 is fixed */
|
||||
.bb-button.icon select,
|
||||
.button.icon select,
|
||||
.bb-button[data-icon] select,
|
||||
.button[data-icon] select {
|
||||
position: absolute;
|
||||
top: -0.6rem;
|
||||
offset-inline-start: 0;
|
||||
width: calc(100% + 3rem);
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-inline-end: 5rem;
|
||||
text-indent: 0;
|
||||
font-weight: 400;
|
||||
font-size: 1.7rem;
|
||||
color: rgba(0,0,0,0);
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
/**
|
||||
* The select element uses the text color to determine the color of the outline.
|
||||
* We put a text shadow with needed offset and no blur, so that replaces the text.
|
||||
*/
|
||||
html[dir="ltr"] .bb-button.icon select,
|
||||
html[dir="ltr"] .button.icon select,
|
||||
html[dir="ltr"] .bb-button[data-icon] select,
|
||||
html[dir="ltr"] .button[data-icon] select,
|
||||
html[dir="ltr"] .bb-button.icon-dialog select,
|
||||
html[dir="ltr"] .button.icon-dialog select {
|
||||
text-shadow: 1rem 0.5rem 0 #333;
|
||||
}
|
||||
html[dir="rtl"] .bb-button.icon select,
|
||||
html[dir="rtl"] .button.icon select,
|
||||
html[dir="rtl"] .bb-button[data-icon] select,
|
||||
html[dir="rtl"] .button[data-icon] select,
|
||||
html[dir="rtl"] .bb-button.icon-dialog select,
|
||||
html[dir="rtl"] .button.icon-dialog select {
|
||||
text-shadow: -1rem 0.5rem 0 #333;
|
||||
}
|
||||
|
||||
.bb-button.icon select option,
|
||||
.button.icon select option,
|
||||
.bb-button[data-icon] select option,
|
||||
.button[data-icon] select option {
|
||||
color: #000;
|
||||
border: 0;
|
||||
padding: 0.6rem 1.3rem;
|
||||
text-shadow: 0 0 0 rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.bb-button.icon-dialog,
|
||||
.button.icon-dialog {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .skin-dark .bb-button.icon select,
|
||||
html[dir="ltr"] .skin-dark .button.icon select,
|
||||
html[dir="ltr"] .skin-dark .bb-button[data-icon] select,
|
||||
html[dir="ltr"] .skin-dark .button[data-icon] select,
|
||||
html[dir="ltr"] .skin-dark .bb-button.icon-dialog select,
|
||||
html[dir="ltr"] .skin-dark .button.icon-dialog select {
|
||||
text-shadow: 1rem 0.5rem 0 #fff;
|
||||
}
|
||||
html[dir="rtl"] .skin-dark .bb-button.icon select,
|
||||
html[dir="rtl"] .skin-dark .button.icon select,
|
||||
html[dir="rtl"] .skin-dark .bb-button[data-icon] select,
|
||||
html[dir="rtl"] .skin-dark .button[data-icon] select,
|
||||
html[dir="rtl"] .skin-dark .bb-button.icon-dialog select,
|
||||
html[dir="rtl"] .skin-dark .button.icon-dialog select {
|
||||
text-shadow: -1rem 0.5rem 0 #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>
|
||||
|
After Width: | Height: | Size: 294 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 11.698,19.66 5.056,-5.057 -5.056,-5.056 c 0.31,-0.516 0.62,-1.032 0.93,-1.34 L 18.3,13.88 v 1.652 l -5.675,5.676 c -0.31,-0.515 -0.722,-0.928 -0.93,-1.547 z"/></svg>
|
||||
|
After Width: | Height: | Size: 292 B |
|
|
@ -0,0 +1,280 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Buttons</title>
|
||||
<link rel="stylesheet" href="../buttons.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
|
||||
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code,
|
||||
- they are not needed for the real case.
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
label.bb-docs {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -0.1rem 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem 3rem;
|
||||
border: solid 0.1rem #e8e8e8;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
div.bb-docs {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
div.bb-docs.skin-organic {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
div.bb-docs.skin-dark {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body[role="application"] > [role="region"] {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.getElementById('dir').checked = false;
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body role="application">
|
||||
<p dir="ltr">
|
||||
<label class="bb-docs">
|
||||
<input id="dir" type="checkbox" checked="false"
|
||||
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
|
||||
RTL mode
|
||||
</label>
|
||||
</p>
|
||||
<h2 class="bb-docs">Special buttons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button>Default</button>
|
||||
<button class="recommend">Recommend</button>
|
||||
<button class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Buttons with icons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">Default</button>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="" class="recommend">Recommend</button>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="" class="danger">Danger</button>
|
||||
<button data-icon="forward-light" aria-label="forward-light" data-l10n-id="">Default</button>
|
||||
<button data-icon="back" aria-label="back" data-l10n-id="">Default</button>
|
||||
<button data-icon="back-light" aria-label="back-light" data-l10n-id="">Default</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<button disabled>Default</button>
|
||||
<a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
|
||||
<button disabled class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<button>Default</button>
|
||||
<button class="recommend">Recommend</button>
|
||||
<button class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<button disabled>Default</button>
|
||||
<a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
|
||||
<button disabled class="danger">Danger</button>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">List buttons</h2>
|
||||
<div class="bb-docs skin-organic">
|
||||
<ul>
|
||||
<li>
|
||||
<button>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled>Disabled</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-view">
|
||||
Icon view button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog">
|
||||
Icon dialog button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<span class="button icon icon-dialog">
|
||||
<select>
|
||||
<option selected>Icon dialog with options</option>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog" disabled>
|
||||
Icon dialog button disabled
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin Dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<ul>
|
||||
<li>
|
||||
<button>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled>Disabled</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog">
|
||||
Dark icon dialog button
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
|
||||
Side navigation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
|
||||
Tuesday Sept. 18, 2012
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Select</h2>
|
||||
<div class="bb-docs">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Fake select</h2>
|
||||
<div class="bb-docs">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Disabled select</h2>
|
||||
<div class="bb-docs">
|
||||
<ul>
|
||||
<li>
|
||||
<span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin dark</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Fake select</h2>
|
||||
<div class="bb-docs skin-dark">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
|
||||
<select>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
/* ----------------------------------
|
||||
* Confirm
|
||||
* ---------------------------------- */
|
||||
|
||||
/* Main dialog setup */
|
||||
form[role="dialog"][data-type="confirm"] {
|
||||
background: #2d2d2d;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: 7rem;
|
||||
font-size: 0;
|
||||
/* Using font-size: 0; we avoid the unwanted visual space (about 3px)
|
||||
created by white-spaces and break lines in the code betewen inline-block elements */
|
||||
color: #fff;
|
||||
}
|
||||
html[dir="ltr"] form[role="dialog"][data-type="confirm"] { text-align: left; }
|
||||
html[dir="rtl"] form[role="dialog"][data-type="confirm"] { text-align: right; }
|
||||
|
||||
form[role="dialog"][data-type="confirm"]:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
margin-inline-start: -0.1rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] > section {
|
||||
font-weight: 300;
|
||||
font-size: 2.2rem;
|
||||
color: #FAFAFA;
|
||||
padding: 0 1.5rem;
|
||||
box-sizing: padding-box;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
overflow-y: scroll;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] h1 {
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.5em;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
padding: 1rem 1.5rem 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Menu & buttons setup */
|
||||
form[role="dialog"][data-type="confirm"] menu {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 1.5rem;
|
||||
background: #4d4d4d;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] menu button::-moz-focus-inner {
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-top: -0.2rem; /* To fix line-height bug (697451) */
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] menu button {
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0 0.2rem;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: #d8d8d8;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 4rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Recommend */
|
||||
form[role="dialog"][data-type="confirm"] menu button.recommend {
|
||||
background-color: #00caf2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
form[role="dialog"][data-type="confirm"] menu button.danger {
|
||||
background-color: #e51e1e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pressed */
|
||||
form[role="dialog"][data-type="confirm"] menu button:active {
|
||||
background: #00aacc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
form[role="dialog"][data-type="confirm"] > menu > button[disabled] {
|
||||
background-color: #565656;
|
||||
color: rgba(255,255,255,0.4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] > menu > button[disabled].recommend {
|
||||
background-color: #006579;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] > menu > button[disabled].danger {
|
||||
background-color: #730f0f;
|
||||
}
|
||||
|
||||
button[disabled]::-moz-selection {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] menu button {
|
||||
margin: 0;
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] menu button:last-child {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
** Specific component code
|
||||
**
|
||||
** 1. Text in confirm dialog should not be selectable.
|
||||
*/
|
||||
form[role="dialog"][data-type="confirm"] p:nth-child(2) {
|
||||
margin: 1rem 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p {
|
||||
word-wrap: break-word;
|
||||
margin: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 0.1rem solid #686868;
|
||||
line-height: 3rem;
|
||||
-moz-user-select: none; /* 1 */
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p > span {
|
||||
font-size: 1.5rem;
|
||||
display: block;
|
||||
line-height: 1.7rem;
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p img {
|
||||
margin-inline-end: 2rem;
|
||||
}
|
||||
html[dir="ltr"] form[role="dialog"][data-type="confirm"] p img { float: left; }
|
||||
html[dir="rtl"] form[role="dialog"][data-type="confirm"] p img { float: right; }
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p strong {
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] p small {
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: #cbcbcb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] dl {
|
||||
border-top: 0.1rem solid #686868;
|
||||
margin: 1rem 0 0;
|
||||
overflow: hidden;
|
||||
padding-top: 1rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] dl > dt {
|
||||
clear: both;
|
||||
width: 7rem;
|
||||
padding-inline-start: 1.5rem;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
html[dir="ltr"] form[role="dialog"][data-type="confirm"] dl > dt { float: left; }
|
||||
html[dir="rtl"] form[role="dialog"][data-type="confirm"] dl > dt { float: right; text-align: right; }
|
||||
|
||||
form[role="dialog"][data-type="confirm"] dl > dd {
|
||||
padding-inline-end: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] dl > dd > div {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] figure {
|
||||
margin: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] figure img {
|
||||
padding-inline-end: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] figure figcaption {
|
||||
font-size: 2.1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] ul {
|
||||
margin: 0;
|
||||
padding: 2rem 1.5rem;
|
||||
border-top: 0.1rem solid #686868;
|
||||
list-style: none;
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] ul li {
|
||||
word-wrap: break-word;
|
||||
line-height: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] ul li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
form[role="dialog"][data-type="confirm"] ul li ul {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Confirm</title>
|
||||
<meta name="description" content="Prompts user to take action">
|
||||
|
||||
<link rel="stylesheet" href="../confirm.css">
|
||||
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code;
|
||||
- they are not required for the real use case.
|
||||
-->
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
#dir {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
direction: ltr;
|
||||
background-color: white;
|
||||
}
|
||||
#dir input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var input = document.querySelector('#dir input');
|
||||
input.checked = false;
|
||||
input.onchange = function() {
|
||||
document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<label id="dir">
|
||||
<input type="checkbox"> RTL mode
|
||||
</label>
|
||||
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<h1>Confirmation</h1>
|
||||
<p>Are you sure you want to delete this contact?</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button>Cancel</button>
|
||||
<button class="danger">Delete</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Confirm</title>
|
||||
<meta name="description" content="Prompts user to take action">
|
||||
|
||||
<link rel="stylesheet" href="../confirm.css">
|
||||
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code;
|
||||
- they are not required for the real use case.
|
||||
-->
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
#dir {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
direction: ltr;
|
||||
background-color: white;
|
||||
}
|
||||
#dir input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var input = document.querySelector('#dir input');
|
||||
input.checked = false;
|
||||
input.onchange = function() {
|
||||
document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<label id="dir">
|
||||
<input type="checkbox"> RTL mode
|
||||
</label>
|
||||
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<h1>Confirmation</h1>
|
||||
<p dir="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button>Cancel</button>
|
||||
<button class="danger">Delete</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Confirm, w/o title</title>
|
||||
<meta name="description" content="Prompts user to take action">
|
||||
|
||||
<link rel="stylesheet" href="../confirm.css">
|
||||
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code;
|
||||
- they are not required for the real use case.
|
||||
-->
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
#dir {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
direction: ltr;
|
||||
background-color: white;
|
||||
}
|
||||
#dir input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var input = document.querySelector('#dir input');
|
||||
input.checked = false;
|
||||
input.onchange = function() {
|
||||
document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<label id="dir">
|
||||
<input type="checkbox"> RTL mode
|
||||
</label>
|
||||
|
||||
<form role="dialog" data-type="confirm">
|
||||
<section>
|
||||
<p dir="auto">Are you sure you want to delete this contact?</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button>Cancel</button>
|
||||
<button class="danger">Delete</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
Binary file not shown.
|
After Width: | Height: | Size: 191 B |
Binary file not shown.
|
After Width: | Height: | Size: 332 B |
|
|
@ -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%;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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%;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
Binary file not shown.
|
After Width: | Height: | Size: 600 B |
Binary file not shown.
|
After Width: | Height: | Size: 799 B |
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
Binary file not shown.
|
After Width: | Height: | Size: 234 B |
Binary file not shown.
|
After Width: | Height: | Size: 290 B |
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 119 B |
Binary file not shown.
|
After Width: | Height: | Size: 89 B |
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 775 B |
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
Binary file not shown.
|
After Width: | Height: | Size: 81 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 B |
Binary file not shown.
|
After Width: | Height: | Size: 139 B |
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Drawer</title>
|
||||
<meta name="description" content="Hidden menu options triggered by the menu button in the header">
|
||||
|
||||
<link rel="stylesheet" href="../../style/headers.css">
|
||||
<link rel="stylesheet" href="../drawer.css">
|
||||
|
||||
<!--
|
||||
This <style> and <link> is only used for the example code, is no needed for the real case use
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -0.1rem 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem 0.4rem 0.4rem 3rem;
|
||||
border: solid 0.1rem #e8e8e8;
|
||||
}
|
||||
|
||||
section[role="region"] {
|
||||
height: 100%;
|
||||
line-height: 1em;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
div[role="main"] {
|
||||
background: #fff;
|
||||
height: calc(100% - 5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div[role="main"] p {
|
||||
margin: 2rem 2.5rem;
|
||||
}
|
||||
|
||||
/* Base icons */
|
||||
section[data-type="sidebar"] > header .icon.icon-add {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4RTlFMTExOTIwMjA2ODExODIyQUJFQTc4MUU4NEEyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjM1MzgyMUJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjM1MzgyMEJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mzk0RjYxOUMzMTIwNjgxMTgyMkFBRjgxQ0IyNTAxM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEU5RTExMTkyMDIwNjgxMTgyMkFCRUE3ODFFODRBMjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz45ZU6fAAAAiklEQVR42mL8//8/w0AAJoYBAqMW0w2wkKmPH4hVoOw7QPyRVAMYyUzVD4FYDsq+DMR6o3E8avGoxbiykxAQ78KjTxeI2aDs70B8DY9aZ2z5HJfFIIMvUclzGkB8c9AXmU+B+CyVgvrFaJE5avGoxQNSZBICzEBsAGVfAOK/9LJ4NI5HLSYIAAIMAKfZJ7+0GO5HAAAAAElFTkSuQmCC);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
|
||||
<section data-type="sidebar">
|
||||
<header>
|
||||
<menu type="toolbar">
|
||||
<a href="#"><span class="icon icon-add">add</span></a>
|
||||
</menu>
|
||||
<h1>Title <em>(9)</em></h1>
|
||||
</header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">label</a></li>
|
||||
<li><a href="#">label</a></li>
|
||||
<li><a href="#">label</a></li>
|
||||
<li><a href="#">label</a></li>
|
||||
</ul>
|
||||
<h2>Subtitle</h2>
|
||||
<ul>
|
||||
<li><a href="#">label</a></li>
|
||||
<li><a href="#">label</a></li>
|
||||
<li><a href="#">label larger label than the </a></li>
|
||||
<li><a href="#">label</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<section id="drawer" role="region">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-menu">hide sidebar</span></a>
|
||||
<a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
|
||||
<h1>Inbox</h1>
|
||||
</header>
|
||||
<div role="main"></div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
/* ----------------------------------
|
||||
* Edit mode
|
||||
* ---------------------------------- */
|
||||
|
||||
[role="dialog"][data-type="edit"] {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
transition: visibility var(--transition-duration);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
[role="dialog"][data-type="edit"] [role="region"] > gaia-header {
|
||||
background-color: #f4f4f4;
|
||||
transition: transform var(--transition-duration) ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="edit"] [role="region"] > gaia-header h1 {
|
||||
color: #868692;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="edit"] [role="region"] > gaia-header button {
|
||||
color: #00aac5;
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
[role="dialog"][data-type="edit"] > menu {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 1.5rem;
|
||||
border-top: solid 0.1rem rgba(189,189,189,0.2);
|
||||
background: #fff;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
transition: transform var(--transition-duration) ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="edit"] > menu button {
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
height: 4rem;
|
||||
margin: 0;
|
||||
-moz-margin-start: 1rem;
|
||||
padding: 0 0.2rem;
|
||||
-moz-box-sizing: border-box;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: #e7e7e7;
|
||||
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;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Press (default & recommend) */
|
||||
[role="dialog"][data-type="edit"] > menu button:not(:disabled):active {
|
||||
background: #b2f2ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Recommend */
|
||||
[role="dialog"][data-type="edit"] > menu button.recommend {
|
||||
background-color: #00caf2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
[role="dialog"][data-type="edit"] > menu button.danger {
|
||||
background-color: #e51e1e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Danger Press */
|
||||
[role="dialog"][data-type="edit"] > menu button.danger:active {
|
||||
background-color: #b2f2ff;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
/* Using pointer-events: none, makes events go through the button. As edit mode is an overlay is quite possible we have active buttons underneath */
|
||||
[role="dialog"][data-type="edit"] button[disabled] {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="edit"] > menu button[disabled] {
|
||||
opacity: 0.6;
|
||||
color: rgba(51,51,51,0.5);
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="edit"] button[disabled]::-moz-selection {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
/* Danger disabled */
|
||||
[role="dialog"][data-type="edit"] > menu button[disabled].danger {
|
||||
background-color: #e51e1e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[role="dialog"][data-type="edit"] > menu button:first-child {
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Edit mode</title>
|
||||
<meta name="description" content="Starts an edition mode for adding or removing items">
|
||||
|
||||
<link rel="stylesheet" href="../edit_mode.css">
|
||||
|
||||
<!-- Web Components -->
|
||||
<link rel="stylesheet" type="text/css" href="../../elements/gaia-icons/gaia-icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../elements/gaia-theme/gaia-theme.css">
|
||||
<script defer src="../../elements/config.js"></script>
|
||||
<script defer src="../../elements/gaia-header/dist/gaia-header.js"></script>
|
||||
|
||||
<!--
|
||||
- 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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
|
||||
<form role="dialog" data-type="edit">
|
||||
<section role="region" class="theme-settings">
|
||||
<!--
|
||||
- Please ref https://bugzilla.mozilla.org/show_bug.cgi?id=760436#c1
|
||||
- if you want to run the example temporary but unable to load the icon
|
||||
- correctly. Here is the correct way to apply gaia icon:
|
||||
- https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_icon_font
|
||||
-->
|
||||
<gaia-header id="header" action="close">
|
||||
<h1>Edit</h1>
|
||||
<button>Done</button>
|
||||
</gaia-header>
|
||||
</section>
|
||||
<menu>
|
||||
<button disabled>Deselect all</button>
|
||||
<button>Select all</button>
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
/* -------------------------------------------------------------------
|
||||
HEADERS: layout
|
||||
Form factor or Skin dependent styles should NOT be defined here.
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
section[role="region"] > header:first-child {
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
height: 5rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child h1 {
|
||||
font-size: 2.3rem;
|
||||
line-height: 5rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
height: 100%;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child h1 em {
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child menu {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html[dir="ltr"] section[role="region"] > header:first-child menu {
|
||||
float: right;
|
||||
}
|
||||
html[dir="rtl"] section[role="region"] > header:first-child menu {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
Buttons
|
||||
---------------------------------- */
|
||||
|
||||
section[role="region"] > header:first-child a,
|
||||
section[role="region"] > header:first-child button {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
min-width: 5rem;
|
||||
width: auto;
|
||||
height: 5rem;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
line-height: 5rem;
|
||||
border-radius: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
font-style: italic;
|
||||
}
|
||||
html[dir="ltr"] section[role="region"] > header:first-child a,
|
||||
html[dir="ltr"] section[role="region"] > header:first-child button {
|
||||
float: left;
|
||||
}
|
||||
html[dir="rtl"] section[role="region"] > header:first-child a,
|
||||
html[dir="rtl"] section[role="region"] > header:first-child button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Pressed state */
|
||||
section[role="region"] > header:first-child a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child button::-moz-focus-inner {
|
||||
outline: none;
|
||||
border: none;
|
||||
margin-top: -0.2rem; /* To fix line-height bug (697451) */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
section[role="region"] > header:first-child a[aria-disabled="true"],
|
||||
section[role="region"] > header:first-child button[disabled] {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
Icons
|
||||
---------------------------------- */
|
||||
|
||||
section[role="region"] > header:first-child .icon {
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 5rem;
|
||||
background: transparent no-repeat center / 3rem auto;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
Subheader
|
||||
---------------------------------- */
|
||||
|
||||
section[role="region"] > header {
|
||||
z-index: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
section[role="region"] header h2 {
|
||||
margin: 0;
|
||||
padding: 0.8rem 3rem;
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
HEADER SKIN: default
|
||||
Default values in case we are not overriding them using
|
||||
class="skin-*"
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
section[role="region"] > header:first-child {
|
||||
color: #fff;
|
||||
background-color: #f97c17;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child a,
|
||||
section[role="region"] > header:first-child button {
|
||||
color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child a:active,
|
||||
section[role="region"] > header:first-child button:active,
|
||||
section[role="region"] > header:first-child a:hover,
|
||||
section[role="region"] > header:first-child button:hover {
|
||||
background-color: rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child a:focus,
|
||||
section[role="region"] > header:first-child button:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
Icons
|
||||
---------------------------------- */
|
||||
|
||||
section[role="region"] > header:first-child .icon-add {
|
||||
background-image: url(headers/images/icons/add.png);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon-compose {
|
||||
background-image: url(headers/images/icons/compose.png);
|
||||
}
|
||||
|
||||
html[dir="ltr"] section[role="region"] > header:first-child .icon-edit {
|
||||
background-image: url(headers/images/icons/edit.png);
|
||||
}
|
||||
html[dir="rtl"] section[role="region"] > header:first-child .icon-edit {
|
||||
background-image: url(headers/images/icons/edit-rtl.png);
|
||||
}
|
||||
|
||||
html[dir="ltr"] section[role="region"] > header:first-child .icon-send {
|
||||
background-image: url(headers/images/icons/send.png);
|
||||
}
|
||||
html[dir="rtl"] section[role="region"] > header:first-child .icon-send {
|
||||
background-image: url(headers/images/icons/send_rtl.png);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon-close {
|
||||
background-image: url(headers/images/icons/close.png);
|
||||
}
|
||||
|
||||
html[dir="ltr"] section[role="region"] > header:first-child .icon-back {
|
||||
background-image: url(headers/images/icons/left.png);
|
||||
}
|
||||
html[dir="rtl"] section[role="region"] > header:first-child .icon-back {
|
||||
background-image: url(headers/images/icons/right.png);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon-menu {
|
||||
background-image: url(headers/images/icons/menu.png);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon-user {
|
||||
background-image: url(headers/images/icons/user.png);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon-up {
|
||||
background-image: url(headers/images/icons/up.png);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon-down {
|
||||
background-image: url(headers/images/icons/down.png);
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon-options {
|
||||
background-image: url(headers/images/icons/options.png);
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
Subheader
|
||||
---------------------------------- */
|
||||
|
||||
section[role="region"] header h2 {
|
||||
color: #424242;
|
||||
border-bottom: solid 0.1rem #e6e6e6;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
HEADER SKIN: comms
|
||||
.skin-comms will override default values
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
.skin-comms section[role="region"] > header:first-child,
|
||||
section[role="region"].skin-comms > header:first-child {
|
||||
background-color: #00adad;
|
||||
}
|
||||
|
||||
.skin-comms section[role="region"] > header:first-child a,
|
||||
.skin-comms section[role="region"] > header:first-child button,
|
||||
section[role="region"].skin-comms > header:first-child a,
|
||||
section[role="region"].skin-comms > header:first-child button {
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.skin-comms section[role="region"] > header:first-child a:active,
|
||||
.skin-comms section[role="region"] > header:first-child button:active,
|
||||
.skin-comms section[role="region"] > header:first-child a:hover,
|
||||
.skin-comms section[role="region"] > header:first-child button:hover,
|
||||
section[role="region"].skin-comms > header:first-child a:active,
|
||||
section[role="region"].skin-comms > header:first-child button:active,
|
||||
section[role="region"].skin-comms > header:first-child a:hover,
|
||||
section[role="region"].skin-comms > header:first-child button:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.skin-comms section[role="region"] > header:first-child a:focus,
|
||||
.skin-comms section[role="region"] > header:first-child button:focus,
|
||||
section[role="region"].skin-comms > header:first-child a:focus,
|
||||
section[role="region"].skin-comms > header:first-child button:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
HEADER SKIN: dark
|
||||
.skin-dark will override default values
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
section[role="region"].skin-dark > header:first-child,
|
||||
.skin-dark > section[role="region"] > header:first-child {
|
||||
background-color: #242d33;
|
||||
}
|
||||
|
||||
.skin-dark section[role="region"] > header:first-child a,
|
||||
.skin-dark section[role="region"] > header:first-child button,
|
||||
section[role="region"].skin-dark > header:first-child a,
|
||||
section[role="region"].skin-dark > header:first-child button {
|
||||
color: #00aac5;
|
||||
}
|
||||
|
||||
.skin-dark section[role="region"] > header:first-child a:active,
|
||||
.skin-dark section[role="region"] > header:first-child button:active,
|
||||
.skin-dark section[role="region"] > header:first-child a:hover,
|
||||
.skin-dark section[role="region"] > header:first-child button:hover,
|
||||
section[role="region"].skin-dark > header:first-child a:active,
|
||||
section[role="region"].skin-dark > header:first-child button:active,
|
||||
section[role="region"].skin-dark > header:first-child a:hover,
|
||||
section[role="region"].skin-dark > header:first-child button:hover {
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.skin-dark section[role="region"] > header:first-child a:focus,
|
||||
.skin-dark section[role="region"] > header:first-child button:focus,
|
||||
section[role="region"].skin-dark > header:first-child a:focus,
|
||||
section[role="region"].skin-dark > header:first-child button:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
section[role="region"].skin-dark header h2,
|
||||
.skin-dark > section[role="region"] header h2 {
|
||||
background-color: #2c353b;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
HEADER SKIN: organic
|
||||
.skin-organic will override default values
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
section[role="region"].skin-organic > header:first-child,
|
||||
.skin-organic section[role="region"] > header:first-child {
|
||||
color: #868692;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
section[role="region"].skin-organic > header:first-child h1,
|
||||
.skin-organic section[role="region"] > header:first-child h1 {
|
||||
color: #868692;
|
||||
}
|
||||
|
||||
section[role="region"].skin-organic > header:first-child a,
|
||||
section[role="region"].skin-organic > header:first-child button,
|
||||
.skin-organic section[role="region"] > header:first-child a,
|
||||
.skin-organic section[role="region"] > header:first-child button {
|
||||
color: #00aac5;
|
||||
}
|
||||
|
||||
section[role="region"].skin-organic > header:first-child a:focus,
|
||||
section[role="region"].skin-organic > header:first-child button:focus,
|
||||
.skin-organic section[role="region"] > header:first-child a:focus,
|
||||
.skin-organic section[role="region"] > header:first-child button:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
Icons
|
||||
---------------------------------- */
|
||||
|
||||
html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-back,
|
||||
html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-back {
|
||||
background-image: url(headers/images/icons/organic/left.png);
|
||||
}
|
||||
html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-back,
|
||||
html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-back {
|
||||
background-image: url(headers/images/icons/organic/right.png);
|
||||
}
|
||||
|
||||
section[role="region"].skin-organic > header:first-child .icon-close,
|
||||
.skin-organic section[role="region"] > header:first-child .icon-close {
|
||||
background-image: url(headers/images/icons/organic/close.png);
|
||||
}
|
||||
|
||||
section[role="region"].skin-organic > header:first-child .icon-add,
|
||||
.skin-organic section[role="region"] > header:first-child .icon-add {
|
||||
background-image: url(headers/images/icons/organic/add.png);
|
||||
}
|
||||
|
||||
html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-edit,
|
||||
html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-edit {
|
||||
background-image: url(headers/images/icons/organic/edit.png);
|
||||
}
|
||||
html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-edit,
|
||||
html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-edit {
|
||||
background-image: url(headers/images/icons/organic/edit-rtl.png);
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
Subheader
|
||||
---------------------------------- */
|
||||
|
||||
section[role="region"].skin-organic header h2,
|
||||
.skin-organic section[role="region"] header h2 {
|
||||
background-color: #e7e7e7;
|
||||
color: #4d4d4d;
|
||||
border: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 162 B |
Binary file not shown.
|
After Width: | Height: | Size: 188 B |
Binary file not shown.
|
After Width: | Height: | Size: 273 B |
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
Binary file not shown.
|
After Width: | Height: | Size: 324 B |
Binary file not shown.
|
After Width: | Height: | Size: 344 B |
Binary file not shown.
|
After Width: | Height: | Size: 146 B |
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 152 B |
Binary file not shown.
|
After Width: | Height: | Size: 129 B |
Binary file not shown.
|
After Width: | Height: | Size: 200 B |
Binary file not shown.
|
After Width: | Height: | Size: 409 B |
Binary file not shown.
|
After Width: | Height: | Size: 345 B |
Binary file not shown.
|
After Width: | Height: | Size: 151 B |
Binary file not shown.
|
After Width: | Height: | Size: 179 B |
Binary file not shown.
|
After Width: | Height: | Size: 272 B |
Binary file not shown.
|
After Width: | Height: | Size: 194 B |
Binary file not shown.
|
After Width: | Height: | Size: 179 B |
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
Binary file not shown.
|
After Width: | Height: | Size: 313 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
Binary file not shown.
|
After Width: | Height: | Size: 279 B |
|
|
@ -0,0 +1,180 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Headers</title>
|
||||
<meta name="description" content="Providing top-level navigation and inputs for the active view">
|
||||
<!--
|
||||
- This <style> and <link> is only used for the example preview,
|
||||
- it isn't needed for the real use case.
|
||||
-->
|
||||
<link rel="stylesheet" href="../headers.css">
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
margin: -0.1rem 0 0;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.4rem;
|
||||
padding-inline-start: 3rem;
|
||||
border: solid 0.1rem #e8e8e8;
|
||||
margin: 3rem 0 1rem;
|
||||
}
|
||||
|
||||
section[role="region"] {
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.getElementById('dir').checked = false;
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body role="application">
|
||||
<p dir="ltr">
|
||||
<label>
|
||||
<input type="checkbox" id="dir"
|
||||
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
|
||||
RTL mode
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<section role="region">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-close">close</span></a>
|
||||
<menu type="toolbar">
|
||||
<button>done</button>
|
||||
</menu>
|
||||
<h1>Email</h1>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section role="region">
|
||||
<header>
|
||||
<a href="#"></a>
|
||||
<menu type="toolbar">
|
||||
<button><span class="icon icon-send">send</span></button>
|
||||
</menu>
|
||||
<h1>Send message to X</h1>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section role="region">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-back">back</span></a>
|
||||
<menu type="toolbar">
|
||||
<button><span class="icon icon-edit">edit</span></button>
|
||||
<button><span class="icon icon-add">add</span></button>
|
||||
</menu>
|
||||
<h1>Email</h1>
|
||||
</header>
|
||||
<header>
|
||||
<h2>Subheader text</h2>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section role="region">
|
||||
<header>
|
||||
<button><span class="icon icon-menu">menu</span></button>
|
||||
<menu type="toolbar">
|
||||
<button><span class="icon icon-edit">edit</span></button>
|
||||
<button><span class="icon icon-add">add</span></button>
|
||||
</menu>
|
||||
<h1>Inbox <em>(2)</em></h1>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<h2 class="bb-docs">Skin: Dark</h2>
|
||||
<section role="region" class="skin-dark">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-close">close</span></a>
|
||||
<menu type="toolbar">
|
||||
<button>done</button>
|
||||
</menu>
|
||||
<h1>Music</h1>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section role="region" class="skin-dark">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-back">back</span></a>
|
||||
<menu type="toolbar">
|
||||
<button><span class="icon icon-edit">edit</span></button>
|
||||
<button><span class="icon icon-add">add</span></button>
|
||||
</menu>
|
||||
<h1>Music</h1>
|
||||
</header>
|
||||
<header>
|
||||
<h2>Subheader text</h2>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<h2 class="bb-docs">Skin: Organic</h2>
|
||||
<section role="region" class="skin-organic">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-close">close</span></a>
|
||||
<menu type="toolbar">
|
||||
<button>done</button>
|
||||
</menu>
|
||||
<h1>Settings</h1>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<div class="skin-organic">
|
||||
<section role="region">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-back">back</span></a>
|
||||
<menu type="toolbar">
|
||||
<button><span class="icon icon-edit">edit</span></button>
|
||||
<button><span class="icon icon-add">add</span></button>
|
||||
</menu>
|
||||
<h1>Settings</h1>
|
||||
</header>
|
||||
<header>
|
||||
<h2>Subheader text</h2>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Skin: Comms</h2>
|
||||
<div class="skin-comms">
|
||||
<section role="region">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-close">close</span></a>
|
||||
<menu type="toolbar">
|
||||
<button>done</button>
|
||||
</menu>
|
||||
<h1>Contacts</h1>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section role="region">
|
||||
<header>
|
||||
<a href="#"><span class="icon icon-back">back</span></a>
|
||||
<menu type="toolbar">
|
||||
<button><span class="icon icon-edit">edit</span></button>
|
||||
<button><span class="icon icon-add">add</span></button>
|
||||
</menu>
|
||||
<h1>Contacts</h1>
|
||||
</header>
|
||||
<header>
|
||||
<h2>Subheader text</h2>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,575 @@
|
|||
/* ----------------------------------
|
||||
* Input areas
|
||||
* ---------------------------------- */
|
||||
|
||||
/**
|
||||
* BiDi notes:
|
||||
*
|
||||
* - as the <input>, <textarea> and [contentEditable] elements are filled by
|
||||
* the user, they need a `unicode-bidi: -moz-plaintext` attribute for their
|
||||
* content to be displayed properly (e.g. LTR content in an RTL document,
|
||||
* or vice-versa);
|
||||
*
|
||||
* - consequence: *-inline-start/end properties can still be used on such
|
||||
* elements content direction doesn't impact element's direction
|
||||
*
|
||||
* - however, the one-line inputs must still be aligned along with the
|
||||
* *document* direction: to the left in LTR, to the right in RTL
|
||||
* -- no matter what the *content* direction is.
|
||||
*/
|
||||
|
||||
html[dir="ltr"] input { text-align: left; }
|
||||
html[dir="rtl"] input { text-align: right; }
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
input[type="number"],
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
resize: none;
|
||||
padding: 0 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
border: 0.1rem solid #c7c7c7;
|
||||
border-radius: 0;
|
||||
box-shadow: none; /* override the box-shadow from the system (performance issue) */
|
||||
color: #333;
|
||||
background: #fff;
|
||||
margin: 0 0 1rem;
|
||||
unicode-bidi: -moz-plaintext;
|
||||
}
|
||||
|
||||
label:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 10rem;
|
||||
max-height: 10rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
input::-moz-placeholder,
|
||||
textarea::-moz-placeholder {
|
||||
color: #a9a9a9;
|
||||
opacity: 1;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
input[disabled],
|
||||
textarea[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.skin-dark input[type="text"],
|
||||
.skin-dark input[type="password"],
|
||||
.skin-dark input[type="email"],
|
||||
.skin-dark input[type="tel"],
|
||||
.skin-dark input[type="search"],
|
||||
.skin-dark input[type="url"],
|
||||
.skin-dark input[type="number"],
|
||||
.skin-dark textarea {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-color: #454545;
|
||||
}
|
||||
|
||||
form p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form p input + button[type="reset"],
|
||||
form p textarea + button[type="reset"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
background: url(input_areas/images/clear.png) no-repeat 50% 50% / 2.4rem auto;
|
||||
}
|
||||
html[dir="ltr"] form p input + button[type="reset"],
|
||||
html[dir="ltr"] form p textarea + button[type="reset"] {
|
||||
right: -0.3rem;
|
||||
}
|
||||
html[dir="rtl"] form p input + button[type="reset"],
|
||||
html[dir="rtl"] form p textarea + button[type="reset"] {
|
||||
left: -0.3rem;
|
||||
}
|
||||
|
||||
.skin-dark p input + button[type="reset"],
|
||||
.skin-dark p textarea + button[type="reset"] {
|
||||
background-image: url(input_areas/images/clear_dark.png);
|
||||
}
|
||||
|
||||
/* To avoid colission with BB butons */
|
||||
li input + button[type="reset"]:after,
|
||||
li textarea + button[type="reset"]:after {
|
||||
background: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"] form p input:focus { padding-right: 3rem; }
|
||||
html[dir="rtl"] form p input:focus { padding-left: 3rem; }
|
||||
|
||||
form p input:focus + button[type="reset"],
|
||||
form p textarea:focus + button[type="reset"] {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* Fieldset */
|
||||
fieldset {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 1.5rem 0 0;
|
||||
padding: 0;
|
||||
font-size: 2rem;
|
||||
line-height: 1em;
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
fieldset legend,
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"] {
|
||||
border: 0.1rem solid #c7c7c7;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
font-size: 1.6rem;
|
||||
margin: 0 0 1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
height: 4rem;
|
||||
color: #333;
|
||||
border-radius: 0;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
html[dir="ltr"] fieldset legend,
|
||||
html[dir="ltr"] input[type="date"],
|
||||
html[dir="ltr"] input[type="time"],
|
||||
html[dir="ltr"] input[type="datetime"],
|
||||
html[dir="ltr"] input[type="datetime-local"] {
|
||||
background-image: url(input_areas/images/dialog.svg);
|
||||
background-position: right 1rem bottom 1rem;
|
||||
}
|
||||
html[dir="rtl"] fieldset legend,
|
||||
html[dir="rtl"] input[type="date"],
|
||||
html[dir="rtl"] input[type="time"],
|
||||
html[dir="rtl"] input[type="datetime"],
|
||||
html[dir="rtl"] input[type="datetime-local"] {
|
||||
background-image: url(input_areas/images/dialog_rtl.svg);
|
||||
background-position: left 1rem bottom 1rem;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
margin: 0 0 1rem;
|
||||
padding: 1rem 1.5rem 0;
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
fieldset[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.skin-dark fieldset legend,
|
||||
.skin-dark input[type="date"],
|
||||
.skin-dark input[type="time"],
|
||||
.skin-dark input[type="datetime"],
|
||||
.skin-dark input[type="datetime-local"] {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-color: #454545;
|
||||
}
|
||||
|
||||
fieldset[disabled] legend,
|
||||
input[type="date"][disabled],
|
||||
input[type="time"][disabled],
|
||||
input[type="datetime"][disabled],
|
||||
input[type="datetime-local"][disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
html[dir="ltr"] fieldset[disabled] legend,
|
||||
html[dir="ltr"] input[type="date"][disabled],
|
||||
html[dir="ltr"] input[type="time"][disabled],
|
||||
html[dir="ltr"] input[type="datetime"][disabled],
|
||||
html[dir="ltr"] input[type="datetime-local"][disabled] {
|
||||
background-image: url(input_areas/images/dialog_disabled.svg);
|
||||
}
|
||||
html[dir="rtl"] fieldset[disabled] legend,
|
||||
html[dir="rtl"] input[type="date"][disabled],
|
||||
html[dir="rtl"] input[type="time"][disabled],
|
||||
html[dir="rtl"] input[type="datetime"][disabled],
|
||||
html[dir="rtl"] input[type="datetime-local"][disabled] {
|
||||
background-image: url(input_areas/images/dialog_disabled_rtl.svg);
|
||||
}
|
||||
|
||||
input[type="date"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus {
|
||||
box-shadow: none;
|
||||
border-bottom-color: #c7c7c7;
|
||||
}
|
||||
|
||||
.skin-dark input[type="date"]:focus,
|
||||
.skin-dark input[type="time"]:focus,
|
||||
.skin-dark input[type="datetime"]:focus,
|
||||
.skin-dark input[type="datetime-local"]:focus {
|
||||
box-shadow: none;
|
||||
border-bottom-color: #454545;
|
||||
}
|
||||
|
||||
input[type="date"]:active,
|
||||
input[type="time"]:active,
|
||||
input[type="datetime"]:active,
|
||||
input[type="datetime-local"]:active {
|
||||
background-color: #b2f2ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.skin-dark input[type="date"]:active,
|
||||
.skin-dark input[type="time"]:active,
|
||||
.skin-dark input[type="datetime"]:active,
|
||||
.skin-dark input[type="datetime-local"]:active {
|
||||
background-color: #00aacc;
|
||||
background-image: url(input_areas/images/dialog_active.svg);
|
||||
}
|
||||
|
||||
/* fix for required inputs with wrong or empty value e.g. [type=email] */
|
||||
input:invalid,
|
||||
textarea:invalid,
|
||||
.skin-dark input:invalid,
|
||||
.skin-dark textarea:invalid {
|
||||
color: #b90000;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
.skin-dark input:focus,
|
||||
.skin-dark textarea:focus {
|
||||
box-shadow: inset 0 -0.1rem 0 #00caf2;
|
||||
border-bottom-color: #00caf2;
|
||||
}
|
||||
|
||||
input:invalid:focus,
|
||||
textarea:invalid:focus,
|
||||
.skin-dark input:invalid:focus,
|
||||
.skin-dark textarea:invalid:focus {
|
||||
box-shadow: inset 0 -0.1rem 0 #820000;
|
||||
border-bottom-color: #820000;
|
||||
}
|
||||
|
||||
input[type="range"]:focus,
|
||||
.skin-dark input[type="range"]:focus {
|
||||
box-shadow: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/* Tidy (search/submit) */
|
||||
form[role="search"] {
|
||||
position: relative;
|
||||
height: 3.7rem;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
form[role="search"].skin-dark {
|
||||
background: #202020;
|
||||
}
|
||||
|
||||
form[role="search"] p {
|
||||
padding: 0 1.5rem;
|
||||
padding-inline-start: 3rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form[role="search"] p input,
|
||||
form[role="search"] p textarea {
|
||||
height: 3.7rem;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
form[role="search"] p textarea {
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
|
||||
form[role="search"] p input::-moz-placeholder {
|
||||
background-image: url(input_areas/images/search.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 3rem;
|
||||
}
|
||||
html[dir="ltr"] form[role="search"] p input::-moz-placeholder {
|
||||
background-position: right -0.5rem center;
|
||||
}
|
||||
html[dir="rtl"] form[role="search"] p input::-moz-placeholder {
|
||||
background-position: left -0.5rem center;
|
||||
}
|
||||
|
||||
form[role="search"].skin-dark p input::-moz-placeholder {
|
||||
background-image: url(input_areas/images/search_dark.svg);
|
||||
}
|
||||
|
||||
form[role="search"] p input:focus::-moz-placeholder {
|
||||
background: none;
|
||||
}
|
||||
|
||||
form[role="search"] p input:invalid,
|
||||
form[role="search"] p textarea:invalid,
|
||||
form[role="search"] p input:focus,
|
||||
form[role="search"] p textarea:focus {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
form[role="search"].skin-dark p input,
|
||||
form[role="search"].skin-dark p textarea {
|
||||
color: #fff;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
form[role="search"] button[type="submit"] {
|
||||
min-width: 6rem;
|
||||
height: 3.7rem;
|
||||
padding: 0 1.5rem;
|
||||
border: none;
|
||||
color: #00aac5;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 3.7rem;
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
background-image: none;
|
||||
background-color: unset;
|
||||
font-style: italic;
|
||||
overflow: visible;
|
||||
}
|
||||
html[dir="ltr"] form[role="search"] button[type="submit"] { float: right; }
|
||||
html[dir="rtl"] form[role="search"] button[type="submit"] { float: left; }
|
||||
|
||||
form[role="search"] button[type="submit"]:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
offset-inline-start: -0.1rem;
|
||||
top: 0.7rem;
|
||||
bottom: 0.7rem;
|
||||
width: 0.1rem;
|
||||
background: #c7c7c7;
|
||||
}
|
||||
|
||||
form[role="search"] button[type="submit"].icon {
|
||||
font-size: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 3rem;
|
||||
}
|
||||
|
||||
form[role="search"] p input + button[type="reset"]{
|
||||
height: 3.7rem;
|
||||
offset-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
form[role="search"].skin-dark button[type="submit"]:after {
|
||||
background-color: #575757;
|
||||
}
|
||||
|
||||
form[role="search"] button[type="submit"] + p > textarea {
|
||||
height: 3.7rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
form[role="search"] button[type="submit"] + p button {
|
||||
height: 3.7rem;
|
||||
}
|
||||
|
||||
form[role="search"].full button[type="submit"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form[role="search"] button.icon:active,
|
||||
form[role="search"] button[type="submit"]:active {
|
||||
background-color: #b2f2ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
form[role="search"].skin-dark button.icon:active,
|
||||
form[role="search"].skin-dark button[type="submit"]:active {
|
||||
background: #00aacc;
|
||||
}
|
||||
|
||||
form[role="search"] button[type="submit"][disabled] {
|
||||
color: #adadad;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
form button::-moz-focus-inner {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* .bb-editable - e.g email & SMS recipients */
|
||||
.bb-editable [contenteditable] {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
max-width: calc(100% - 1.4rem);
|
||||
overflow: hidden;
|
||||
padding: 0 1.5rem;
|
||||
margin: 0 0 0.6rem;
|
||||
line-height: 2.8rem;
|
||||
border-radius: 1.4rem;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.6rem;
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .bb-editable [contenteditable].icon {
|
||||
padding-right: 3.7rem;
|
||||
}
|
||||
html[dir="rtl"] .bb-editable [contenteditable].icon {
|
||||
padding-left: 3.7rem;
|
||||
}
|
||||
|
||||
.bb-editable [contenteditable="false"].invalid {
|
||||
background-color: #fedcdc;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
html[dir="ltr"] .bb-editable [contenteditable="false"].invalid { padding-left: 3.3rem; }
|
||||
html[dir="rtl"] .bb-editable [contenteditable="false"].invalid { padding-right: 3.3rem; }
|
||||
|
||||
.bb-editable [contenteditable="false"].invalid:before {
|
||||
content: "!";
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
display: block;
|
||||
width: 1.7rem;
|
||||
height: 1.6rem;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
line-height: 1.6rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
text-indent: -0.1rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: #b80404;
|
||||
}
|
||||
html[dir="ltr"] .bb-editable [contenteditable="false"].invalid:before { left: 0.8rem; }
|
||||
html[dir="rtl"] .bb-editable [contenteditable="false"].invalid:before { right: 0.8rem; }
|
||||
|
||||
.bb-editable [contenteditable="false"].invalid:hover:before,
|
||||
.bb-editable [contenteditable="false"].invalid:active:before {
|
||||
color: #b2f2ff;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bb-editable [contenteditable]:hover,
|
||||
.bb-editable [contenteditable]:active,
|
||||
.bb-editable [contenteditable].invalid:hover,
|
||||
.bb-editable [contenteditable].invalid:active {
|
||||
color: #fff;
|
||||
background-color: #b2f2ff;
|
||||
}
|
||||
|
||||
.bb-editable [contenteditable].icon:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.7rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 3rem;
|
||||
}
|
||||
html[dir="ltr"] .bb-editable [contenteditable].icon:after {
|
||||
right: 0;
|
||||
background-position: -0.7rem -3.8rem;
|
||||
}
|
||||
html[dir="rtl"] .bb-editable [contenteditable].icon:after {
|
||||
left: 0;
|
||||
background-position: 0.7rem -3.8rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .bb-editable [contenteditable].icon:hover:after,
|
||||
html[dir="ltr"] .bb-editable [contenteditable].icon:active:after {
|
||||
background-position: -0.7rem -0.8rem;
|
||||
}
|
||||
html[dir="rtl"] .bb-editable [contenteditable].icon:hover:after,
|
||||
html[dir="rtl"] .bb-editable [contenteditable].icon:active:after {
|
||||
background-position: 0.7rem -0.8rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .bb-editable [contenteditable].invalid.icon {
|
||||
padding-right: 3.7rem;
|
||||
}
|
||||
html[dir="rtl"] .bb-editable [contenteditable].invalid.icon {
|
||||
padding-left: 3.7rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:after {
|
||||
background-position: -0.7rem -6.8rem;
|
||||
}
|
||||
html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:after {
|
||||
background-position: 0.7rem -6.8rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:hover:after,
|
||||
html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:active:after {
|
||||
background-position: -0.7rem -0.8rem;
|
||||
}
|
||||
html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:hover:after,
|
||||
html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:active:after {
|
||||
background-position: 0.7rem -0.8rem;
|
||||
}
|
||||
|
||||
.bb-editable [contenteditable="true"],
|
||||
.bb-editable [contenteditable="true"]:hover,
|
||||
.skin-comms .bb-editable [contenteditable="true"]:hover {
|
||||
padding: 0 0.2rem;
|
||||
white-space: normal;
|
||||
font-size: 1.8rem;
|
||||
font-style: normal;
|
||||
color: #000;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
}
|
||||
|
||||
.skin-comms .bb-editable [contenteditable]:hover,
|
||||
.skin-comms .bb-editable [contenteditable]:active {
|
||||
color: #fff;
|
||||
background-color: #29bbb5;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#00AAC5" enable-background="new" d="M9 0L9 9 0 9"/></svg>
|
||||
|
After Width: | Height: | Size: 148 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#B2F2FF" d="M9 0v9h-9"/></svg>
|
||||
|
After Width: | Height: | Size: 121 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path opacity=".5" fill="#A9A9A9" d="M9 0L9 9 0 9"/></svg>
|
||||
|
After Width: | Height: | Size: 137 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path opacity=".5" fill="#A9A9A9" enable-background="new" d="M0 0L0 9 9 9"/></svg>
|
||||
|
After Width: | Height: | Size: 161 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#00AAC5" enable-background="new" d="M0 0L0 9 9 9"/></svg>
|
||||
|
After Width: | Height: | Size: 148 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" fill="#424242" d="M23.385 21.494c.266.266.057.903-.465 1.426s-1.16.729-1.426.465l-4.041-4.039c-1.01.656-2.21 1.047-3.505 1.047-3.561 0-6.448-2.885-6.448-6.446 0-3.56 2.887-6.446 6.448-6.446 3.562 0 6.449 2.887 6.449 6.446 0 1.297-.393 2.499-1.051 3.509l4.041 4.039h-.002zm-9.437-12.459c-2.712 0-4.914 2.198-4.914 4.912s2.202 4.913 4.914 4.913c2.714 0 4.914-2.199 4.914-4.913-.001-2.714-2.2-4.912-4.914-4.912z"/></svg>
|
||||
|
After Width: | Height: | Size: 546 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" fill="#8F9091" d="M23.385 21.494c.266.266.057.903-.465 1.426s-1.16.729-1.426.465l-4.041-4.039c-1.01.656-2.21 1.047-3.505 1.047-3.561 0-6.448-2.885-6.448-6.446 0-3.56 2.887-6.446 6.448-6.446 3.562 0 6.449 2.887 6.449 6.446 0 1.297-.393 2.499-1.051 3.509l4.041 4.039h-.002zm-9.437-12.459c-2.712 0-4.914 2.198-4.914 4.912s2.202 4.913 4.914 4.913c2.714 0 4.914-2.199 4.914-4.913-.001-2.714-2.2-4.912-4.914-4.912z"/></svg>
|
||||
|
After Width: | Height: | Size: 546 B |
|
|
@ -0,0 +1,236 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Input areas</title>
|
||||
<link rel="stylesheet" href="../input_areas.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
|
||||
|
||||
<!--
|
||||
- These <style> and <script> elements are only used for the example code,
|
||||
- they are not needed for the real use case.
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
label.bb-docs {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
h2.bb-docs {
|
||||
font-family: sans-serif;
|
||||
padding: 0.4rem 3rem;
|
||||
margin: -0.1rem 0 0;
|
||||
border: solid 0.1rem #e8e8e8;
|
||||
color: #666;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
form { margin: 1rem 1.5rem; }
|
||||
|
||||
form[role="search"] { margin: 1rem 0; }
|
||||
|
||||
div.skin-dark {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
div.skin-dark.margins {
|
||||
margin: 1rem -1.5rem;
|
||||
padding: 1.5rem 1.5rem 0.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* .bb-editable
|
||||
* Added properties for this example, don't add on app.
|
||||
*/
|
||||
.bb-editable {
|
||||
padding: 1.5rem 1rem 0.5rem;
|
||||
background: #bbb;
|
||||
}
|
||||
|
||||
/**
|
||||
* .icon-email:before
|
||||
* Define the background-image with custom icon for App.
|
||||
* Attention, the pseudo-element is required for compatibility with Building Blocks.
|
||||
*
|
||||
* Example:
|
||||
* .icon-mms:before { background-image: url(...); }
|
||||
*/
|
||||
.icon-email:after {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASRJREFUeNrsl8ENgjAUhqlhAEfxQDyzgXdOjoCT0ClYg54Nu+gGtcRiAlJ5fQ9CDP+XFJOW+hlo6/uTBADw76hfg9ba0n0cBd//VErp6FlO3FgZDevn9pO50u4iEXPkn/ul4hj54L4lxBT51/hS4odrVUA62b+UOCSvfP+q4rE8KF1DTF5w3JPLio9Gx1T/Yauzen/idGb8Jv13QgEAAAAAyNJi27bitJhlmeYUAhfXcoHYuKY5pU/uJ3OluaTm4sjN3JOiFnsxckN5PTFVJkVuqGsitrw9hRaL7ycvxFhxt7WuE3Lt+1ct6MfyXhq131PmVukkpX+n5RYRhn24IC0iLQIAAABIi2/uRSFOi+e6RlpEWkRaRFpEWkRaRFoEYG+8BBgAvaeWTjgXDaoAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.getElementById('dir').checked = false;
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body role="application">
|
||||
<p dir="ltr">
|
||||
<label class="bb-docs">
|
||||
<input id="dir" type="checkbox" checked="false"
|
||||
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
|
||||
RTL mode
|
||||
</label>
|
||||
</p>
|
||||
<h2 class="bb-docs">Default inputs</h2>
|
||||
<form>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Placeholder">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<textarea placeholder="Placeholder in textarea"></textarea>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Placeholder" value="Some written text" required>
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Disabled" disabled required>
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
|
||||
<div class="skin-dark margins">
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Placeholder" value="Some written text">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Required inputs</h2>
|
||||
<form>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Placeholder" required>
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<textarea placeholder="Placeholder in textarea" required></textarea>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Date/time inputs</h2>
|
||||
<form>
|
||||
<p>
|
||||
<input dir="auto" disabled type="date" placeholder="YYYY-MM-DD">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input dir="auto" type="time" placeholder="hh:mm:ss">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Fieldset</h2>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend class="action">Mobile</legend>
|
||||
<section>
|
||||
<p>
|
||||
<input dir="ltr" type="tel" placeholder="Phone number">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Name" value="Jessy James">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</section>
|
||||
</fieldset>
|
||||
|
||||
<fieldset disabled>
|
||||
<legend>Work</legend>
|
||||
<section>
|
||||
<p>
|
||||
<input dir="ltr" type="tel" placeholder="Email">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</section>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Forms: Input text</h2>
|
||||
<form role="search">
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Search…">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form role="search">
|
||||
<button type="submit">Cancel</button>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Search…" value="Some text here">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div class="skin-dark">
|
||||
<h2 class="bb-docs">Skin dark</h2>
|
||||
<form role="search" class="skin-dark">
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Search…">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form role="search" class="skin-dark">
|
||||
<button type="submit">Cancel</button>
|
||||
<p>
|
||||
<input dir="auto" type="text" placeholder="Search…" value="Some text here">
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2 class="bb-docs">Forms: Text area</h2>
|
||||
<form role="search" class="bottom">
|
||||
<!-- this button should be enabled after start typing in the input field-->
|
||||
<button type="submit" disabled>Send</button>
|
||||
<p>
|
||||
<textarea></textarea>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form role="search" class="bottom">
|
||||
<button type="submit">Send</button>
|
||||
<p>
|
||||
<textarea>Some text here</textarea>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form role="search" class="bottom">
|
||||
<button type="submit" class="icon" data-icon="send" aria-hidden="true">Send</button>
|
||||
<p>
|
||||
<textarea>Some text here</textarea>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2 class="bb-docs">Content Editable</h2>
|
||||
<ul class="bb-editable">
|
||||
<li dir="auto" contenteditable="false">Travis Gray Travis Gray</li>
|
||||
<li dir="auto" contenteditable="false" class="invalid">Lucy B.</li>
|
||||
<li dir="auto" contenteditable="false" class="icon icon-email">Mary</li>
|
||||
<li dir="auto" contenteditable="false" class="invalid icon icon-email">Paul C.</li>
|
||||
<li dir="auto" contenteditable="true">John</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@font-face {
|
||||
font-family: 'Keyboard Symbols';
|
||||
font-weight: 600;
|
||||
src: url(keyboard_symbols/Keyboard-Symbols.ttf);
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,330 @@
|
|||
/* ------------------------------------
|
||||
* Layout.css will allow us creating
|
||||
* easy structures using flexbox.
|
||||
* This file will replace lists.css
|
||||
* ------------------------------------ */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 22px
|
||||
}
|
||||
|
||||
/* Horizontal layout */
|
||||
.hbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.hbox.left { justify-content: flex-start; }
|
||||
.hbox.center { justify-content: center; }
|
||||
.hbox.right { justify-content: flex-end; }
|
||||
.hbox.top { align-items: flex-start; }
|
||||
.hbox.middle { align-items: center; }
|
||||
.hbox.bottom { align-items: flex-end; }
|
||||
|
||||
.hbox > .self-top { align-self: flex-start; }
|
||||
.hbox > .self-middle { align-self: center; }
|
||||
.hbox > .self-bottom { align-self: flex-end; }
|
||||
|
||||
/* Vertical layout */
|
||||
.vbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vbox.left { align-items: flex-start; }
|
||||
.vbox.center { align-items: center; }
|
||||
.vbox.right { align-items: flex-end; }
|
||||
.vbox.top { justify-content: flex-start; }
|
||||
.vbox.middle { justify-content: center; }
|
||||
.vbox.bottom { justify-content: flex-end; }
|
||||
|
||||
.vbox > .self-left { align-self: flex-start; }
|
||||
.vbox > .self-center { align-self: center; }
|
||||
.vbox > .self-right { align-self: flex-end; }
|
||||
|
||||
/*
|
||||
* Layout properties
|
||||
*/
|
||||
|
||||
.fit {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fit.two { flex: 2; }
|
||||
.fit.three { flex: 3; }
|
||||
.fit.four { flex: 4; }
|
||||
.fit.five { flex: 5; }
|
||||
.fit.six { flex: 6; }
|
||||
|
||||
/*
|
||||
* Elements
|
||||
*/
|
||||
|
||||
/* Lists */
|
||||
.gaia-list {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.gaia-list li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.gaia-list li:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 15px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 15px;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gaia-list li:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gaia-list.active li:active,
|
||||
.gaia-list li.active:active {
|
||||
background-color: rgba(0, 213, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.gaia-list li.vbox {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* List header */
|
||||
.gaia-list header {
|
||||
padding: 0 30px;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
height: 30px;
|
||||
line-height: 40px;
|
||||
font-weight: normal;
|
||||
color: #ff4e00;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.gaia-list.sticky header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* List elements */
|
||||
.gaia-list li p,
|
||||
.gaia-list li label {
|
||||
-moz-margin-start: 15px;
|
||||
}
|
||||
|
||||
.gaia-list li p:not(:first-of-type) {
|
||||
color: #858585;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.gaia-list li p em {
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.gaia-list li p time {
|
||||
margin-right: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gaia-list label.pack-checkbox,
|
||||
.gaia-list label.pack-switch {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
min-height: 40px;
|
||||
padding: 10px 0;
|
||||
margin: -10px 0;
|
||||
-moz-margin-start: 15px;
|
||||
}
|
||||
|
||||
.gaia-list label.vbox.pack-checkbox,
|
||||
.gaia-list label.vbox.pack-switch {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gaia-list label.pack-checkbox:not(.reverse) {
|
||||
-moz-padding-start: 30px;
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.gaia-list label.pack-checkbox span:after {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.gaia-list label.pack-checkbox.reverse span:after,
|
||||
.gaia-list label.pack-switch span:after {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.gaia-list label.pack-checkbox span,
|
||||
.gaia-list label.pack-switch span,
|
||||
.gaia-list label p {
|
||||
word-wrap: break-word;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gaia-list label.pack-checkbox.reverse span,
|
||||
.gaia-list label.pack-checkbox.reverse p {
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.gaia-list label.pack-switch span,
|
||||
.gaia-list label.pack-switch p {
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
|
||||
.gaia-list label p {
|
||||
color: #858585;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.gaia-list li.icon {
|
||||
-moz-padding-start: 40px;
|
||||
background-position: left 15px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30px;
|
||||
}
|
||||
|
||||
.gaia-list [data-type=img],
|
||||
.gaia-list li img {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 0 1px #dedede;
|
||||
background: transparent center center / cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gaia-list li button,
|
||||
.gaia-list li .button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gaia-list li button + button,
|
||||
.gaia-list li p + button,
|
||||
.gaia-list li p + .button,
|
||||
.gaia-list li button + p,
|
||||
.gaia-list li .button + p,
|
||||
.gaia-list li label + button,
|
||||
.gaia-list li label + .button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.gaia-footer {
|
||||
border-top: 1px solid #e7e7e7;
|
||||
background-color: #fff;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gaia-footer p {
|
||||
margin: 0 15px 10px;
|
||||
word-break: break-all;
|
||||
text-align: center;
|
||||
color: #858585;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.gaia-footer button,
|
||||
.gaia-footer .button {
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.gaia-footer button:first-of-type,
|
||||
.gaia-footer .button:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Skins
|
||||
*/
|
||||
|
||||
.skin-comms .gaia-list header {
|
||||
color: #4997a7;
|
||||
}
|
||||
|
||||
.skin-organic .gaia-list header {
|
||||
background-color: #e7e7e7;
|
||||
color: #4d4d4d;
|
||||
font-size: 15px;
|
||||
line-height: 34px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Right-to-Left layout
|
||||
*/
|
||||
.gaia-list:-moz-dir(rtl) label.pack-checkbox span:after {
|
||||
left: unset;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.gaia-list:-moz-dir(rtl) label.pack-checkbox.reverse span:after,
|
||||
.gaia-list:-moz-dir(rtl) label.pack-switch span:after {
|
||||
left: 0;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
.gaia-list:-moz-dir(rtl) li.icon {
|
||||
background-position: right 15px center;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,342 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Layout</title>
|
||||
<meta name="description" content="Displaying an enumeration of a set of items ">
|
||||
|
||||
<link rel="stylesheet" href="../layout.css">
|
||||
|
||||
<!--
|
||||
This <style> and <link> is only used for the example code, is no needed for the real case use
|
||||
-->
|
||||
<link rel="stylesheet" href="../../style/headers.css">
|
||||
<link rel="stylesheet" href="../../style/switches.css">
|
||||
<link rel="stylesheet" href="../../style/buttons.css">
|
||||
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
.gaia-list li img[alt="placeholder"] {
|
||||
background: #ccc url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiLz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTAiIHkxPSIwIiB4Mj0iMC4wODIiIHkyPSI0OS45MTkiLz4NCjwvc3ZnPg0K);
|
||||
background-size: 100% 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.gaia-list .icon-call-incoming {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KPGc+Cgk8bGluZSBzdHJva2Utd2lkdGg9IjEiIHgxPSIiIHkxPSIiIHgyPSIiIHkyPSIiIHN0cm9rZT0iIzQ0OUZEQiIgb3BhY2l0eT0iIj48L2xpbmU+CjwvZz4KCTxwYXRoIGQ9Ik0xNy43MTQgOS44MzN2Mi42NTZjLTAuMzE3IDAuMDY1LTAuNjU3LTAuMDA3LTAuOTA2LTAuMjUzbC0zLjAyMS0zLjAyMWMtMC4zODktMC4zOTItMC4zODktMS4wMjUgMC0xLjQxNGwzLjAyMS0zLjAyMWMwLjI0OS0wLjI0NiAwLjU4OS0wLjMyIDAuOTA2LTAuMjU1djIuNjcxaDcuMDM1YzAuMTc3IDAuODcxIDAuMTc3IDEuNzY4LTAuMDAzIDIuNjM2aC03LjAzMnpNMTguMzU2IDIxLjY0N2wwLjAyMiAwLjAyMmMwLjYwOC0wLjMzNiAxLjIwOC0wLjczOCAxLjgwMy0xLjE3bDUuNjg0IDUuMDM0Yy0xLjE5OSAxLjAzNi0yLjQ5NyAxLjg4NC0zLjg2NiAyLjUyMy0zLjYzOS0wLjY3MS04LjI5OS0zLjM3Ni0xMi40ODUtNy41NjItNC4xODItNC4xODItNi44ODctOC44MzgtNy41NjEtMTIuNDc0IDAuNjQtMS4zNzIgMS40OS0yLjY3NCAyLjUyNi0zLjg3NWw1LjAzOSA1LjY5Yy0wLjQzMyAwLjU5My0wLjgzNSAxLjE5NS0xLjE3MSAxLjgwMWwwLjAyMSAwLjAyMmMtMC41ODkgMS4yOTMgMC43NzQgNC4xMSAzLjMyNyA2LjY2M3M1LjM2NyAzLjkxNyA2LjY2MSAzLjMyNnoiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4KPC9zdmc+Cg==);
|
||||
}
|
||||
|
||||
.fb-example > div {
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
overflow: hidden;
|
||||
padding: 10px 15px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.fb-example > div > div {
|
||||
position: relative;
|
||||
text-indent: 10px;
|
||||
}
|
||||
|
||||
.fb-example > div > div:before {
|
||||
content: "";
|
||||
top: 5px;
|
||||
left: 0;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background-color: #333;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.fb-example .vbox {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.fb-example .hbox {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.fb-example .hbox > div {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.fb-example .hbox > div:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="skin-comms">
|
||||
|
||||
<section role="region" class="vbox fit scroll">
|
||||
<header>
|
||||
<h1>App name</h1>
|
||||
</header>
|
||||
<section class="gaia-list fit scroll sticky">
|
||||
<article>
|
||||
<header>Paragraphs</header>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Only one paragraph</p>
|
||||
</li>
|
||||
<li class="vbox">
|
||||
<p></p>
|
||||
<p>Paragraph 2 (Paragraph 1 is empty)</p>
|
||||
</li>
|
||||
<li class="vbox">
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
<p>Paragraph 3</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<header>Active state</header>
|
||||
<ul>
|
||||
<li class="active">
|
||||
<p>This row has active state</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<header>Text + image</header>
|
||||
<ul>
|
||||
<li>
|
||||
<p class="fit">Contact name</p>
|
||||
<img src="noimage" alt="placeholder">
|
||||
</li>
|
||||
<li class="icon icon-call-incoming">
|
||||
<p class="fit">Contact name</p>
|
||||
<img src="noimage" alt="placeholder">
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<header>Buttons</header>
|
||||
<ul>
|
||||
<li>
|
||||
<button>Default button</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-view">View button</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon icon-dialog">Dialog button</button>
|
||||
</li>
|
||||
<li class="vbox">
|
||||
<button>Button</button>
|
||||
<p>Paragraph</p>
|
||||
</li>
|
||||
<li class="vbox">
|
||||
<p>Paragraph</p>
|
||||
<button>Button</button>
|
||||
</li>
|
||||
<li class="vbox">
|
||||
<label>Label</label>
|
||||
<button>Button</button>
|
||||
</li>
|
||||
<li class="vbox">
|
||||
<button>Button 1</button>
|
||||
<button>Button 2</button>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fit">
|
||||
<p>Text (fit)</p>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon icon-dialog">Select</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fit">
|
||||
<p>text (1/2)</p>
|
||||
</div>
|
||||
<div class="fit">
|
||||
<button class="icon icon-dialog">Select</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fit">
|
||||
<p>text (1/3)</p>
|
||||
</div>
|
||||
<div class="fit two">
|
||||
<button class="icon icon-dialog">Select</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fit">
|
||||
<p>text (1/4)</p>
|
||||
</div>
|
||||
<div class="fit three">
|
||||
<button class="icon icon-dialog">Select</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fit">
|
||||
<p>text (1/5)</p>
|
||||
</div>
|
||||
<div class="fit four">
|
||||
<button class="icon icon-dialog">Select</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fit">
|
||||
<p>text (1/6)</p>
|
||||
</div>
|
||||
<div class="fit five">
|
||||
<button class="icon icon-dialog">Select</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fit">
|
||||
<p>text (1/7)</p>
|
||||
</div>
|
||||
<div class="fit six">
|
||||
<button class="icon icon-dialog">Select</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<header>Checkboxes</header>
|
||||
<ul>
|
||||
<li class="active">
|
||||
<label class="pack-checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<span>Default checkbox</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="active">
|
||||
<label class="pack-checkbox danger">
|
||||
<input type="checkbox" checked>
|
||||
<span>Danger checkbox</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="active">
|
||||
<label class="pack-checkbox reverse">
|
||||
<input type="checkbox">
|
||||
<span>Reverse checkbox</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="active">
|
||||
<label class="pack-checkbox reverse danger">
|
||||
<input type="checkbox">
|
||||
<span>Reverse danger checkbox</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<header>Switches</header>
|
||||
<ul>
|
||||
<li class="active">
|
||||
<label class="pack-switch">
|
||||
<input type="checkbox">
|
||||
<span>Default switch</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="active">
|
||||
<label class="pack-switch">
|
||||
<input type="checkbox" checked>
|
||||
<span>Checked switch</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<!-- flexbox properties -->
|
||||
<article class="fb-example">
|
||||
<header>vbox: left</header>
|
||||
<div class="vbox left">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>vbox: center</header>
|
||||
<div class="vbox center">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>vbox: right</header>
|
||||
<div class="vbox right">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>vbox: top</header>
|
||||
<div class="vbox top">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>vbox: middle</header>
|
||||
<div class="vbox middle">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>vbox: bottom</header>
|
||||
<div class="vbox bottom">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>vbox: children positioning</header>
|
||||
<div class="vbox">
|
||||
<div class="self-left">Item 1: left</div>
|
||||
<div class="self-center">Item 2: center</div>
|
||||
<div class="self-right">Item 3: right</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="fb-example">
|
||||
<header>hbox: left</header>
|
||||
<div class="hbox">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>hbox: center</header>
|
||||
<div class="hbox center">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>hbox: right</header>
|
||||
<div class="hbox right">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>hbox: top</header>
|
||||
<div class="hbox top">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>hbox: middle</header>
|
||||
<div class="hbox middle">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>hbox: bottom</header>
|
||||
<div class="hbox bottom">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<header>hbox: children positioning</header>
|
||||
<div class="hbox">
|
||||
<div class="self-top">Item 1: top</div>
|
||||
<div class="self-middle">Item 2: middle</div>
|
||||
<div class="self-bottom">Item 3: bottom</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
/* ----------------------------------
|
||||
* Lists
|
||||
* ---------------------------------- */
|
||||
[data-type="list"] {
|
||||
font-weight: 400;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
[data-type="list"] ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-type="list"] strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Title divisors */
|
||||
[data-type="list"] header {
|
||||
padding: 0 1.5rem;
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
height: 3rem;
|
||||
line-height: 4rem;
|
||||
font-weight: normal;
|
||||
color: #ff4e00;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
html[dir="ltr"] [data-type="list"] header { text-align: left; }
|
||||
html[dir="rtl"] [data-type="list"] header { text-align: right; }
|
||||
|
||||
/* List items */
|
||||
[data-type="list"] li {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 0.1rem #e7e7e7;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-type="list"] li:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Pressed State */
|
||||
li a:active {
|
||||
background-color: transparent; /* remove default color for active state */
|
||||
}
|
||||
|
||||
[data-type="list"] li > a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
display: block;
|
||||
height: 6rem;
|
||||
position: relative;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[data-type="list"].active li:after,
|
||||
[data-type="list"] li > a:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: -1.5rem;
|
||||
top: 0;
|
||||
right: -1.5rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
[data-type="list"].active li:active:after,
|
||||
[data-type="list"] li > a:active:after {
|
||||
background-color: rgba(0,213,255,0.3);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
[data-type="list"] li[aria-disabled="true"] {
|
||||
pointer-events: none;
|
||||
opacity: 0.2;
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
/* Graphic content */
|
||||
[data-type="list"] aside {
|
||||
margin: 0;
|
||||
margin-inline-end: 0.5rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
html[dir="ltr"] [data-type="list"] aside { float: left; }
|
||||
html[dir="rtl"] [data-type="list"] aside { float: right; }
|
||||
|
||||
[data-type="list"] li > a aside,
|
||||
[data-type="list"] li > a aside.icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[data-type="list"] aside.pack-end {
|
||||
margin: 0;
|
||||
margin-inline-start: 0.5rem;
|
||||
text-align: end;
|
||||
}
|
||||
html[dir="ltr"] [data-type="list"] aside.pack-end { float: right; }
|
||||
html[dir="rtl"] [data-type="list"] aside.pack-end { float: left; }
|
||||
|
||||
[data-type="list"] aside.icon {
|
||||
width: 3rem;
|
||||
height: 6rem;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
font-size: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
html[dir="ltr"] [data-type="list"] aside.icon {
|
||||
background-position: left center;
|
||||
}
|
||||
html[dir="rtl"] [data-type="list"] aside.icon {
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
[data-type="list"] aside span[data-type=img],
|
||||
[data-type="list"] aside img {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 2.5rem;
|
||||
margin-top: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
background: transparent center center / cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-icon] {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-icon]:before {
|
||||
line-height: 6rem;
|
||||
text-align: center;
|
||||
width: 3rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Text content */
|
||||
[data-type="list"] li p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: #858585;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
[data-type="list"] li p:first-of-type {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.2rem;
|
||||
color: #333;
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
|
||||
[data-type="list"] li p:only-child,
|
||||
[data-type="list"] li p:first-of-type:last-of-type {
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
[data-type="list"] li p em {
|
||||
font-size: 1.5rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[data-type="list"] li p time {
|
||||
margin-inline-end: 0.3rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Checkable content */
|
||||
[data-type="list"] li > .pack-checkbox,
|
||||
[data-type="list"] li > .pack-switch {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -0.1rem;
|
||||
bottom: 0;
|
||||
/* Intentionally adding a conflict between right/left here: this will be
|
||||
* resolved differently whether we're in LTR or RTL mode. */
|
||||
right: -4rem;
|
||||
left: -4rem;
|
||||
width: calc(100% + 4rem);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[data-type="list"] li > .pack-checkbox input ~ span:after,
|
||||
[data-type="list"] li > .pack-switch input ~ span:after {
|
||||
/* because width is set in switches.css, the conflict between left/right will
|
||||
* be resolved in favor of "left" in LTR and "right" in RTL */
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
/* Edit mode */
|
||||
[data-type="list"] [data-type="edit"] li {
|
||||
padding-inline-start: 4rem;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-type="edit"] li > .pack-checkbox,
|
||||
[data-type="list"] [data-type="edit"] li > .pack-switch {
|
||||
pointer-events: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-type="edit"] li > a {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-type="edit"] li > a:active:after,
|
||||
[data-type="list"] [data-type="edit"] li > a:hover:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-type="list"] [data-type="edit"] aside.pack-end {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Themes */
|
||||
.skin-comms [data-type="list"] header {
|
||||
color: #4997a7;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue