first commit
This commit is contained in:
commit
3b683695fc
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Game Show</title>
|
||||
<link rel="stylesheet" href="onsenui/css/onsenui.css">
|
||||
<link rel="stylesheet" href="onsenui/css/onsen-css-components.min.css">
|
||||
<script src="onsenui/js/onsenui.min.js" charset="utf-8"></script>
|
||||
<script src="js/socket.io.js" charset="utf-8"></script>
|
||||
<script src="js/jquery-3.4.1.min.js" charset="utf-8"></script>
|
||||
<script src="js/main.js" charset="utf-8"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
#blocker {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<div id="blocker">
|
||||
</div>
|
||||
<ons-page>
|
||||
<ons-toolbar>
|
||||
<div class="center">Login</div>
|
||||
</ons-toolbar>
|
||||
<section style="padding: 8px">
|
||||
<ons-input modifier="large" id="name">Teamname</ons-input>
|
||||
<p></p>
|
||||
<ons-button modifier="large" onclick="login()">Login</ons-button>
|
||||
<p></p>
|
||||
<ons-button modifier="large" onclick="relogin()">Relogin</ons-button>
|
||||
</section>
|
||||
</ons-page>
|
||||
|
||||
<ons-page style="display: none;" id="MC">
|
||||
<ons-toolbar>
|
||||
<div class="center">Multiple Choise</div>
|
||||
</ons-toolbar>
|
||||
<section style="padding: 8px">
|
||||
<ons-button class="antwort" modifier="large" onclick="antwort('A')">A</ons-button>
|
||||
<p></p>
|
||||
<ons-button class="antwort" modifier="large" onclick="antwort('B')">B</ons-button>
|
||||
<p></p>
|
||||
<ons-button class="antwort" modifier="large" onclick="antwort('C')">C</ons-button>
|
||||
<p></p>
|
||||
<ons-button class="antwort" modifier="large" onclick="antwort('D')">D</ons-button>
|
||||
</section>
|
||||
</ons-page>
|
||||
<ons-page style="display: none;" id="BZ">
|
||||
<ons-toolbar>
|
||||
<div class="center">Buzzern</div>
|
||||
</ons-toolbar>
|
||||
<section style="padding: 8px">
|
||||
<ons-button class="antwort" modifier="large" onclick="antwort('BZ')">Buzzer</ons-button>
|
||||
</section>
|
||||
</ons-page>
|
||||
<ons-page style="display: none;" id="text">
|
||||
<ons-toolbar>
|
||||
<div class="center">Text</div>
|
||||
</ons-toolbar>
|
||||
<section style="padding: 8px">
|
||||
<ons-input modifier="large" id="textinput">Text</ons-input>
|
||||
<p></p>
|
||||
<ons-button class="antwort" modifier="large" onclick="senden()">Senden</ons-button>
|
||||
</section>
|
||||
</ons-page>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,57 @@
|
|||
var socket = null;
|
||||
var playerid = 0;
|
||||
$(function() {
|
||||
console.log("dom loaded");
|
||||
socket = io("http://192.168.137.1:3000")
|
||||
socket.on('connect', function(socket) {
|
||||
console.log("connected");
|
||||
});
|
||||
socket.on('type', function(e) {
|
||||
$("ons-page").hide();
|
||||
console.log(e);
|
||||
$("#" + e).show();
|
||||
});
|
||||
socket.on('login', function(e) {
|
||||
playerid = e;
|
||||
})
|
||||
socket.on('unlock', function(e) {
|
||||
$("#blocker").hide();
|
||||
$(".antwort").removeAttr("style");
|
||||
})
|
||||
socket.on('antwort', function(e) {
|
||||
if (e.antwort == "BZ") {
|
||||
$("#blocker").show();
|
||||
}
|
||||
})
|
||||
$(".antwort").click(function(e) {
|
||||
$(this).css("background-color", "lightblue");
|
||||
$("#blocker").show();
|
||||
})
|
||||
})
|
||||
|
||||
function login() {
|
||||
socket.emit("login", {
|
||||
name: $("#name").val()
|
||||
});
|
||||
}
|
||||
|
||||
function relogin() {
|
||||
socket.emit("relogin", {
|
||||
id: parseInt($("#name").val())
|
||||
});
|
||||
}
|
||||
|
||||
function senden() {
|
||||
var packet = {};
|
||||
packet.player = playerid;
|
||||
packet.antwort = $('#textinput').val();
|
||||
$('#textinput').val("");
|
||||
socket.emit('antwort', packet);
|
||||
}
|
||||
|
||||
function antwort(antwort) {
|
||||
var packet = {};
|
||||
packet.player = playerid;
|
||||
packet.antwort = antwort;
|
||||
socket.emit('antwort', packet);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,202 @@
|
|||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright 2013-2018 ASIAL CORPORATION
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
|
||||
<p align="center"><a href="https://onsen.io/" target="_blank"><img width="140" src="https://onsenui.github.io/art/logos/onsenui-logo-1.png"></a></p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://community.onsen.io/"><img src="https://img.shields.io/badge/forum-onsen--ui-FF412D.svg" alt="Forum"></a>
|
||||
<a href="https://github.com/OnsenUI/OnsenUI/blob/master/core/src/onsenui.d.ts"><img src="http://definitelytyped.org/badges/standard.svg" alt="TypeScript definitions"></a>
|
||||
<br>
|
||||
<a href="https://circleci.com/gh/OnsenUI/OnsenUI"><img src="https://circleci.com/gh/OnsenUI/OnsenUI.svg?style=shield" alt="Circle CI"></a>
|
||||
<a href="https://badge.fury.io/js/onsenui"><img src="https://badge.fury.io/js/onsenui.svg" alt="NPM version"></a>
|
||||
<a href="https://cdnjs.com/libraries/onsen"><img src="https://img.shields.io/cdnjs/v/onsen.svg" alt="CDNJS"></a>
|
||||
</p>
|
||||
|
||||
# [Onsen UI](https://onsen.io/) - Cross-Platform Hybrid App and PWA Framework
|
||||
|
||||
Onsen UI is an <strong>open source</strong> framework that makes it easy to create native-feeling Progressive Web Apps (PWAs) and hybrid apps.
|
||||
|
||||
The core library is written in <strong>pure Javascript</strong> (on top of <a href="http://webcomponents.org/">Web Components</a>) and is <strong>framework agnostic</strong>, which means you can use it with your favorite framework and its tools. We provide some extra binding packages to make it easy to use Onsen UI's API with many popular frameworks:
|
||||
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<td align="center" width="150"><a href="https://onsen.io/react"><img src="https://onsen.io/images/common/icn_react_top.svg" height="40"><br><strong>React</strong></a></td>
|
||||
<td align="center" width="150"><a href="https://onsen.io/angular2"><img src="https://onsen.io/images/common/icn_angular2_top.svg" height="40"><br><strong>Angular 2+</strong></a><br></td>
|
||||
<td align="center" width="150"><a href="https://onsen.io/vue"><img src="https://onsen.io/images/common/icn_vuejs_top.svg" height="40"><br><strong>Vue</strong></a><br></td>
|
||||
<td align="center" width="150"><a href="https://onsen.io/v2/docs/guide/angular1/index.html"><img src="https://onsen.io/images/common/icn_angular1_top.svg" height="40"><br><strong>AngularJS 1.x</strong></a><br></td>
|
||||
</tr></tbody>
|
||||
</table>
|
||||
|
||||
Some other frameworks are supported by __community__ packages (not tested or implemented by the core team): [Aurelia](https://www.npmjs.com/package/aurelia-onsenui), [EmberJS](https://www.npmjs.com/package/ember-onsenui).
|
||||
|
||||
Both <strong>flat (iOS) and Material (Android) designs</strong> are included. The components are optionally auto-styled based on the platform, which makes it possible to support both iOS and Android with the <strong>same source code</strong>.
|
||||
|
||||
|
||||
## Getting started
|
||||
We have several resources to help you get started creating hybrid apps and PWAs with Onsen UI:
|
||||
|
||||
* __The official docs__: We provide guides and references for all of the components and bindings, as well as how to publish your app. These are our _Getting Started_ guides:
|
||||
* [Core guide (no framework)](https://onsen.io/v2/guide)
|
||||
* [Vue guide](https://onsen.io/v2/guide/vue/)
|
||||
* [React guide](https://onsen.io/v2/guide/react/)
|
||||
* [Angular 2+ guide](https://onsen.io/v2/guide/angular2/)
|
||||
* [AngularJS 1.x guide](https://onsen.io/v2/guide/angular1/)
|
||||
* [jQuery guide](https://onsen.io/v2/guide/jquery/)
|
||||
* [Creating an Onsen UI hybrid app using Cordova](https://onsen.io/v2/guide/hybrid/cordova.html)
|
||||
* [Progressive Web Apps (PWAs) with Onsen UI](https://onsen.io/v2/guide/pwa/intro.html)
|
||||
* __Components overview__: a [list of included CSS components](https://onsen.io/v2/docs/css.html) in both flat and Material Design. Note that these components are just pure and performant CSS without JavaScript behavior. Some extra details (such as dragging or ripple effect) are added by Onsen UI custom elements.
|
||||
* __Playground__: an [interactive Onsen UI tutorial](https://onsen.io/playground/) where you can learn how to use Onsen UI and play around with the components.
|
||||
* __Blog__: there are lots of great tutorials and guides published in our [official Onsen UI blog](https://onsen.io/blog/categories/tutorial.html) and we are adding new content regularly.
|
||||
* __Support__: if you are having trouble using some component the best place to get help is the [Onsen UI Forum](https://community.onsen.io/) or the community-run [Discord Chat](https://discord.gg/JWhBbnE). We are also available to answer short questions on Twitter at [@Onsen_UI](https://twitter.com/Onsen_UI).
|
||||
|
||||
## Get Onsen UI
|
||||
|
||||
### __Download the latest released version__
|
||||
We have a [distribution repository](https://github.com/OnsenUI/OnsenUI-dist/releases) with changelog. Onsen UI is also available in __npm__, __bower__ and __jspm__. Example:
|
||||
|
||||
```bash
|
||||
npm install onsenui
|
||||
```
|
||||
|
||||
This downloads the core Onsen UI library. To install bindings, you can install `react-onsenui`, `vue-onsenui`, `ngx-onsenui` or `angularjs-onsenui`.
|
||||
|
||||
### __Download or request from a CDN__
|
||||
You can also take the necessary files from a CDN. Some of the options are [unpkg](https://unpkg.com/onsenui/), [jsDelivr](https://www.jsdelivr.com/package/npm/onsenui) and [cdnjs](https://cdnjs.com/libraries/onsen).
|
||||
|
||||
### __Get the latest development build__
|
||||
Optionally, you can download the [latest development build here](https://onsenui.github.io/latest-build). Be careful, usually everything there is already tested but it might be unstable sometimes.
|
||||
|
||||
## Examples with source code
|
||||
There are lots of sample applications written using Onsen UI. __[Here are some examples](https://onsen.io/samples) with source code and tutorials__ to give you an idea of what kind of apps you can create.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://argelius.github.io/angular2-onsenui-pokedex/" target="_blank"><img src="https://onsen.io/images/samples/pokedex-pikachu.png"></a>
|
||||
<a href="http://argelius.github.io/react-onsenui-redux-weather/demo.html" target="_blank"><img src="https://onsen.io/images/samples/react-redux-weather.png"></a>
|
||||
<a href="https://frandiox.github.io/OnsenUI-YouTube" target="_blank"><img src="https://onsen.io/images/samples/youtube.png"></a>
|
||||
</p>
|
||||
|
||||
## Onsen UI ecosystem
|
||||
Because sometimes a UI framework may not be enough to make hybrid app development easy, Onsen UI comes with a __complete ecosystem__ of well integrated tools. Meet [__Monaca__](https://monaca.io/).
|
||||
|
||||
<p align="center"><a href="https://monaca.io" target="_blank"><img width="300"src="https://onsenui.github.io/art/logos/monaca-logo-2.png"></a></p>
|
||||
|
||||
Developed by the Onsen UI team, __Monaca__ is a toolkit that makes hybrid mobile app development with __PhoneGap / Cordova__ simple and easy: Onsen UI Cordova templates, debugging suite, push notifications, remote build, back-end solutions, encryption, version control, continuous integration and more. Furthermore, it provides multiple development environments with everything already configured and ready to go:
|
||||
|
||||
<p align="center">
|
||||
<a href="https://monaca.io/cloud.html"><strong>Cloud IDE</strong></a> -
|
||||
<a href="https://monaca.io/cli.html"><strong>Command Line Interface</strong></a> -
|
||||
<a href="https://monaca.io/localkit.html"><strong>Localkit GUI</strong></a>
|
||||
</p>
|
||||
|
||||
Example with __CLI__:
|
||||
|
||||
```
|
||||
$ [sudo] npm -g install monaca
|
||||
$ monaca create helloworld # And choose the starter template
|
||||
$ monaca preview # Preview on the browser
|
||||
$ monaca debug # Preview on a real device
|
||||
$ monaca remote build --browser # Production build on the cloud
|
||||
```
|
||||
|
||||
See the [Onsen UI Getting Started Page](http://onsen.io/v2/guide/) for more information.
|
||||
|
||||
## Browser Support
|
||||
Onsen UI is tested to work with the following browsers and mobile OS.
|
||||
|
||||
* Android 4.4.4+
|
||||
* iOS 9+
|
||||
* Chrome
|
||||
* Safari
|
||||
|
||||
## Contribution
|
||||
We welcome your contribution, no matter how big or small! Please have a look at the [contribution guide](https://github.com/OnsenUI/OnsenUI/blob/master/CONTRIBUTING.md) for details about project structure, development environment, test suite, code style, etc. All the version updates are mentioned in the [changelog](https://github.com/OnsenUI/OnsenUI/blob/master/CHANGELOG.md).
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "onsenui",
|
||||
"homepage": "https://onsen.io",
|
||||
"authors": [
|
||||
"Kruy Vanna <kruyvanna@gmail.com>",
|
||||
"Mitsunori KUBOTA <anatoo.jp@gmail.com>"
|
||||
],
|
||||
"description": "Web Component inspired HTML5 UI framework for building modern mobile application",
|
||||
"main": [
|
||||
"js/onsenui.js",
|
||||
"css/onsenui.css",
|
||||
"css/onsen-css-components.css"
|
||||
],
|
||||
"keywords": [
|
||||
"onsenui",
|
||||
"angular",
|
||||
"html5",
|
||||
"cordova",
|
||||
"phonegap",
|
||||
"web",
|
||||
"component",
|
||||
"monaca"
|
||||
],
|
||||
"dependencies": {},
|
||||
"license": "Apache License, Version 2.0"
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
# Onsen CSS Components
|
||||
|
||||
Onsen CSS Components is CSS components for Cordova Apps.
|
||||
|
||||
|
||||
|
||||
|
||||
## How to Build
|
||||
|
||||
This CSS components is built by PostCSS + cssnext. You can build with following commands.
|
||||
|
||||
```
|
||||
$ yarn install --pure-lockfile
|
||||
$ yarn run build
|
||||
```
|
||||
|
||||
## How to Customize CSS Components
|
||||
|
||||
Execute the following command.
|
||||
|
||||
```
|
||||
$ yarn install --pure-lockfile
|
||||
$ yarn run serve
|
||||
```
|
||||
|
||||
When you open `http://localhost:4321/` in the browser, a preview of the CSS components is displayed.
|
||||
|
||||
When you edit the cssnext files under the `src` directory, the cssnext files is automatically built into the CSS and the browser is reloaded. The built CSS file is located in `./build/onsen-css-components.css`.
|
||||
|
||||
To customize theme colors, you can edit `./src/theme.css`. This file contains CSS variables for the theme colors.
|
||||
|
||||
If you want to customize components' details, you can edit `./src/components/*.css`. These files contain actual rules for all CSS components. But these files may be changed significantly by minor version release.
|
||||
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
const gulp = require('gulp');
|
||||
const pkg = require('./package.json');
|
||||
const corePkg = require('../package.json');
|
||||
const merge = require('event-stream').merge;
|
||||
const browserSync = require('browser-sync').create();
|
||||
const $ = require('gulp-load-plugins')();
|
||||
const eco = require('eco');
|
||||
const fs = require('fs');
|
||||
const ancss = require('@onsenui/ancss');
|
||||
const cssnextPlugin = require('postcss-cssnext');
|
||||
const reporter = require('postcss-reporter');
|
||||
const historyApiFallback = require('connect-history-api-fallback');
|
||||
const {rollup} = require('rollup');
|
||||
const babel = require('rollup-plugin-babel');
|
||||
const commonjs = require('rollup-plugin-commonjs');
|
||||
const glob = require('glob');
|
||||
const rimraf = require('rimraf');
|
||||
const path = require('path');
|
||||
const yaml = require('js-yaml');
|
||||
|
||||
// Include these plugins outside $ to fix gulp-hub
|
||||
const plumber = require('gulp-plumber');
|
||||
const postcss = require('gulp-postcss');
|
||||
const stylelintPlugin = require('gulp-stylelint');
|
||||
|
||||
const prefix = __dirname + '/../build/css/';
|
||||
const babelrc = Object.assign({}, corePkg.babel);
|
||||
babelrc.babelrc = babelrc.presets[0][1].modules = false;
|
||||
babelrc.exclude = 'node_modules/**';
|
||||
|
||||
const cwdOption = {
|
||||
cwd: __dirname // makes sure the correct relative path is used when tasks are run from main OnsenUI gulpfile
|
||||
};
|
||||
|
||||
////////////////////////////////////////
|
||||
// build-css
|
||||
////////////////////////////////////////
|
||||
gulp.task('build-css', gulp.series(cssClean, stylelint, cssnext, cssmin));
|
||||
|
||||
////////////////////////////////////////
|
||||
// build
|
||||
////////////////////////////////////////
|
||||
gulp.task('build', gulp.series('build-css', generatePreview));
|
||||
|
||||
////////////////////////////////////////
|
||||
// stylelint
|
||||
////////////////////////////////////////
|
||||
function stylelint() {
|
||||
return gulp.src([
|
||||
'./src/**/*.css',
|
||||
'!./src/components/combination.css', // not following BEM
|
||||
'!./src/iphonex-support/**/*.css' // not following BEM
|
||||
], cwdOption)
|
||||
.pipe(stylelintPlugin({
|
||||
failAfterError: false,
|
||||
reporters: [{formatter: 'string', console: true}],
|
||||
configFile: path.join(__dirname, 'stylelint.config.js') // uses css-components/stylelint.config.js even when run from main gulpfile
|
||||
}));
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
// cssmin
|
||||
////////////////////////////////////////
|
||||
function cssmin() {
|
||||
return gulp.src(prefix + '{*-,}onsen-css-components.css')
|
||||
.pipe($.cssmin())
|
||||
.pipe($.rename({suffix: '.min'}))
|
||||
.pipe(gulp.dest('./build/'))
|
||||
.pipe(gulp.dest(prefix));
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
// cssnext
|
||||
////////////////////////////////////////
|
||||
function cssnext() {
|
||||
const plugins = [
|
||||
require('postcss-import'),
|
||||
require('postcss-base64')({
|
||||
extensions: ['.svg'],
|
||||
root: __dirname + '/src/components/'
|
||||
}),
|
||||
cssnextPlugin({
|
||||
browsers: babelrc.presets[0][1].targets.browsers,
|
||||
}),
|
||||
reporter({
|
||||
clearAllMessages: true,
|
||||
clearReportedMessages: true,
|
||||
throwError: false
|
||||
})
|
||||
];
|
||||
|
||||
return gulp.src('src/{*-,}onsen-css-components.css', cwdOption)
|
||||
//.pipe(plumber()) // this was causing the task to never complete with gulp 4, but why...?
|
||||
.pipe(postcss(plugins))
|
||||
.pipe(gulp.dest('./build/'))
|
||||
.pipe(gulp.dest(prefix))
|
||||
.pipe(browserSync.stream());
|
||||
}
|
||||
gulp.task('cssnext', gulp.series(stylelint, cssnext));
|
||||
|
||||
function cssClean(done) {
|
||||
rimraf.sync(__dirname + '/build/{*-,}onsen-css-components.css');
|
||||
rimraf.sync(__dirname + '/build/{*-,}onsen-css-components.min.css');
|
||||
rimraf.sync(prefix + '/{*-,}onsen-css-components.css');
|
||||
rimraf.sync(prefix + '/{*-,}onsen-css-components.min.css');
|
||||
done();
|
||||
}
|
||||
gulp.task('css-clean', cssClean);
|
||||
|
||||
////////////////////////////////////////
|
||||
// generate-preview
|
||||
////////////////////////////////////////
|
||||
let lastMarkupToken = '';
|
||||
|
||||
function generatePreview(done) {
|
||||
const components = parseComponents();
|
||||
const markupToken = identifyComponentsMarkup(components);
|
||||
|
||||
if (markupToken !== lastMarkupToken) {
|
||||
gulp.series(previewAssets, previewJs, (done) => {
|
||||
generate(components);
|
||||
browserSync.reload();
|
||||
|
||||
lastMarkupToken = markupToken;
|
||||
done();
|
||||
})();
|
||||
done();
|
||||
} else {
|
||||
lastMarkupToken = markupToken;
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
function generatePreviewForce(done) {
|
||||
generate(parseComponents());
|
||||
browserSync.reload();
|
||||
done();
|
||||
}
|
||||
exports['generate-preview-force'] = gulp.series(previewAssets, previewJs, generatePreviewForce);
|
||||
|
||||
function generate(components) {
|
||||
const template = fs.readFileSync(__dirname + '/previewer-src/index.html.eco', 'utf-8');
|
||||
const patterns = yaml.safeLoadAll(fs.readFileSync(__dirname + '/patterns.yaml', 'utf-8'));
|
||||
const themes = glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(filePath => path.basename(filePath, '.css'));
|
||||
const toJSON = JSON.stringify.bind(JSON);
|
||||
|
||||
fs.writeFileSync(__dirname + '/build/index.html', eco.render(template, {toJSON, components, themes, patterns}), 'utf-8');
|
||||
}
|
||||
|
||||
function identifyComponentsMarkup(componentsJSON) {
|
||||
const token = componentsJSON.map(component => {
|
||||
return component.annotation.markup;
|
||||
}).join('');
|
||||
|
||||
return token;
|
||||
}
|
||||
|
||||
function parseComponents() {
|
||||
const css = fs.readFileSync(__dirname + '/build/onsen-css-components.css', 'utf-8');
|
||||
const components = ancss.parse(css, {detect: line => line.match(/^~/)});
|
||||
return components || [];
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
// preview-assets
|
||||
////////////////////////////////////////
|
||||
function previewAssets() {
|
||||
return gulp.src('previewer-src/*.{svg,css}')
|
||||
.pipe(gulp.dest('./build/'));
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
// preview-js
|
||||
////////////////////////////////////////
|
||||
function previewJs() {
|
||||
return rollup({
|
||||
input: 'previewer-src/app.js',
|
||||
plugins: [
|
||||
commonjs,
|
||||
babel(babelrc)
|
||||
]
|
||||
})
|
||||
.then(bundle => {
|
||||
return bundle.write({
|
||||
file: 'build/app.gen.js',
|
||||
format: 'umd',
|
||||
sourcemap: 'inline'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
// reset-console
|
||||
////////////////////////////////////////
|
||||
function reset(done) {
|
||||
process.stdout.write('\x1Bc');
|
||||
done();
|
||||
}
|
||||
|
||||
const outputDevServerInfo = (() => {
|
||||
let defer = true;
|
||||
|
||||
return function () {
|
||||
if (defer) {
|
||||
setTimeout(() => {
|
||||
output();
|
||||
defer = true;
|
||||
}, 60);
|
||||
defer = false;
|
||||
}
|
||||
}
|
||||
|
||||
function output() {
|
||||
const localUrl = browserSync.getOption('urls').get('local');
|
||||
const externalUrl = browserSync.getOption('urls').get('external');
|
||||
|
||||
console.log('\nAccess URLs:');
|
||||
console.log(' Local:', $.util.colors.magenta(localUrl));
|
||||
console.log(' External:', $.util.colors.magenta(externalUrl));
|
||||
console.log();
|
||||
|
||||
displayBuildCSSInfo();
|
||||
}
|
||||
})();
|
||||
|
||||
function displayBuildCSSInfo() {
|
||||
|
||||
console.log('Built CSS Files:')
|
||||
getCSSPaths().forEach(cssPath => {
|
||||
console.log(' ' + $.util.colors.magenta(cssPath));
|
||||
});
|
||||
|
||||
function getCSSPaths() {
|
||||
return glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(cssPath => {
|
||||
return '.' + path.sep + path.relative(__dirname, cssPath);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getCSSPaths() {
|
||||
return glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(cssPath => {
|
||||
return '.' + path.sep + path.relative(__dirname, cssPath);
|
||||
});
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
// serve
|
||||
////////////////////////////////////////
|
||||
function serve(done) {
|
||||
gulp.watch(['src/**/*.css'], () => {
|
||||
reset();
|
||||
gulp.series('build-css', 'generate-preview', outputDevServerInfo);
|
||||
});
|
||||
|
||||
gulp.watch(['previewer-src/**', 'patterns.yaml'], () => {
|
||||
reset();
|
||||
gulp.series('generate-preview-force', outputDevServerInfo)
|
||||
});
|
||||
|
||||
browserSync.emitter.on('init', outputDevServerInfo);
|
||||
|
||||
browserSync.init({
|
||||
logLevel: 'silent',
|
||||
ui: false,
|
||||
port: 4321,
|
||||
notify: false,
|
||||
server: {
|
||||
baseDir: __dirname + '/build',
|
||||
middleware: [historyApiFallback()],
|
||||
},
|
||||
startPath: '/',
|
||||
open: false
|
||||
});
|
||||
}
|
||||
|
||||
exports.serve = gulp.series('build', serve);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
|
|
@ -0,0 +1,48 @@
|
|||
{
|
||||
"name": "",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "gulp build",
|
||||
"serve": "gulp serve"
|
||||
},
|
||||
"dependencies": {
|
||||
"browser-sync": "^2.18.6",
|
||||
"eco": "^1.1.0-rc-3",
|
||||
"event-stream": "3.3.4",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-cssmin": "^0.1.7",
|
||||
"gulp-less": "^1.2.3",
|
||||
"gulp-load-plugins": "^0.5.0",
|
||||
"gulp-order": "^1.0.6",
|
||||
"gulp-plumber": "^0.6.1",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-shell": "^0.2.4",
|
||||
"gulp-stylelint": "^3.9.0",
|
||||
"gulp-stylus": "^1.0.0",
|
||||
"gulp-util": "^2.2.14",
|
||||
"immutable-css": "^1.1.2",
|
||||
"postcss-base64": "^0.6.1",
|
||||
"postcss-cssnext": "^3.0.2",
|
||||
"postcss-import": "^9.1.0",
|
||||
"postcss-reporter": "^3.0.0",
|
||||
"rimraf": "^2.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@onsenui/ancss": "^1.0.0",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-stage-3": "^6.24.1",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"glob": "^7.1.2",
|
||||
"gulp-file": "^0.3.0",
|
||||
"js-yaml": "^3.10.0",
|
||||
"rollup": "^0.51.5",
|
||||
"rollup-plugin-babel": "^3.0.2",
|
||||
"rollup-plugin-commonjs": "^8.2.6"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,376 @@
|
|||
---
|
||||
name: Basic
|
||||
markup: |
|
||||
<div class="page">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar__left"><span class="toolbar-button">Label</span></div>
|
||||
<div class="toolbar__center">Title</div>
|
||||
<div class="toolbar__right"><span class="toolbar-button">Label</span></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
|
||||
<div class="list-title">Title</div>
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
<div class="list-item__center">Item</div>
|
||||
</li>
|
||||
<li class="list-item">
|
||||
<div class="list-item__center">Item</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
<div class="list-item__center">
|
||||
<div class="list-item__title">
|
||||
Title
|
||||
</div>
|
||||
<div class="list-item__subtitle">
|
||||
Subtitle
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-item">
|
||||
<div class="list-item__center">
|
||||
<div class="list-item__title">
|
||||
Title
|
||||
</div>
|
||||
<div class="list-item__subtitle">
|
||||
Subtitle
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="bottom-bar">
|
||||
<div class="bottom-bar__line-height" style="text-align:center">Label</div>
|
||||
</div>
|
||||
</div>
|
||||
---
|
||||
name: Material Basic
|
||||
markup: |
|
||||
<div class="page page--material">
|
||||
<div class="toolbar toolbar--material">
|
||||
<div class="toolbar__left toolbar--material__left"></div>
|
||||
<div class="toolbar__center toolbar--material__center">Title</div>
|
||||
<div class="toolbar__right toolbar--material__right"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="list-title list-title--material">Title</h3>
|
||||
<ul class="list list--material">
|
||||
<li class="list-item list-item--material">
|
||||
<div class="list-item__center list-item--material__center">Item</div>
|
||||
</li>
|
||||
<li class="list-item list-item--material">
|
||||
<div class="list-item__center list-item--material__center">Item</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<ul class="list list--material">
|
||||
<li class="list-item list-item--material">
|
||||
<div class="list-item__center list-item--material__center">
|
||||
<div class="list-item__title list-item--material__title">Title</div>
|
||||
<div class="list-item__subtitle list-item--material__subtitle">Subtitle</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-item list-item--material">
|
||||
<div class="list-item__center list-item--material__center">
|
||||
<div class="list-item__title list-item--material__title">Title</div>
|
||||
<div class="list-item__subtitle list-item--material__subtitle">Subtitle</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
---
|
||||
name: Settings
|
||||
markup: |
|
||||
<div class="page">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar__left"><span class="toolbar-button">Label</span></div>
|
||||
<div class="toolbar__center">Title</div>
|
||||
<div class="toolbar__right"><span class="toolbar-button">Label</span></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
<div class="list-item__left">
|
||||
<i class="ion-ios-volume-low" style="font-size: 28px"></i>
|
||||
</div>
|
||||
<div class="list-item__center">
|
||||
<div class="range" style="width: 100%">
|
||||
<input type="range" class="range__input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<i class="ion-ios-volume-high" style="font-size: 28px"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
<div class="list-item__center">
|
||||
Label
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<label class="switch">
|
||||
<input type="checkbox" class="switch__input" checked>
|
||||
<div class="switch__toggle">
|
||||
<div class="switch__handle"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item list-item--tappable">
|
||||
<div class="list-item__left">
|
||||
<label class="checkbox checkbox--noborder">
|
||||
<input id="s1" type="checkbox" class="checkbox__input checkbox--noborder__input">
|
||||
<div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
|
||||
</label>
|
||||
</div>
|
||||
<label for="s1" class="list-item__center">
|
||||
Checkbox
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item list-item--tappable">
|
||||
<div class="list-item__left">
|
||||
<label class="checkbox checkbox--noborder">
|
||||
<input id="s2" type="checkbox" class="checkbox__input checkbox--noborder__input" checked>
|
||||
<div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
|
||||
</label>
|
||||
</div>
|
||||
<label for="s2" class="list-item__center">
|
||||
Checkbox
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
---
|
||||
name: Material Settings
|
||||
markup: |
|
||||
<div class="page page--material">
|
||||
<div class="toolbar toolbar--material">
|
||||
<div class="toolbar__left toolbar--material__left"></div>
|
||||
<div class="toolbar__center toolbar--material__center">Title</div>
|
||||
<div class="toolbar__right toolbar--material__right"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="list list--material">
|
||||
<li class="list-item list-item--material">
|
||||
<div class="list-item__left list-item--material__left" style="min-width: 0; width: 20px;">
|
||||
<i class="ion-ios-volume-low" style="font-size: 28px"></i>
|
||||
</div>
|
||||
<div class="list-item__center list-item--material__center">
|
||||
<div class="range range--material" style="width: 100%">
|
||||
<input type="range" class="range__input range--material__input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item__right list-item--material__right">
|
||||
<i class="ion-ios-volume-high" style="font-size: 28px"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="list list--material">
|
||||
<li class="list-item list-item--material">
|
||||
<div class="list-item__left list-item--material__left">
|
||||
Label
|
||||
</div>
|
||||
<div class="list-item__center list-item--material__center">
|
||||
</div>
|
||||
<div class="list-item__right list-item--material__right">
|
||||
<label class="switch switch--material">
|
||||
<input type="checkbox" class="switch__input switch--material__input" checked>
|
||||
<div class="switch__toggle switch--material__toggle">
|
||||
<div class="switch__handle switch--material__handle"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="list list--material">
|
||||
<li class="list-item list-item--material">
|
||||
<div class="list-item__left list-item--material__left">
|
||||
<label class="checkbox checkbox--material">
|
||||
<input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">
|
||||
<div class="checkbox__checkmark checkbox--material__checkmark"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label for="checkbox3" class="list-item__center list-item--material__center">
|
||||
<div class="list-item__title list-item--material__title">Checkbox</div>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="list-item list-item--material">
|
||||
<div class="list-item__left list-item--material__left">
|
||||
<label class="checkbox checkbox--material">
|
||||
<input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">
|
||||
<div class="checkbox__checkmark checkbox--material__checkmark"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label for="checkbox4" class="list-item__center list-item--material__center">
|
||||
<div class="list-item__title list-item--material__title">Checkbox</div>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
---
|
||||
name: Tabbar
|
||||
markup: |
|
||||
<div class="page">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar__left"></div>
|
||||
<div class="toolbar__center">Title</div>
|
||||
<div class="toolbar__right"></div>
|
||||
</div>
|
||||
|
||||
<div class="tabbar">
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-a" checked="checked">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-record"></i>
|
||||
<div class="tabbar__label">Label</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-a">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-record"></i>
|
||||
<div class="tabbar__label">Label</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-a">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-record"></i>
|
||||
<div class="tabbar__label">Label</div>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
---
|
||||
name: Material Tabbar
|
||||
markup: |
|
||||
<div class="page page--material">
|
||||
<div class="toolbar toolbar--material">
|
||||
<div class="toolbar__left toolbar--material__left"></div>
|
||||
<div class="toolbar__center toolbar--material__center">Title</div>
|
||||
<div class="toolbar__right toolbar--material__right"></div>
|
||||
</div>
|
||||
|
||||
<div class="tabbar tabbar--material tabbar--top">
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="material-tabbar" checked="checked">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon ion-record"></i>
|
||||
<div class="tabbar__label tabbar--material__label">Label</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="material-tabbar" checked="checked">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon ion-record"></i>
|
||||
<div class="tabbar__label tabbar--material__label">Label</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="material-tabbar" checked="checked">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon ion-record"></i>
|
||||
<div class="tabbar__label tabbar--material__label">Label</div>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
---
|
||||
name: Alert Dialog
|
||||
markup: |
|
||||
<div class="page">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar__left"><span class="toolbar-button">Label</span></div>
|
||||
<div class="toolbar__center">Title</div>
|
||||
<div class="toolbar__right"><span class="toolbar-button">Label</span></div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="alert-dialog-mask"></div>
|
||||
<div class="alert-dialog">
|
||||
<div class="alert-dialog-container">
|
||||
<div class="alert-dialog-title">Alert</div>
|
||||
|
||||
<div class="alert-dialog-content">
|
||||
Hello World!
|
||||
</div>
|
||||
|
||||
<div class="alert-dialog-footer">
|
||||
<button class="alert-dialog-button alert-dialog-button--primal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
---
|
||||
name: Material Alert Dialog
|
||||
markup: |
|
||||
<div class="page page--material">
|
||||
<div class="toolbar toolbar--material">
|
||||
<div class="toolbar__left toolbar--material__left"></div>
|
||||
<div class="toolbar__center toolbar--material__center">Title</div>
|
||||
<div class="toolbar__right toolbar--material__right"></div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-dialog-mask alert-dialog-mask--material"></div>
|
||||
<div class="alert-dialog alert-dialog--material">
|
||||
<div class="alert-dialog-container alert-dialog-container--material">
|
||||
<div class="alert-dialog-title alert-dialog-title--material">
|
||||
Dialog title
|
||||
</div>
|
||||
<div class="alert-dialog-content alert-dialog-content--material">
|
||||
Some dialog content.
|
||||
</div>
|
||||
<div class="alert-dialog-footer alert-dialog-footer--material">
|
||||
<button class="alert-dialog-button alert-dialog-button--material">OK</button>
|
||||
<button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import {createAppPageComponent} from './components/app-page';
|
||||
|
||||
function init() {
|
||||
const components = loadComponents();
|
||||
const categories = loadCategories(components);
|
||||
const themes = loadThemes();
|
||||
const patterns = loadPatterns();
|
||||
|
||||
window.components = components;
|
||||
window.categories = categories;
|
||||
window.themes = themes;
|
||||
window.patterns = patterns;
|
||||
|
||||
const app = new Vue(createAppPageComponent({
|
||||
components,
|
||||
categories
|
||||
}));
|
||||
};
|
||||
|
||||
function loadCategories(components) {
|
||||
const set = new Set();
|
||||
components.forEach(component => {
|
||||
set.add(component.category);
|
||||
});
|
||||
|
||||
return [...set.values()].map(value => {
|
||||
return {
|
||||
name: value,
|
||||
hash: value.toLowerCase().replace(/ /g, '_')
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function loadComponents() {
|
||||
return JSON.parse(document.querySelector('#data').getAttribute('data-components')).map(component => {
|
||||
component = component.annotation;
|
||||
component.id = component.name.toLowerCase().replace(/ /g, '_');
|
||||
return component;
|
||||
});
|
||||
}
|
||||
|
||||
function loadThemes() {
|
||||
const themes = JSON.parse(document.querySelector('#data').getAttribute('data-themes')).map(theme => {
|
||||
return theme;
|
||||
}).filter(theme => {
|
||||
return theme !== 'onsen-css-components';
|
||||
});
|
||||
|
||||
// デフォルトのテーマを先頭に追加
|
||||
themes.unshift('onsen-css-components');
|
||||
|
||||
return themes;
|
||||
}
|
||||
|
||||
function loadPatterns() {
|
||||
return JSON.parse(document.querySelector('#data').getAttribute('data-patterns')).map(pattern => {
|
||||
pattern.id = pattern.name.toLowerCase().replace(/ +/g, '_');
|
||||
|
||||
return pattern;
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = init;
|
||||
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
import {ComponentsPage} from './components-page';
|
||||
import {ComponentPage} from './component-page';
|
||||
import {CategoryPage} from './category-page';
|
||||
import {PatternsPage} from './patterns-page';
|
||||
import {PatternPage} from './pattern-page';
|
||||
import {NotFoundPage} from './notfound-page';
|
||||
import {getQueryParams, mergeQueryString, parseQueryString} from '../util';
|
||||
|
||||
export const createAppPageComponent = ({components, categories}) => ({
|
||||
el: '#app',
|
||||
data: {
|
||||
components,
|
||||
categories
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<div class="pv-side-navi">
|
||||
<a class="pv-side-navi__title" href="/">
|
||||
Onsen<br />
|
||||
CSS<br />
|
||||
Components
|
||||
</a>
|
||||
|
||||
<div>
|
||||
<a class="pv-side-navi__category" href="/">Components</a>
|
||||
<div v-for="category in categories" class="pv-side-navi__category-item">
|
||||
<a :href="'/categories/' + category.hash" class="pv-side-navi__item-link">{{category.name}}</a>
|
||||
</div>
|
||||
<a class="pv-side-navi__category" href="/patterns">Patterns</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<my-router :base-params="createParams()" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
'my-router': createRouter()
|
||||
},
|
||||
methods: {
|
||||
createParams() {
|
||||
const params = {};
|
||||
|
||||
params.components = [].concat(this.components);
|
||||
params.categories = [].concat(this.categories);
|
||||
|
||||
return params;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const createRouter = () => {
|
||||
return {
|
||||
props: ['baseParams'],
|
||||
data: () => {
|
||||
return {
|
||||
component: ComponentsPage,
|
||||
params: {},
|
||||
query: getQueryParams()
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// Load query string
|
||||
page('*', (context, next) => {
|
||||
requestAnimationFrame(() => {
|
||||
context.query = parseQueryString(location.search.slice(0));
|
||||
next();
|
||||
});
|
||||
});
|
||||
|
||||
page('*', (context, next) => {
|
||||
document.body.scrollTop = document.body.scrollLeft = 0;
|
||||
|
||||
// Load selected theme css.
|
||||
const theme = context.query.theme;
|
||||
if (typeof theme === 'string' && theme !== '') {
|
||||
document.querySelector('#theme-css').setAttribute('href', `/${theme}.css`);
|
||||
} else {
|
||||
document.querySelector('#theme-css').setAttribute('href', '/onsen-css-components.css');
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
page('/components/:id', (context) => {
|
||||
this.component = ComponentPage;
|
||||
this.params = context.params;
|
||||
this.query = context.query;
|
||||
});
|
||||
|
||||
page('/categories/:id', (context) => {
|
||||
this.component = CategoryPage;
|
||||
this.params = context.params;
|
||||
this.query = context.query;
|
||||
});
|
||||
|
||||
page('/patterns', (context) => {
|
||||
this.component = PatternsPage;
|
||||
this.params = context.params;
|
||||
this.query = context.query;
|
||||
});
|
||||
|
||||
page('/patterns/:id', (context) => {
|
||||
this.component = PatternPage;
|
||||
this.params = context.params;
|
||||
this.query = context.query;
|
||||
});
|
||||
|
||||
page('/', (context) => {
|
||||
this.component = ComponentsPage;
|
||||
this.params = context.params;
|
||||
this.query = context.query;
|
||||
});
|
||||
|
||||
page('*', () => {
|
||||
this.component = NotFoundPage;
|
||||
this.params = context.params;
|
||||
this.query = context.query;
|
||||
});
|
||||
|
||||
page({click: false});
|
||||
},
|
||||
render(h) {
|
||||
const props = {};
|
||||
|
||||
if (this.baseParams) {
|
||||
for (let key in this.baseParams) {
|
||||
if (this.baseParams.hasOwnProperty(key)) {
|
||||
props[key] = this.baseParams[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let key in this.params) {
|
||||
if (this.params.hasOwnProperty(key)) {
|
||||
props[key] = this.params[key];
|
||||
}
|
||||
}
|
||||
|
||||
props.query = {};
|
||||
for (let key in this.query) {
|
||||
if (this.query.hasOwnProperty(key)) {
|
||||
props.query[key] = this.query[key];
|
||||
}
|
||||
}
|
||||
|
||||
return h(this.component, {props});
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
document.body.addEventListener('click', e => {
|
||||
if (e.metaKey || e.ctrlKey || e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ensure link
|
||||
let el = e.target;
|
||||
while (el && 'A' !== el.nodeName) {
|
||||
el = el.parentNode;
|
||||
}
|
||||
if (!el || 'A' !== el.nodeName) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ensure non-hash for the same path
|
||||
var link = el.getAttribute('href');
|
||||
if (el.pathname === location.pathname && (el.hash || '#' === link)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for mailto: in the href
|
||||
if (link && link.indexOf('mailto:') > -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check target
|
||||
if (el.target) {
|
||||
return;
|
||||
}
|
||||
|
||||
// rebuild path
|
||||
const path = el.pathname + mergeQueryString(el.search, location.search) + (el.hash || '');
|
||||
|
||||
e.preventDefault();
|
||||
page.show(path);
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import {PreviewComponent} from './preview-component';
|
||||
import {ThemeSelect} from './theme-select';
|
||||
|
||||
export const CategoryPage = {
|
||||
props: ['components', 'categories', 'id', 'query'],
|
||||
template: `
|
||||
<div class="pv-content">
|
||||
|
||||
<h2 class="pv-content__header">{{category.name}} Components</h2>
|
||||
|
||||
<theme-select :theme="query.theme" :query="query" />
|
||||
|
||||
<div class="pv-components">
|
||||
<css-component v-for="component in filterComponents()" :component="component" :key="component.id" />
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
'css-component': PreviewComponent,
|
||||
'theme-select': ThemeSelect
|
||||
},
|
||||
computed: {
|
||||
category() {
|
||||
return this.categories.filter(category => category.hash === this.id)[0];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterComponents() {
|
||||
const category = this.category;
|
||||
const components = this.components.filter(component => {
|
||||
return component.category === category.name;
|
||||
});
|
||||
return components;
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import {ComponentExample} from './preview-component.js';
|
||||
import {ThemeSelect} from './theme-select';
|
||||
|
||||
export const ComponentPage = {
|
||||
props: ['components', 'id', 'query'],
|
||||
components: {
|
||||
'component-example': ComponentExample,
|
||||
'theme-select': ThemeSelect
|
||||
},
|
||||
computed: {
|
||||
component() {
|
||||
return this.components.filter(component => component.id === this.id)[0];
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="pv-content" v-if="component">
|
||||
<div>
|
||||
<h2 class="pv-content__header">{{component.name}}</h2>
|
||||
|
||||
<theme-select :theme="query.theme" :query="query" />
|
||||
|
||||
<h3 class="pv-title-label">Example</h3>
|
||||
|
||||
<component-example :component="component" />
|
||||
|
||||
<h3 class="pv-title-label">HTML</h3>
|
||||
|
||||
<pre class="pv-markup">{{component.markup}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import {PreviewComponent} from './preview-component';
|
||||
import {PlatformSelect} from './platform-select';
|
||||
import {ThemeSelect} from './theme-select';
|
||||
|
||||
export const ComponentsPage = {
|
||||
props: ['components', 'categories', 'query'],
|
||||
template: `
|
||||
<div class="pv-content">
|
||||
<platform-select :platform="query.platform" />
|
||||
|
||||
<h2 class="pv-content__header">Components</h2>
|
||||
|
||||
<theme-select :theme="query.theme" :query="query" />
|
||||
|
||||
<div class="pv-components">
|
||||
<css-component v-for="component in filterComponents" :component="component" :key="component.id" />
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data: () => ({
|
||||
themes: window.themes
|
||||
}),
|
||||
components: {
|
||||
'css-component': PreviewComponent,
|
||||
'platform-select': PlatformSelect,
|
||||
'theme-select': ThemeSelect
|
||||
},
|
||||
computed: {
|
||||
filterComponents() {
|
||||
const components = this.components;
|
||||
if (this.query.platform === 'android') {
|
||||
return components.filter(function(component) {
|
||||
return component.name.match(/Material/);
|
||||
});
|
||||
} else if (this.query.platform === 'ios') {
|
||||
return components.filter(function(component) {
|
||||
return !component.name.match(/Material/);
|
||||
});
|
||||
}
|
||||
return components;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
download(event) {
|
||||
const theme = this.$refs.themeSelect.value;
|
||||
if (!theme) {
|
||||
window.open('/onsen-css-components.css');
|
||||
} else {
|
||||
window.open(`${theme}.css`);
|
||||
}
|
||||
event.preventDefault();
|
||||
},
|
||||
changeTheme(event) {
|
||||
const theme = event.target.value;
|
||||
const suffix = this.query.platform ? `platform=${this.query.platform}` : '';
|
||||
|
||||
if (theme === 'onsen-css-components') {
|
||||
if (suffix === '') {
|
||||
page.show('/');
|
||||
} else {
|
||||
page.show(`?${suffix}`);
|
||||
}
|
||||
} else {
|
||||
page.show(`?theme=${theme}${suffix === '' ? '' : `&${suffix}`}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
export const NotFoundPage = {
|
||||
props: ['components', 'categories', 'id', 'query'],
|
||||
template: `
|
||||
<div class="pv-content">
|
||||
<h2 class="pv-content__header">Not Found</h2>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import {ThemeSelect} from './theme-select';
|
||||
|
||||
export const PatternPage = {
|
||||
props: ['id', 'query'],
|
||||
data() {
|
||||
const pattern = window.patterns.filter(pattern => {
|
||||
return pattern.id == this.id;
|
||||
})[0];
|
||||
|
||||
return {pattern};
|
||||
},
|
||||
components: {
|
||||
'theme-select': ThemeSelect
|
||||
},
|
||||
template: `
|
||||
<div class="pv-content">
|
||||
<div v-if="pattern">
|
||||
<h2 class="pv-content__header">{{pattern.name}} Pattern</h2>
|
||||
|
||||
<theme-select :theme="query.theme" :query="query" />
|
||||
|
||||
<h3 class="pv-title-label">Example</h3>
|
||||
<div>
|
||||
<div class="pv-pattern__example"><div style="position: static" v-html="pattern.markup"></div></div>
|
||||
</div>
|
||||
|
||||
<h3 class="pv-title-label">HTML</h3>
|
||||
|
||||
<pre class="pv-markup">{{pattern.markup}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import {PlatformSelect} from './platform-select';
|
||||
import {ThemeSelect} from './theme-select';
|
||||
|
||||
export const PatternsPage = {
|
||||
props: ['query'],
|
||||
template: `
|
||||
<div class="pv-content">
|
||||
<platform-select :platform="query.platform" />
|
||||
|
||||
<h2 class="pv-content__header">Patterns</h2>
|
||||
|
||||
<theme-select :query="query" />
|
||||
|
||||
<div class="pv-patterns">
|
||||
<div class="pv-pattern" v-for="pattern in filterPatterns">
|
||||
<a class="pv-pattern__name pv-title-label" :href="'/patterns/' + pattern.id">{{pattern.name}}</a>
|
||||
<div class="pv-pattern__example"><div v-html="pattern.markup" style="position: static"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data: () => ({
|
||||
patterns: []
|
||||
}),
|
||||
components: {
|
||||
'platform-select': PlatformSelect,
|
||||
'theme-select': ThemeSelect
|
||||
},
|
||||
created() {
|
||||
// Load patterns data.
|
||||
this.patterns = window.patterns;
|
||||
},
|
||||
computed: {
|
||||
filterPatterns() {
|
||||
const patterns = this.patterns;
|
||||
|
||||
if (this.query.platform === 'android') {
|
||||
return patterns.filter(function(pattern) {
|
||||
return pattern.name.match(/Material/);
|
||||
});
|
||||
} else if (this.query.platform === 'ios') {
|
||||
return patterns.filter(function(pattern) {
|
||||
return !pattern.name.match(/Material/);
|
||||
});
|
||||
}
|
||||
return patterns;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
export const PlatformSelect = {
|
||||
props: ['platform'],
|
||||
template: `
|
||||
<div class="pv-platform-select">
|
||||
<a class="pv-platform-select__link"
|
||||
:class="{'pv-platform-select__link--active': this.platform !== 'ios' && this.platform !== 'android'}"
|
||||
:href="getLocation() + '?platform=all'">All</a>
|
||||
|
||||
<a class="pv-platform-select__link"
|
||||
:class="{'pv-platform-select__link--active': this.platform === 'ios'}"
|
||||
:href="getLocation() + '?platform=ios'">iOS</a>
|
||||
|
||||
<a class="pv-platform-select__link"
|
||||
:class="{'pv-platform-select__link--active': this.platform === 'android'}"
|
||||
:href="getLocation() + '?platform=android'">Android</a>
|
||||
|
||||
</div>
|
||||
`,
|
||||
methods: {
|
||||
getLocation() {
|
||||
return location.pathname;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
export const ComponentExample = {
|
||||
props: ['component'],
|
||||
template: `
|
||||
<div class="page pv-component-example" :class="{'page--material__background': isAndroid()}">
|
||||
<!-- ontouchstart is a hack to enable :active CSS selector in iOS browsers. -->
|
||||
<div style="width: 100%;" v-html="component.markup" ontouchstart=""></div>
|
||||
</div>
|
||||
`,
|
||||
methods: {
|
||||
isAndroid() {
|
||||
return this.component.name.match(/Material/);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const PreviewComponent = {
|
||||
props: ['component'],
|
||||
template: `
|
||||
<div class="pv-component-preview">
|
||||
<a class="pv-title-label" :href="'/components/' + component.id">{{component.name}}</a>
|
||||
|
||||
<component-example :component="component" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
'component-example': ComponentExample
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
export const ThemeSelect = {
|
||||
props: ['query'],
|
||||
template: `
|
||||
<div class="pv-built-css">
|
||||
<select ref="themeSelect" class="pv-built-css__select" @change="changeTheme($event)">
|
||||
<option v-for="theme in themes" :value="theme">{{theme}}.css</option>
|
||||
</select>
|
||||
<button class="pv-built-css__button" @click="download($event)">Download</button>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
themes: window.themes
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.query.theme) {
|
||||
this.$refs.themeSelect.value = this.query.theme;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
download(event) {
|
||||
const theme = this.$refs.themeSelect.value;
|
||||
if (!theme) {
|
||||
window.open('/onsen-css-components.css');
|
||||
} else {
|
||||
window.open(`${theme}.css`);
|
||||
}
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
changeTheme(event) {
|
||||
const theme = event.target.value;
|
||||
const suffix = this.query.platform ? `platform=${this.query.platform}` : '';
|
||||
|
||||
if (theme === 'onsen-css-components') {
|
||||
if (suffix === '') {
|
||||
page.show(location.pathname);
|
||||
} else {
|
||||
page.show(`${location.pathname}?${suffix}`);
|
||||
}
|
||||
} else {
|
||||
page.show(`${location.pathname}?theme=${theme}${suffix === '' ? '' : `&${suffix}`}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1,minimum-scale=1">
|
||||
<base href="/">
|
||||
|
||||
<title>Onsen CSS Components</title>
|
||||
|
||||
<link rel="stylesheet" href="/onsen-css-components.css" id="theme-css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/font_awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/ionicons/css/ionicons.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/material-design-iconic-font/css/material-design-iconic-font.min.css">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body ontouchstart=""> <!-- Hack to activate :active CSS selector on iOS browsers.-->
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
<script src="https://unpkg.com/vue@2.4.2" async></script>
|
||||
<script src="https://unpkg.com/page.js@4.13.3/page.js" async></script>
|
||||
<script src="/app.gen.js" async></script>
|
||||
|
||||
<div id="data"
|
||||
data-components="<%= @toJSON(@components) %>"
|
||||
data-themes="<%= @toJSON(@themes) %>"
|
||||
data-patterns="<%= @toJSON(@patterns) %>"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="6px" height="8px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>select-icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="select-icon" fill="#888888">
|
||||
<polygon id="Triangle" points="3 0 6 3 0 3"></polygon>
|
||||
<polygon id="Triangle" transform="translate(3.000000, 6.500000) scale(1, -1) translate(-3.000000, -6.500000) " points="3 5 6 8 0 8"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 727 B |
|
|
@ -0,0 +1,313 @@
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: static;
|
||||
background-color: white;
|
||||
overflow: visible;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
user-select: auto !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #999;
|
||||
font-family: 'Helvetica Neue', 'Helevetica', sans-serif;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pv-content {
|
||||
padding-left: 140px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pv-content__header {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
|
||||
color: #444;
|
||||
margin: 18px 0 6px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pv-components {
|
||||
clear: both;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 50vh -10px;
|
||||
}
|
||||
|
||||
.pv-component-preview {
|
||||
display: block;
|
||||
width: 350px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 10px 6px 10px;
|
||||
}
|
||||
|
||||
.pv-component-preview__link,
|
||||
.pv-component-preview__link:link,
|
||||
.pv-component-preview__link:visited {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pv-component-preview__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.pv-component-example {
|
||||
height: 201px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
width: 350px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
|
||||
}
|
||||
|
||||
.pv-patterns {
|
||||
clear: both;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 50vh -10px;
|
||||
}
|
||||
|
||||
.pv-pattern {
|
||||
width: 320px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin: 0px 10px 6px 10px;
|
||||
}
|
||||
|
||||
.pv-pattern__example {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
height: 568px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pv-title-label,
|
||||
.pv-title-label:link,
|
||||
.pv-title-label:visited,
|
||||
.pv-title-label:hover {
|
||||
font-size: 12px;
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
text-decoration: none;
|
||||
margin: 12px 0 4px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a.pv-title-label:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pv-markup {
|
||||
font-family: 'Menlo', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #F4F9FF;
|
||||
background-color: #1F2833;
|
||||
padding: 22px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
user-select: text;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pv-side-navi {
|
||||
float: left;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 140px;
|
||||
box-sizing: border-box;
|
||||
padding: 18px 0 18px 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pv-side-navi::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pv-side-navi__title,
|
||||
.pv-side-navi__title:link,
|
||||
.pv-side-navi__title:visited {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
margin: -6px -6px 20px -6px;
|
||||
padding: 6px;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #FF3726;
|
||||
background-color: rgba(255, 26, 0, 0.08);
|
||||
width: 95px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pv-side-navi__category {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #444;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.pv-side-navi__category:link,
|
||||
.pv-side-navi__category:visited {
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pv-side-navi__category:link:hover,
|
||||
.pv-side-navi__category:visited:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pv-side-navi__category-item {
|
||||
height: 23px;
|
||||
line-height: 22px;
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
.pv-side-navi__item-link,
|
||||
.pv-side-navi__item-link:link,
|
||||
.pv-side-navi__item-link:visited {
|
||||
font-size: 12px;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pv-side-navi__item-link:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pv-platform-select {
|
||||
float: right;
|
||||
margin: 0 18px 0 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pv-platform-select__link,
|
||||
.pv-platform-select__link:link,
|
||||
.pv-platform-select__link:visited,
|
||||
.pv-platform-select__link:hover {
|
||||
font-family: 'Helvetica Neue', 'Helevetica', sans-serif;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
box-sizing: border-box;
|
||||
padding: 2px 5px;
|
||||
font-weight: 400;
|
||||
margin: 0 1px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.pv-platform-select__link--active,
|
||||
.pv-platform-select__link--active:link,
|
||||
.pv-platform-select__link--active:visited {
|
||||
color: #444;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.pv-built-css__select {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px 0 4px;
|
||||
color: #222;
|
||||
position: relative;
|
||||
background-image: url(/select-icon.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 6px center;
|
||||
}
|
||||
|
||||
.pv-built-css__button,
|
||||
.pv-built-css__button:link,
|
||||
.pv-built-css__button:visited,
|
||||
.pv-built-css__button:hover {
|
||||
background-color: #F0F0F0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #f0f0f0;
|
||||
line-height: 25px;
|
||||
height: 25px;
|
||||
font-size: 12px;
|
||||
padding: 0 6px;
|
||||
display: inline-block;
|
||||
color: #444;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pv-built-css__button:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.pv-built-css__button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.pv-side-navi {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pv-platform-select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pv-content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.pv-components {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pv-component-preview {
|
||||
width: auto;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.pv-component-example {
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pv-component-markup {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.pv-build-css {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
export function getQueryParams() {
|
||||
return parseQueryString(window.location.search);
|
||||
}
|
||||
|
||||
export function parseQueryString(queryString) {
|
||||
if (queryString.length <= 1) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const params = [];
|
||||
const pairs = queryString.slice(1).split('&');
|
||||
let pair;
|
||||
for (var i = 0; i < pairs.length; i++) {
|
||||
pair = pairs[i].split('=');
|
||||
params[pair[0]] = pair[1];
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} prefer
|
||||
* @param {string} base
|
||||
*/
|
||||
export function mergeQueryString(prefer, base) {
|
||||
const params = Object.assign({}, parseQueryString(base), parseQueryString(prefer));
|
||||
const result = '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
|
||||
|
||||
return result === '?' ? '' : result;
|
||||
}
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
|
||||
:root {
|
||||
--action-sheet-mask-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--material-action-sheet-mask-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Action Sheet
|
||||
category: Action Sheet
|
||||
markup: |
|
||||
<div class="action-sheet-mask"></div>
|
||||
<div class="action-sheet">
|
||||
<div class="action-sheet-title">Title</div>
|
||||
<button class="action-sheet-button">Label</button>
|
||||
<button class="action-sheet-button">Cancel</button>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Action Sheet with Delete Label
|
||||
category: Action Sheet
|
||||
markup: |
|
||||
<div class="action-sheet-mask"></div>
|
||||
<div class="action-sheet">
|
||||
<button class="action-sheet-button">Label</button>
|
||||
<button class="action-sheet-button action-sheet-button--destructive">Delete Label</button>
|
||||
<button class="action-sheet-button">Cancel</button>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.action-sheet {
|
||||
@apply(--reset-font);
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
left: 10px; /* iOS 9, 10, 11 */
|
||||
right: 10px; /* iOS 9, 10, 11 */
|
||||
bottom: 10px; /* iOS 9, 10, 11 */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.action-sheet-button {
|
||||
box-sizing: border-box;
|
||||
height: 56px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: var(--action-sheet-button-color);
|
||||
background-color: var(--action-sheet-button-background-color);
|
||||
border-radius: 0;
|
||||
line-height: 56px;
|
||||
border: none;
|
||||
appearance: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@apply(--ellipsis);
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 100%);
|
||||
@media (--retina-query) {
|
||||
background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 50%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-button:first-child {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
|
||||
.action-sheet-button:active {
|
||||
background-color: var(--action-sheet-button-active-background-color);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.action-sheet-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.action-sheet-button:nth-last-of-type(2) {
|
||||
border-bottom-right-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.action-sheet-button:last-of-type {
|
||||
border-radius: 12px;
|
||||
margin: 8px 0 0 0; /* iOS 9, 10, 11 */
|
||||
background-color: var(--action-sheet-cancel-button-background-color);
|
||||
background-image: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-sheet-button:last-of-type:active {
|
||||
background-color: var(--action-sheet-button-active-background-color);
|
||||
}
|
||||
|
||||
.action-sheet-button--destructive {
|
||||
color: var(--action-sheet-button-destructive-color);
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
box-sizing: border-box;
|
||||
height: 56px;
|
||||
font-size: 13px;
|
||||
color: var(--action-sheet-title-color);
|
||||
text-align: center;
|
||||
background-color: var(--action-sheet-button-background-color);
|
||||
line-height: 56px;
|
||||
@apply(--ellipsis);
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 100%);
|
||||
@media (--retina-query) {
|
||||
background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 50%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-title:first-child {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
|
||||
.action-sheet-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-sheet-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--action-sheet-mask-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Action Sheet
|
||||
category: Action Sheet
|
||||
markup: |
|
||||
<div class="action-sheet-mask action-sheet-mask--material"></div>
|
||||
<div class="action-sheet action-sheet--material">
|
||||
<button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
|
||||
<button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
|
||||
<button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Material Action Sheet with Title
|
||||
category: Action Sheet
|
||||
markup: |
|
||||
<div class="action-sheet-mask action-sheet-mask--material"></div>
|
||||
<div class="action-sheet action-sheet--material">
|
||||
<div class="action-sheet-title action-sheet-title--material">Title</div>
|
||||
<button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
|
||||
<button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.action-sheet--material {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@apply(--material-shadow-5);
|
||||
}
|
||||
|
||||
.action-sheet-title--material {
|
||||
@apply(--material-font);
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
text-align: left;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: 16px;
|
||||
padding: 0 0 0 16px;
|
||||
color: var(--material-action-sheet-text-color);
|
||||
background-color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.action-sheet-title--material:first-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-sheet-button--material {
|
||||
@apply(--material-font);
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
padding: 0 0 0 16px;
|
||||
color: var(--material-action-sheet-text-color);
|
||||
font-weight: 400;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.action-sheet-button--material:first-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-sheet-button--material:nth-last-of-type(2) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-sheet-button--material:last-of-type {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.action-sheet-icon--material {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
margin-right: 32px;
|
||||
font-size: 26px;
|
||||
width: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-sheet-mask--material {
|
||||
background-color: var(--material-action-sheet-mask-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,328 @@
|
|||
|
||||
:root {
|
||||
--retina-alert-dialog-button-border: {
|
||||
@media (--retina-query) {
|
||||
border-top: none;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-image: linear-gradient(180deg, var(--alert-dialog-separator-color), var(--alert-dialog-separator-color) 50%, transparent 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Alert Dialog
|
||||
category: Alert Dialog
|
||||
elements: ons-alert-dialog
|
||||
markup: |
|
||||
<div class="alert-dialog-mask"></div>
|
||||
<div class="alert-dialog">
|
||||
<div class="alert-dialog-container">
|
||||
<div class="alert-dialog-title">Alert</div>
|
||||
|
||||
<div class="alert-dialog-content">
|
||||
Hello World!
|
||||
</div>
|
||||
|
||||
<div class="alert-dialog-footer">
|
||||
<button class="alert-dialog-button alert-dialog-button--primal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.alert-dialog {
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-cursor);
|
||||
@apply(--reset-font);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 270px;
|
||||
margin: auto;
|
||||
background-color: var(--alert-dialog-background-color);
|
||||
border-radius: 8px;
|
||||
overflow: visible;
|
||||
max-width: 95%;
|
||||
color: var(--alert-dialog-text-color);
|
||||
}
|
||||
|
||||
.alert-dialog-container {
|
||||
height: inherit;
|
||||
padding-top: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.alert-dialog-title {
|
||||
@apply(--reset-font);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight--large);
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
color: var(--alert-dialog-text-color);
|
||||
}
|
||||
|
||||
.alert-dialog-content {
|
||||
@apply(--reset-box-model);
|
||||
padding: 4px 12px 8px;
|
||||
font-size: var(--font-size--mini);
|
||||
min-height: 36px;
|
||||
text-align: center;
|
||||
color: var(--alert-dialog-text-color);
|
||||
}
|
||||
|
||||
.alert-dialog-footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.alert-dialog-button {
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-font);
|
||||
@apply(--reset-cursor);
|
||||
@apply(--ellipsis);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0;
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
border-top: 1px solid var(--alert-dialog-separator-color);
|
||||
font-size: calc(var(--font-size) - 1px);
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
outline: none;
|
||||
color: var(--alert-dialog-button-color);
|
||||
@apply(--retina-alert-dialog-button-border);
|
||||
}
|
||||
|
||||
.alert-dialog-button:active {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.alert-dialog-button--primal {
|
||||
font-weight: var(--font-weight--large);
|
||||
}
|
||||
|
||||
.alert-dialog-footer--rowfooter {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.alert-dialog-button--rowfooter {
|
||||
flex: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-left: 1px solid var(--alert-dialog-separator-color);
|
||||
@media (--retina-query) {
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
background-size: 100% 1px, 1px 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top, left;
|
||||
background-image:
|
||||
linear-gradient(0deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%),
|
||||
linear-gradient(90deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dialog-button--rowfooter:first-child {
|
||||
border-left: none;
|
||||
@media (--retina-query) {
|
||||
border-top: none;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top, left;
|
||||
background-image: linear-gradient(0deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dialog-mask {
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-cursor);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Alert Dialog without Title
|
||||
category: Alert Dialog
|
||||
elements: ons-alert-dialog
|
||||
markup: |
|
||||
<div class="alert-dialog-mask"></div>
|
||||
<div class="alert-dialog">
|
||||
<div class="alert-dialog-container">
|
||||
<div class="alert-dialog-content">
|
||||
Hello World!
|
||||
</div>
|
||||
|
||||
<div class="alert-dialog-footer">
|
||||
<button class="alert-dialog-button alert-dialog-button--primal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Alert Dialog with Multiple Buttons
|
||||
category: Alert Dialog
|
||||
elements: ons-alert-dialog
|
||||
markup: |
|
||||
<div class="alert-dialog-mask"></div>
|
||||
<div class="alert-dialog">
|
||||
<div class="alert-dialog-container">
|
||||
<div class="alert-dialog-content">
|
||||
Hello World!
|
||||
</div>
|
||||
|
||||
<div class="alert-dialog-footer">
|
||||
<button class="alert-dialog-button">Cancel</button>
|
||||
<button class="alert-dialog-button alert-dialog-button--primal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Alert Dialog with Multiple Buttons 2
|
||||
category: Alert Dialog
|
||||
elements: ons-alert-dialog
|
||||
markup: |
|
||||
<div class="alert-dialog-mask"></div>
|
||||
<div class="alert-dialog">
|
||||
<div class="alert-dialog-container">
|
||||
<div class="alert-dialog-title">Alert</div>
|
||||
|
||||
<div class="alert-dialog-content">
|
||||
Hello World!
|
||||
</div>
|
||||
|
||||
<div class="alert-dialog-footer alert-dialog-footer--rowfooter">
|
||||
<button class="alert-dialog-button alert-dialog-button--rowfooter">Left</button>
|
||||
<button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--rowfooter">Center</button>
|
||||
<button class="alert-dialog-button alert-dialog-button--rowfooter">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Material Alert Dialog
|
||||
category: Alert Dialog
|
||||
elements: ons-alert-dialog
|
||||
markup: |
|
||||
<div class="alert-dialog-mask alert-dialog-mask--material"></div>
|
||||
<div class="alert-dialog alert-dialog--material">
|
||||
<div class="alert-dialog-container alert-dialog-container--material">
|
||||
<div class="alert-dialog-title alert-dialog-title--material">
|
||||
Dialog title
|
||||
</div>
|
||||
<div class="alert-dialog-content alert-dialog-content--material">
|
||||
Some dialog content.
|
||||
</div>
|
||||
<div class="alert-dialog-footer alert-dialog-footer--material">
|
||||
<button class="alert-dialog-button alert-dialog-button--material">OK</button>
|
||||
<button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.alert-dialog--material {
|
||||
border-radius: 2px;
|
||||
background-color: var(--material-alert-dialog-background-color);
|
||||
}
|
||||
|
||||
.alert-dialog-container--material {
|
||||
padding: 22px 0 0 0;
|
||||
@apply(--material-shadow-5);
|
||||
}
|
||||
|
||||
.alert-dialog-title--material {
|
||||
@apply(--material-font);
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 0 24px;
|
||||
color: var(--material-alert-dialog-title-color);
|
||||
}
|
||||
|
||||
.alert-dialog-content--material {
|
||||
@apply(--material-font);
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
padding: 0 24px;
|
||||
margin: 24px 0 10px 0;
|
||||
min-height: 0;
|
||||
color: var(--material-alert-dialog-content-color);
|
||||
}
|
||||
|
||||
.alert-dialog-footer--material {
|
||||
display: block;
|
||||
padding: 0;
|
||||
height: 52px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.alert-dialog-button--material {
|
||||
@apply(--material-font);
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
float: right;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 8px;
|
||||
margin: 8px 8px 8px 0;
|
||||
box-sizing: border-box;
|
||||
min-width: 50px;
|
||||
color: var(--material-alert-dialog-button-color);
|
||||
@media (--retina-query) {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dialog-button--material:active {
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
/* stylelint-disable */ .alert-dialog-button--rowfooter--material,
|
||||
.alert-dialog-button--rowfooter--material:first-child { /* stylelint-enable */
|
||||
border: 0;
|
||||
@media (--retina-query) {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable */ .alert-dialog-button--primal--material { /* stylelint-enable */
|
||||
font-weight: 500;
|
||||
@media (--retina-query) {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dialog-mask--material {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
:root {
|
||||
--button-bar-active-color: var(--button-bar-active-text-color);
|
||||
--button-bar-border-top: 1px solid var(--button-bar-color);
|
||||
--button-bar-border-bottom: 1px solid var(--button-bar-color);
|
||||
--button-bar-border: 0 solid var(--button-bar-color);
|
||||
--button-bar-border-radius: 4px;
|
||||
|
||||
--button-bar: {
|
||||
@apply(--reset-font);
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
--button-bar__item: {
|
||||
@apply(--reset-font);
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Button Bar
|
||||
category: Segment
|
||||
markup: |
|
||||
<div class="button-bar" style="width:280px;">
|
||||
<div class="button-bar__item">
|
||||
<button class="button-bar__button">One</button>
|
||||
</div>
|
||||
<div class="button-bar__item">
|
||||
<button class="button-bar__button">Two</button>
|
||||
</div>
|
||||
<div class="button-bar__item">
|
||||
<button class="button-bar__button">Three</button>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.button-bar {
|
||||
@apply(--button-bar);
|
||||
}
|
||||
|
||||
.button-bar__item {
|
||||
@apply(--button-bar__item);
|
||||
@apply(--hide-input-parent);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.button-bar__button {
|
||||
@apply(--reset-font);
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
color: var(--button-bar-color);
|
||||
border: 1px solid var(--button-bar-color);
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 0;
|
||||
font-weight: var(--font-weight);
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
width: 100%;
|
||||
transition: background-color 0.2s linear, color 0.2s linear;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.button-bar__button:disabled {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
.button-bar__button:hover {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.button-bar__button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:checked + .button-bar__button {
|
||||
background-color: var(--button-bar-color);
|
||||
color: var(--button-bar-active-color);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.button-bar__button:active,
|
||||
:active + .button-bar__button {
|
||||
background-color: var(--button-bar-active-background-color);
|
||||
border: var(--button-bar-border);
|
||||
border-top: var(--button-bar-border-top);
|
||||
border-bottom: var(--button-bar-border-bottom);
|
||||
border-right: 1px solid var(--button-bar-color);
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.button-bar__item:first-child > .button-bar__button {
|
||||
border-left-width: 1px;
|
||||
border-radius: var(--button-bar-border-radius) 0 0 var(--button-bar-border-radius);
|
||||
}
|
||||
|
||||
.button-bar__item:last-child > .button-bar__button {
|
||||
border-right-width: 1px;
|
||||
border-radius: 0 var(--button-bar-border-radius) var(--button-bar-border-radius) 0;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,436 @@
|
|||
|
||||
:root {
|
||||
--button-text-color: white;
|
||||
--button-quiet-color: var(--highlight-color);
|
||||
--button-cta-color: white;
|
||||
--button-large-padding: 4px 12px;
|
||||
--button-padding: 4px 10px;
|
||||
--button-line-height: 32px;
|
||||
--button-large-line-height: 36px;
|
||||
--button-active-opacity: 0.2;
|
||||
--button-border-radius: 3px;
|
||||
|
||||
--button--quiet: {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
--button--disabled: {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
--button--hover: {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
--button: {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-font);
|
||||
@apply(--reset-cursor);
|
||||
@apply(--ellipsis);
|
||||
height: auto;
|
||||
text-decoration: none;
|
||||
padding: var(--button-padding);
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--button-line-height);
|
||||
letter-spacing: 0;
|
||||
color: var(--button-text-color);
|
||||
vertical-align: middle;
|
||||
background-color: var(--button-background-color);
|
||||
border: 0 solid currentColor;
|
||||
border-radius: var(--button-border-radius);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
--button--focus: {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
--button--active: {
|
||||
background-color: var(--button-background-color);
|
||||
transition: none;
|
||||
opacity: var(--button-active-opacity);
|
||||
}
|
||||
|
||||
--button--material: {
|
||||
@apply(--button);
|
||||
@apply(--material-shadow-1);
|
||||
@apply(--material-font);
|
||||
min-height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
text-transform: uppercase;
|
||||
background-color: var(--material-button-background-color);
|
||||
color: var(--material-button-text-color);
|
||||
font-weight: var(--font-weight--large);
|
||||
transition: background-color 0.25s linear;
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button">Button</button>
|
||||
<button class="button" disabled>Button</button>
|
||||
*/
|
||||
|
||||
.button {
|
||||
@apply(--button);
|
||||
}
|
||||
|
||||
.button::-moz-focus-inner {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
@apply(--button--hover);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
@apply(--button--active);
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
@apply(--button--focus);
|
||||
}
|
||||
|
||||
.button:disabled, .button[disabled] {
|
||||
@apply(--button--disabled);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Outline Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button button--outline">Button</button>
|
||||
<button class="button button--outline" disabled>Button</button>
|
||||
*/
|
||||
|
||||
.button--outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--button-background-color);
|
||||
color: var(--button-background-color);
|
||||
}
|
||||
|
||||
.button--outline:active {
|
||||
background-color: color(var(--button-background-color) tint(var(--alpha-lighten)));
|
||||
border: 1px solid var(--button-background-color);
|
||||
color: var(--button-background-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.button--outline:hover {
|
||||
border: 1px solid var(--button-background-color);
|
||||
transition: 0;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Light Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button button--light">Button</button>
|
||||
<button class="button button--light" disabled>Button</button>
|
||||
*/
|
||||
|
||||
.button--light {
|
||||
background-color: transparent;
|
||||
color: color(var(--button-light-color) a(40%));
|
||||
border: 1px solid color(var(--button-light-color) a(20%));
|
||||
}
|
||||
|
||||
.button--light:active {
|
||||
background-color: color(var(--button-light-color) a(5%));
|
||||
color: color(var(--button-light-color) a(40%));
|
||||
border: 1px solid color(var(--button-light-color) a(20%));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Quiet Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button--quiet">Button</button>
|
||||
<button class="button--quiet" disabled>Button</button>
|
||||
*/
|
||||
|
||||
.button--quiet {
|
||||
@apply(--button);
|
||||
@apply(--button--quiet);
|
||||
background: transparent;
|
||||
color: var(--button-quiet-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button--quiet:disabled,
|
||||
.button--quiet[disabled] {
|
||||
@apply(--button--disabled);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button--quiet:hover {
|
||||
@apply(--button--hover);
|
||||
}
|
||||
|
||||
.button--quiet:focus {
|
||||
@apply(--button--focus);
|
||||
}
|
||||
|
||||
.button--quiet:active {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
transition: none;
|
||||
opacity: var(--button-active-opacity);
|
||||
color: var(--button-quiet-color);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Call To Action Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button--cta">Button</button>
|
||||
<button class="button--cta" disabled>Button</button>
|
||||
*/
|
||||
|
||||
.button--cta {
|
||||
@apply(--button);
|
||||
border: none;
|
||||
background-color: var(--button-cta-background-color);
|
||||
color: var(--button-cta-color);
|
||||
}
|
||||
|
||||
.button--cta:hover {
|
||||
@apply(--button--hover);
|
||||
}
|
||||
|
||||
.button--cta:focus {
|
||||
@apply(--button--focus);
|
||||
}
|
||||
|
||||
.button--cta:active {
|
||||
color: var(--button-cta-color);
|
||||
background-color: var(--button-cta-background-color);
|
||||
transition: none;
|
||||
opacity: var(--button-active-opacity);
|
||||
}
|
||||
|
||||
.button--cta:disabled,
|
||||
.button--cta[disabled] {
|
||||
@apply(--button--disabled);
|
||||
}
|
||||
|
||||
/*
|
||||
name: Large Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button button--large" style="width: 95%; margin: 0 auto;">Button</button>
|
||||
*/
|
||||
|
||||
.button--large {
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight--large);
|
||||
line-height: var(--button-large-line-height);
|
||||
padding: var(--button-large-padding);
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button--large:active {
|
||||
@apply(--button--active);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.button--large:disabled,
|
||||
.button--large[disabled] {
|
||||
@apply(--button--disabled);
|
||||
}
|
||||
|
||||
.button--large:hover {
|
||||
@apply(--button--hover);
|
||||
}
|
||||
|
||||
.button--large:focus {
|
||||
@apply(--button--focus);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Large Quiet Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button--large--quiet" style="width: 95%; margin: 0 auto;">Button</button>
|
||||
*/
|
||||
|
||||
.button--large--quiet { /* stylelint-disable-line */
|
||||
@apply(--button);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight--large);
|
||||
line-height: var(--button-large-line-height);
|
||||
padding: var(--button-large-padding);
|
||||
display: block;
|
||||
width: 100%;
|
||||
@apply(--button--quiet);
|
||||
color: var(--button-quiet-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button--large--quiet:active { /* stylelint-disable-line */
|
||||
transition: none;
|
||||
opacity: var(--button-active-opacity);
|
||||
color: var(--button-quiet-color);
|
||||
@apply(--button--quiet);
|
||||
}
|
||||
|
||||
.button--large--quiet:disabled, .button--large--quiet[disabled] { /* stylelint-disable-line */
|
||||
@apply(--button--disabled);
|
||||
}
|
||||
|
||||
.button--large--quiet:hover { /* stylelint-disable-line */
|
||||
@apply(--button--hover);
|
||||
}
|
||||
|
||||
.button--large--quiet:focus { /* stylelint-disable-line */
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Large Call To Action Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button--large--cta" style="width: 95%; margin: 0 auto;">Button</button>
|
||||
*/
|
||||
|
||||
.button--large--cta { /* stylelint-disable-line */
|
||||
@apply(--button);
|
||||
border: none;
|
||||
background-color: var(--button-cta-background-color);
|
||||
color: var(--button-cta-color);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight--large);
|
||||
line-height: var(--button-large-line-height);
|
||||
padding: var(--button-large-padding);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button--large--cta:hover { /* stylelint-disable-line */
|
||||
@apply(--button--hover);
|
||||
}
|
||||
|
||||
.button--large--cta:focus { /* stylelint-disable-line */
|
||||
@apply(--button--focus);
|
||||
}
|
||||
|
||||
.button--large--cta:active { /* stylelint-disable-line */
|
||||
color: var(--button-cta-color);
|
||||
background-color: var(--button-cta-background-color);
|
||||
transition: none;
|
||||
opacity: var(--button-active-opacity);
|
||||
}
|
||||
|
||||
.button--large--cta:disabled, .button--large--cta[disabled] { /* stylelint-disable-line */
|
||||
@apply(--button--disabled);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button button--material">BUTTON</button>
|
||||
<button class="button button--material" disabled>DISABLED</button>
|
||||
*/
|
||||
|
||||
.button--material {
|
||||
@apply(--button--material);
|
||||
opacity: 1;
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
.button--material:hover {
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
.button--material:active {
|
||||
@apply(--material-shadow-3);
|
||||
background-color: var(--material-button-background-color);
|
||||
opacity: 0.9;
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
.button--material:focus {
|
||||
@apply(--button--focus);
|
||||
}
|
||||
|
||||
.button--material:disabled,
|
||||
.button--material[disabled] {
|
||||
transition: none;
|
||||
@apply(--material-shadow-0);
|
||||
background-color: var(--material-button-disabled-background-color);
|
||||
color: var(--material-button-disabled-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Flat Button
|
||||
category: Button
|
||||
elements: ons-button
|
||||
markup: |
|
||||
<button class="button button--material--flat">BUTTON</button>
|
||||
<button class="button button--material--flat" disabled>DISABLED</button>
|
||||
*/
|
||||
|
||||
.button--material--flat { /* stylelint-disable-line */
|
||||
@apply(--button--material);
|
||||
@apply(--material-shadow-0);
|
||||
background-color: transparent;
|
||||
color: var(--material-button-background-color);
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
.button--material--flat:hover { /* stylelint-disable-line */
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
.button--material--flat:focus { /* stylelint-disable-line */
|
||||
@apply(--material-shadow-0);
|
||||
background-color: transparent;
|
||||
color: var(--material-button-background-color);
|
||||
outline: 0;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button--material--flat:active { /* stylelint-disable-line */
|
||||
@apply(--material-shadow-0);
|
||||
outline: 0;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
background-color: var(--material-flat-button-active-background-color);
|
||||
color: var(--material-button-background-color);
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
.button--material--flat:disabled, .button--material--flat[disabled] {/* stylelint-disable-line */
|
||||
transition: none;
|
||||
opacity: 1;
|
||||
@apply(--material-shadow-0);
|
||||
background-color: transparent;
|
||||
color: var(--material-button-disabled-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
|
||||
:root {
|
||||
--card-text-line-height: 1.4;
|
||||
--card-text-font-size: 14px;
|
||||
--material-card-text-line-height: 1.4;
|
||||
--material-card-text-font-size: 14px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Card
|
||||
category: Card
|
||||
markup: |
|
||||
<div style="height: 200px; padding: 1px 0 0 0;">
|
||||
<div class="card">
|
||||
<div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.card {
|
||||
@apply(--reset-font);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 8px;
|
||||
background-color: var(--card-background-color);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.card__content {
|
||||
margin: 0;
|
||||
font-size: var(--card-text-font-size);
|
||||
line-height: var(--card-text-line-height);
|
||||
color: var(--card-text-color);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Card with Title
|
||||
category: Card
|
||||
markup: |
|
||||
<div style="height: 200px; padding: 1px 0 0 0;">
|
||||
<div class="card">
|
||||
<h2 class="card__title">Card Title</h2>
|
||||
<div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.card__title {
|
||||
@apply(--reset-font);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
margin: 4px 0 8px 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Card
|
||||
category: Card
|
||||
markup: |
|
||||
<div style="height: 200px; padding: 1px 0 0 0;">
|
||||
<div class="card card--material">
|
||||
<div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.card--material {
|
||||
background-color: var(--material-card-background-color);
|
||||
border-radius: 2px;
|
||||
@apply(--material-shadow-1);
|
||||
@apply(--material-font);
|
||||
}
|
||||
|
||||
.card--material__content {
|
||||
font-size: var(--material-card-text-font-size);
|
||||
line-height: var(--material-card-text-line-height);
|
||||
color: var(--material-card-text-color);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Card with Title
|
||||
category: Card
|
||||
markup: |
|
||||
<div style="height: 200px; padding: 1px 0 0 0;">
|
||||
<div class="card card--material">
|
||||
<div class="card__title card--material__title">Card Title</div>
|
||||
<div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.card--material__title {
|
||||
@apply(--material-font);
|
||||
font-size: 24px;
|
||||
margin: 8px 0 12px 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
:root {
|
||||
--checkbox-size: 22px;
|
||||
--checkbox-border: 1px solid #c7c7cd;
|
||||
--checkbox-checked-background-color: var(--highlight-color); /* background color active */
|
||||
--background-color--before--checkbox: var(--checkbox-checked-background-color);
|
||||
--checkmark-border: 2px solid #fff;
|
||||
--material-checkbox-size: 18px;
|
||||
--material-checkbox-focus-ring-size: 40px;
|
||||
--material-checkbox-focus-ring-shadow-size: calc((var(--material-checkbox-focus-ring-size) - var(--material-checkbox-size)) / 2);
|
||||
|
||||
--checkbox: {
|
||||
@apply(--reset-box-model);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@apply(--reset-cursor);
|
||||
@apply(--reset-font);
|
||||
@apply(--hide-input-parent);
|
||||
}
|
||||
|
||||
--checkbox__label: {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@apply(--reset-cursor);
|
||||
@apply(--reset-font);
|
||||
}
|
||||
|
||||
--checkbox--disabled: {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
--checkbox--before: {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
--checkbox--after: {
|
||||
@apply(--checkbox--before);
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Checkbox
|
||||
category: Checkbox
|
||||
elements: ons-input
|
||||
markup: |
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" class="checkbox__input">
|
||||
<div class="checkbox__checkmark"></div>
|
||||
OFF
|
||||
</label>
|
||||
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" class="checkbox__input" checked="checked">
|
||||
<div class="checkbox__checkmark"></div>
|
||||
ON
|
||||
</label>
|
||||
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" class="checkbox__input" disabled>
|
||||
<div class="checkbox__checkmark"></div>
|
||||
Disabled
|
||||
</label>
|
||||
*/
|
||||
|
||||
.checkbox {
|
||||
@apply(--checkbox__label);
|
||||
line-height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
.checkbox__checkmark {
|
||||
@apply(--checkbox);
|
||||
height: var(--checkbox-size);
|
||||
width: var(--checkbox-size);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox__input,
|
||||
.checkbox__input:checked {
|
||||
@apply(--hide-input);
|
||||
}
|
||||
|
||||
.checkbox__checkmark:before {
|
||||
@apply(--checkbox--before);
|
||||
@apply(--reset-box-model);
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
background: transparent;
|
||||
border: var(--checkbox-border);
|
||||
border-radius: var(--checkbox-size);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* checkmark's line */
|
||||
.checkbox__checkmark:after {
|
||||
@apply(--checkbox--after);
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
width: 11px;
|
||||
height: 5px;
|
||||
background: transparent;
|
||||
border: var(--checkmark-border);
|
||||
border-width: 1px;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:checked + .checkbox__checkmark:before {
|
||||
background: var(--background-color--before--checkbox);
|
||||
border: none;
|
||||
}
|
||||
|
||||
:checked + .checkbox__checkmark:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:disabled + .checkbox__checkmark {
|
||||
@apply(--checkbox--disabled);
|
||||
}
|
||||
|
||||
:disabled:active + .checkbox__checkmark:before { /* FIXME */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: No border Checkbox
|
||||
category: Checkbox
|
||||
elements: ons-input
|
||||
markup: |
|
||||
<label class="checkbox--noborder">
|
||||
<input type="checkbox" class="checkbox__input checkbox--noborder__input">
|
||||
<div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
|
||||
OFF
|
||||
</label>
|
||||
|
||||
<label class="checkbox--noborder">
|
||||
<input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">
|
||||
<div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
|
||||
ON
|
||||
</label>
|
||||
|
||||
<label class="checkbox--noborder">
|
||||
<input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
|
||||
<div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
|
||||
Disabled
|
||||
</label>
|
||||
*/
|
||||
|
||||
.checkbox--noborder {
|
||||
@apply(--checkbox__label);
|
||||
line-height: var(--checkbox-size);
|
||||
@apply(--hide-input-parent);
|
||||
}
|
||||
|
||||
.checkbox--noborder__input {
|
||||
@apply(--hide-input);
|
||||
}
|
||||
|
||||
.checkbox--noborder__checkmark {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@apply(--reset-cursor);
|
||||
@apply(--reset-box-model);
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.checkbox--noborder__checkmark:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--checkbox-size);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* checkmark's line */
|
||||
.checkbox--noborder__checkmark:after {
|
||||
@apply(--checkmark);
|
||||
}
|
||||
|
||||
:checked + .checkbox--noborder__checkmark:before {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:checked + .checkbox--noborder__checkmark:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:focus + .checkbox--noborder__checkmark:before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:disabled + .checkbox--noborder__checkmark {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
:disabled:active + .checkbox--noborder__checkmark:before {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Checkbox
|
||||
category: Checkbox
|
||||
elements: ons-input
|
||||
markup: |
|
||||
<label class="checkbox checkbox--material">
|
||||
<input type="checkbox" class="checkbox__input checkbox--material__input">
|
||||
<div class="checkbox__checkmark checkbox--material__checkmark"></div>
|
||||
OFF
|
||||
</label>
|
||||
<label class="checkbox checkbox--material">
|
||||
<input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked">
|
||||
<div class="checkbox__checkmark checkbox--material__checkmark"></div>
|
||||
ON
|
||||
</label>
|
||||
<label class="checkbox checkbox--material">
|
||||
<input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked" disabled>
|
||||
<div class="checkbox__checkmark checkbox--material__checkmark"></div>
|
||||
ON
|
||||
</label>
|
||||
<label class="checkbox checkbox--material">
|
||||
<input type="checkbox" class="checkbox__input checkbox--material__input" disabled>
|
||||
<div class="checkbox__checkmark checkbox--material__checkmark"></div>
|
||||
Disabled
|
||||
</label>
|
||||
*/
|
||||
|
||||
.checkbox--material {
|
||||
line-height: var(--material-checkbox-size);
|
||||
@apply(--material-font);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.checkbox--material__checkmark {
|
||||
width: var(--material-checkbox-size);
|
||||
height: var(--material-checkbox-size);
|
||||
}
|
||||
|
||||
.checkbox--material__checkmark:before {
|
||||
border-radius: 2px;
|
||||
height: var(--material-checkbox-size);
|
||||
width: var(--material-checkbox-size);
|
||||
border: 2px solid var(--material-checkbox-inactive-color);
|
||||
transition: background-color 0.1s linear 0.2s, border-color 0.1s linear 0.2s;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:checked + .checkbox--material__checkmark:before {
|
||||
border: 2px solid var(--material-checkbox-active-color);
|
||||
background-color: var(--material-checkbox-active-color);
|
||||
transition: background-color 0.1s linear, border-color 0.1s linear;
|
||||
}
|
||||
|
||||
.checkbox--material__checkmark:after {
|
||||
border-color: var(--material-checkbox-checkmark-color);
|
||||
transition: transform 0.2s ease 0;
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
top: 4px;
|
||||
left: 3px;
|
||||
transform: scale(0) rotate(-45deg);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
:checked + .checkbox--material__checkmark:after {
|
||||
transition: transform 0.2s ease 0.2s;
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
top: 4px;
|
||||
left: 3px;
|
||||
transform: scale(1) rotate(-45deg);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
/* active ring effect */
|
||||
.checkbox--material__input:before {
|
||||
content: '';
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--material-checkbox-size);
|
||||
height: var(--material-checkbox-size);
|
||||
box-shadow: 0 0 0 var(--material-checkbox-focus-ring-shadow-size) var(--material-checkbox-inactive-color);
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background-color: var(--material-checkbox-inactive-color);
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
transform: scale3d(0.2, 0.2, 0.2);
|
||||
transition: opacity 0.25s ease-out, transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
.checkbox--material__input:checked:before {
|
||||
box-shadow: 0 0 0 var(--material-checkbox-focus-ring-shadow-size) var(--material-checkbox-active-color);
|
||||
background-color: var(--material-checkbox-active-color);
|
||||
}
|
||||
|
||||
.checkbox--material__input:active:before {
|
||||
opacity: .15;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
:disabled + .checkbox--material__checkmark {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:disabled + .checkbox--material__checkmark:before {
|
||||
border-color: #afafaf;
|
||||
}
|
||||
|
||||
:disabled:checked + .checkbox--material__checkmark:before {
|
||||
background-color: #afafaf;
|
||||
}
|
||||
|
||||
:disabled:checked + .checkbox--material__checkmark:after {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/* ------- */
|
||||
/* Default */
|
||||
/* ------- */
|
||||
|
||||
/* All toolbar */
|
||||
.toolbar {
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0;
|
||||
}
|
||||
.bottom-bar {
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* All page__background with a ordinal toolbar */
|
||||
.toolbar+.page__background {
|
||||
top: var(--toolbar-height);
|
||||
}
|
||||
|
||||
/* All page__content without toolbars */
|
||||
.page__content {
|
||||
top: 0;
|
||||
padding-top: 0;
|
||||
|
||||
bottom: 0;
|
||||
}
|
||||
/* All page__content with a toolbar */
|
||||
.toolbar+.page__background+.page__content {
|
||||
top: var(--toolbar-height);
|
||||
padding-top: 0;
|
||||
}
|
||||
/* All page__content with a bottom-bar */
|
||||
.page-with-bottom-toolbar > .page__content {
|
||||
bottom: 44px;
|
||||
}
|
||||
|
||||
/* -------- */
|
||||
/* Material */
|
||||
/* -------- */
|
||||
|
||||
/* All page__background with a material toolbar */
|
||||
.toolbar.toolbar--material+.page__background {
|
||||
top: var(--toolbar-material-height);
|
||||
}
|
||||
/* All page__content with a material toolbar */
|
||||
.toolbar.toolbar--material+.page__background+.page__content {
|
||||
top: var(--toolbar-material-height);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* -------- */
|
||||
/* Others */
|
||||
/* -------- */
|
||||
|
||||
/* All page__background with a transparent toolbar */
|
||||
.toolbar.toolbar--transparent+.page__background {
|
||||
top: 0;
|
||||
}
|
||||
/* All page__content with a transparent cover-content toolbar and its direct descendant page_content */
|
||||
.toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
|
||||
.toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
|
||||
top: 0;
|
||||
padding-top: var(--toolbar-height);
|
||||
}
|
||||
/* All page__content with a material transparent cover-content toolbar and its direct descendant page_content */
|
||||
.toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
|
||||
.toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
|
||||
top: 0;
|
||||
padding-top: var(--toolbar-material-height);
|
||||
}
|
||||
|
||||
/* -------- */
|
||||
/* Tabbar */
|
||||
/* -------- */
|
||||
|
||||
/* All top tabbar */
|
||||
.tabbar--top {
|
||||
padding-top: 0;
|
||||
}
|
||||
/* All bottom tabbar */
|
||||
.tabbar:not(.tabbar--top) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
|
||||
/*~
|
||||
name: Dialog
|
||||
category: Dialog
|
||||
elements: ons-dialog
|
||||
markup: |
|
||||
<div class="dialog-mask"></div>
|
||||
<div class="dialog">
|
||||
<div class="dialog-container">
|
||||
<p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.dialog {
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-cursor);
|
||||
@apply(--reset-font);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: auto auto;
|
||||
overflow: hidden;
|
||||
min-width: 270px;
|
||||
min-height: 100px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
height: inherit;
|
||||
min-height: inherit;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background-color: var(--dialog-background-color);
|
||||
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
|
||||
color: var(--dialog-text-color);
|
||||
}
|
||||
|
||||
.dialog-mask {
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-cursor);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Dialog
|
||||
category: Dialog
|
||||
elements: ons-dialog
|
||||
markup: |
|
||||
<div class="dialog-mask dialog-mask--material"></div>
|
||||
<div class="dialog dialog--material">
|
||||
<div class="dialog dialog-container--material">
|
||||
<p style="margin-left:24px;margin-right:24px">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.dialog--material {
|
||||
@apply(--material-font);
|
||||
text-align: left;
|
||||
@apply(--material-shadow-5);
|
||||
}
|
||||
|
||||
.dialog-container--material {
|
||||
border-radius: 2px;
|
||||
background-color: var(--material-dialog-background-color);
|
||||
color: var(--material-dialog-text-color);
|
||||
}
|
||||
|
||||
.dialog-mask--material {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
|
||||
:root {
|
||||
--fab-width: 56px;
|
||||
--fab-height: 56px;
|
||||
--fab-position: absolute;
|
||||
--fab-mini-width: 40px;
|
||||
--fab-mini-height: 40px;
|
||||
|
||||
--material-fab-width: 56px;
|
||||
--material-fab-height: 56px;
|
||||
--material-fab-position: absolute;
|
||||
--material-fab-mini-width: 40px;
|
||||
--material-fab-mini-height: 40px;
|
||||
|
||||
--fab: {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-font);
|
||||
@apply(--reset-cursor);
|
||||
width: var(--fab-width);
|
||||
height: var(--fab-height);
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
line-height: var(--fab-height);
|
||||
letter-spacing: 0;
|
||||
color: var(--fab-text-color);
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
background-color: var(--fab-background-color);
|
||||
border: 0 solid currentColor;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
|
||||
--material-fab: {
|
||||
@apply(--fab);
|
||||
@apply(--material-font);
|
||||
width: var(--material-fab-width);
|
||||
height: var(--material-fab-height);
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
line-height: var(--material-fab-height);
|
||||
color: var(--material-fab-text-color);
|
||||
background-color: var(--material-fab-background-color);
|
||||
@apply(--material-shadow-2);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
--fab--focus: {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
--material-fab--focus: {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
--fab--active: {
|
||||
box-shadow: 0 3px 6 rgba(0, 0, 0, 0.12);
|
||||
background-color: var(--fab-active-background-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
--material-fab--active: {
|
||||
@apply(--material-shadow-4);
|
||||
background-color: var(--material-fab-active-background-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
--fab--disabled: {
|
||||
background-color: color(black alpha(50%));
|
||||
@apply(--material-shadow-0);
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
--material-fab--disabled: {
|
||||
background-color: color(black alpha(50%));
|
||||
@apply(--material-shadow-0);
|
||||
@apply(--disabled);
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Fab
|
||||
category: Fab
|
||||
elements: ons-fab
|
||||
markup: |
|
||||
<button class="fab"><i class="zmdi zmdi-car"></i></button>
|
||||
<button class="fab" disabled><i class="zmdi zmdi-car"></i></button>
|
||||
*/
|
||||
/* stylelint-disable */
|
||||
ons-fab, ons-speed-dial-item, button {
|
||||
&.fab {
|
||||
@apply(--fab);
|
||||
&:active {
|
||||
@apply(--fab--active);
|
||||
box-shadow: 0 0 6 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
&:focus {
|
||||
@apply(--fab--focus);
|
||||
}
|
||||
&:disabled,
|
||||
&[disabled] {
|
||||
@apply(--material-fab--disabled);
|
||||
}
|
||||
}
|
||||
|
||||
&.fab__icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
padding: 0;
|
||||
z-index: 100;
|
||||
line-height: var(--material-fab-height);
|
||||
}
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
/*~
|
||||
name: Material Fab
|
||||
category: Fab
|
||||
elements: ons-fab
|
||||
markup: |
|
||||
<button class="fab fab--material"><i class="zmdi zmdi-car"></i></button>
|
||||
<button class="fab fab--material" disabled><i class="zmdi zmdi-car"></i></button>
|
||||
*/
|
||||
|
||||
/* stylelint-disable */
|
||||
ons-fab, ons-speed-dial-item, button {
|
||||
&.fab--material {
|
||||
@apply(--material-fab);
|
||||
}
|
||||
|
||||
&.fab--material:active {
|
||||
@apply(--material-fab--active);
|
||||
}
|
||||
|
||||
&.fab--material:focus {
|
||||
@apply(--material-fab--focus);
|
||||
}
|
||||
|
||||
&.fab--material__icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
padding: 0;
|
||||
z-index: 100;
|
||||
line-height: var(--material-fab-height);
|
||||
}
|
||||
|
||||
&.fab--material:disabled,
|
||||
&.fab--material[disabled] {
|
||||
@apply(--material-fab--disabled);
|
||||
}
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
/*~
|
||||
name: Fab Mini
|
||||
category: Fab
|
||||
elements: ons-fab
|
||||
markup: |
|
||||
<button class="fab fab--mini"><i class="zmdi zmdi-plus"></i></button>
|
||||
<button class="fab fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Material Fab Mini
|
||||
category: Fab
|
||||
elements: ons-fab
|
||||
markup: |
|
||||
<button class="fab fab--material fab--mini"><i class="zmdi zmdi-plus"></i></button>
|
||||
<button class="fab fab--material fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
|
||||
*/
|
||||
|
||||
/* stylelint-disable */
|
||||
ons-fab, ons-speed-dial-item, button {
|
||||
&.fab--mini {
|
||||
width: var(--fab-mini-width);
|
||||
height: var(--fab-mini-height);
|
||||
line-height: var(--fab-mini-height);
|
||||
}
|
||||
|
||||
&.fab--mini__icon {
|
||||
line-height: var(--fab-mini-height);
|
||||
}
|
||||
|
||||
&.speed-dial__item {
|
||||
position: absolute;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
/* stylelint-disable */
|
||||
ons-fab, button, .speed-dial {
|
||||
&.fab--top__right {
|
||||
top: 20px;
|
||||
bottom: auto;
|
||||
right: 20px;
|
||||
left: auto;
|
||||
position: var(--fab-position);
|
||||
}
|
||||
|
||||
&.fab--bottom__right {
|
||||
top: auto;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
left: auto;
|
||||
position: var(--fab-position);
|
||||
}
|
||||
|
||||
&.fab--top__left {
|
||||
top: 20px;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
left: 20px;
|
||||
position: var(--fab-position);
|
||||
}
|
||||
|
||||
&.fab--bottom__left {
|
||||
top: auto;
|
||||
bottom: 20px;
|
||||
right: auto;
|
||||
left: 20px;
|
||||
position: var(--fab-position);
|
||||
}
|
||||
|
||||
&.fab--top__center {
|
||||
top: 20px;
|
||||
bottom: auto;
|
||||
margin-left: -28px;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
position: var(--fab-position);
|
||||
}
|
||||
|
||||
&.fab--bottom__center {
|
||||
top: auto;
|
||||
bottom: 20px;
|
||||
margin-left: -28px;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
position: var(--fab-position);
|
||||
}
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
|
||||
:root {
|
||||
--input-bg-color: var(--background-color);
|
||||
--input-border-color: var(--border-color);
|
||||
--input-text-color: var(--text-color);
|
||||
--input-placeholder-color: var(--sub-text-color);
|
||||
--input-invalid-border-color: var(--border-color);
|
||||
--input-invalid-text-color: var(--text-color);
|
||||
--input-border: 1px solid var(--input-border-color);
|
||||
--alpha-lighten: 70%;
|
||||
--font-size: 17px;
|
||||
--font-weight: 400;
|
||||
--material-font-size: 17px;
|
||||
--material-font-weight: 400;
|
||||
--font-size--mini: calc(var(--font-size) - 3px);
|
||||
--font-weight--large: 500;
|
||||
--background-color--input: transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center, dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: var(--tap-highlight-color);
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
user-select: auto;
|
||||
-moz-user-select: text;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
a, button, input, textarea, select {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
@import './global.css';
|
||||
@import './util.css';
|
||||
@import './page.css';
|
||||
@import './switch.css';
|
||||
@import './range.css';
|
||||
@import './notification.css';
|
||||
@import './toolbar.css';
|
||||
@import './button.css';
|
||||
@import './button-bar.css';
|
||||
@import './segment.css';
|
||||
@import './tabbar.css';
|
||||
@import './toolbar-button.css';
|
||||
@import './checkbox.css';
|
||||
@import './radio-button.css';
|
||||
@import './list.css';
|
||||
@import './search-input.css';
|
||||
@import './text-input.css';
|
||||
@import './textarea.css';
|
||||
@import './dialog.css';
|
||||
@import './alert-dialog.css';
|
||||
@import './popover.css';
|
||||
@import './progress-bar.css';
|
||||
@import './progress-circular.css';
|
||||
@import './fab.css';
|
||||
@import './modal.css';
|
||||
@import './select.css';
|
||||
@import './action-sheet.css';
|
||||
@import './card.css';
|
||||
@import './toast.css';
|
||||
@import './combination.css'; /* non BEM */
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,41 @@
|
|||
/*~
|
||||
name: Modal
|
||||
category: Modal
|
||||
elements: ons-modal
|
||||
markup: |
|
||||
<div class="modal">
|
||||
<div class="modal__content">
|
||||
Message Text
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.modal {
|
||||
@apply(--reset-container);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-font);
|
||||
overflow: hidden;
|
||||
background-color: var(--modal-background-color);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table;
|
||||
z-index: 2147483647;
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
@apply(--reset-container);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-font);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
color: var(--modal-text-color);
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
:root {
|
||||
--notification-border-radius: 19px;
|
||||
--notification-width: auto;
|
||||
--notification-height: 19px;
|
||||
--notification-min-width: 19px;
|
||||
--notification-padding: 0 4px;
|
||||
--notification-font-weight: var(--font-weight);
|
||||
--notification-font-size: 16px;
|
||||
|
||||
--material-notification-font-size: 16px;
|
||||
--material-notification-font-weight: 500;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Notification
|
||||
category: Notification
|
||||
markup: |
|
||||
<span class="notification">1</span>
|
||||
<span class="notification">10</span>
|
||||
<span class="notification">999</span>
|
||||
*/
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font: inherit;
|
||||
border: none;
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-font);
|
||||
@apply(--reset-cursor);
|
||||
@apply(--ellipsis);
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: var(--notification-padding);
|
||||
width: var(--notification-width);
|
||||
height: var(--notification-height);
|
||||
border-radius: var(--notification-border-radius);
|
||||
background-color: var(--notification-background-color);
|
||||
color: var(--notification-color);
|
||||
text-align: center;
|
||||
font-size: var(--notification-font-size);
|
||||
min-width: var(--notification-min-width);
|
||||
line-height: var(--notification-height);
|
||||
font-weight: var(--notification-font-weight);
|
||||
}
|
||||
|
||||
.notification:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Notification
|
||||
category: Notification
|
||||
markup: |
|
||||
<span class="notification notification--material">1</span>
|
||||
<span class="notification notification--material">10</span>
|
||||
<span class="notification notification--material">999</span>
|
||||
*/
|
||||
|
||||
.notification--material {
|
||||
@apply(--material-font);
|
||||
background-color: var(--material-notification-background-color);
|
||||
font-size: var(--material-notification-font-size);
|
||||
font-weight: var(--material-notification-font-weight);
|
||||
color: var(--material-notification-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
|
||||
:root {
|
||||
--page-background-color: var(--background-color);
|
||||
--page-material-background-color: var(--material-background-color);
|
||||
}
|
||||
|
||||
.page {
|
||||
@apply(--reset-font);
|
||||
background-color: var(--page-background-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-x: visible;
|
||||
overflow-y: hidden;
|
||||
color: var(--text-color);
|
||||
-ms-overflow-style: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.page::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page__content {
|
||||
background-color: var(--page-background-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page__background {
|
||||
background-color: var(--page-background-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page--material {
|
||||
@apply(--material-font);
|
||||
background-color: var(--page-material-background-color);
|
||||
}
|
||||
|
||||
.page--material__content {
|
||||
@apply(--material-font);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
.page__content h1,
|
||||
.page__content h2,
|
||||
.page__content h3,
|
||||
.page__content h4,
|
||||
.page__content h5 {
|
||||
@apply(--material-font);
|
||||
font-weight: var(--font-weight--large);
|
||||
margin: 0.6em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page__content h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.page__content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.page__content h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.page--material__content h1,
|
||||
.page--material__content h2,
|
||||
.page--material__content h3,
|
||||
.page--material__content h4,
|
||||
.page--material__content h5 {
|
||||
@apply(--material-font);
|
||||
font-weight: var(--font-weight--large);
|
||||
margin: 0.6em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page--material__content h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.page--material__content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.page--material__content h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.page--material__background {
|
||||
background-color: var(--page-material-background-color);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
|
||||
:root {
|
||||
--popover-arrow-size: 18px;
|
||||
--popover-arrow-radius: 4px;
|
||||
--popover-radius: 8px;
|
||||
--popover-margin: 6px;
|
||||
--material-popover-radius: 2px;
|
||||
--material-popover-margin: 4px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Popover
|
||||
category: Popover
|
||||
elements: ons-popover
|
||||
markup: |
|
||||
<div class="popover-mask"></div>
|
||||
<div class="popover popover--bottom" style="bottom: 20px; left: 65px;">
|
||||
<div class="popover__arrow popover--bottom__arrow" style="left: 110px;"></div>
|
||||
<div class="popover__content popover--bottom__content">
|
||||
<div style="text-align:center;opacity:0.8;margin-top:40px">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Popover(top)
|
||||
category: Popover
|
||||
elements: ons-popover
|
||||
markup: |
|
||||
<div class="popover-mask"></div>
|
||||
<div class="popover popover--top" style="top: 20px; left: 50px;">
|
||||
<div class="popover__arrow popover--top__arrow" style="margin-left: 110px;"></div>
|
||||
<div class="popover__content popover--top__content">
|
||||
<div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Popover(left)
|
||||
category: Popover
|
||||
elements: ons-popover
|
||||
markup: |
|
||||
<div class="popover-mask"></div>
|
||||
<div class="popover popover--right" style="top: 20px; right: 20px;">
|
||||
<div class="popover__arrow popover--right__arrow" style="bottom: 50px;"></div>
|
||||
<div class="popover__content popover--right__content">
|
||||
<div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Popover(right)
|
||||
category: Popover
|
||||
elements: ons-popover
|
||||
markup: |
|
||||
<div class="popover-mask"></div>
|
||||
<div class="popover popover--left" style="top: 20px;left: 20px;">
|
||||
<div class="popover__arrow popover--left__arrow" style="top: 50px;"></div>
|
||||
<div class="popover__content popover--left__content">
|
||||
<div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.popover {
|
||||
position: absolute;
|
||||
z-index: 20001;
|
||||
}
|
||||
|
||||
.popover--bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.popover--top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.popover--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.popover--right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.popover-mask {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
z-index: 19999;
|
||||
}
|
||||
|
||||
.popover__content {
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-cursor);
|
||||
@apply(--reset-font);
|
||||
display: block;
|
||||
width: 220px;
|
||||
overflow: auto;
|
||||
min-height: 100px;
|
||||
max-height: 100%;
|
||||
background-color: var(--popover-background-color);
|
||||
border-radius: var(--popover-radius);
|
||||
color: var(--popover-text-color);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.popover--top__content {
|
||||
|
||||
}
|
||||
|
||||
.popover--bottom__content {
|
||||
|
||||
}
|
||||
|
||||
.popover--left__content {
|
||||
|
||||
}
|
||||
|
||||
.popover--right__content {
|
||||
|
||||
}
|
||||
|
||||
.popover__arrow {
|
||||
position: absolute;
|
||||
width: var(--popover-arrow-size);
|
||||
height: var(--popover-arrow-size);
|
||||
transform-origin: 50% 50% 0;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(45deg, var(--popover-background-color), var(--popover-background-color) 50%, transparent 50%);
|
||||
border-radius: 0 0 0 var(--popover-arrow-radius);
|
||||
margin: 0;
|
||||
z-index: 20001;
|
||||
}
|
||||
|
||||
/* NOTE: If you changed this properties, you should check if ons-popover is broken. */
|
||||
.popover--bottom__arrow {
|
||||
transform: translateY(6px) translateX(calc(var(--popover-arrow-size) / -2)) rotate(-45deg);
|
||||
bottom: 0;
|
||||
margin-right: -18px;
|
||||
}
|
||||
|
||||
.popover--top__arrow {
|
||||
transform: translateY(-6px) translateX(calc(var(--popover-arrow-size) / -2)) rotate(135deg);
|
||||
top: 0;
|
||||
margin-right: -18px;
|
||||
}
|
||||
|
||||
.popover--left__arrow {
|
||||
transform: translateX(-6px) translateY(calc(var(--popover-arrow-size) / -2)) rotate(45deg);
|
||||
left: 0;
|
||||
margin-bottom: -18px;
|
||||
}
|
||||
|
||||
.popover--right__arrow {
|
||||
transform: translateX(6px) translateY(calc(var(--popover-arrow-size) / -2)) rotate(225deg);
|
||||
right: 0;
|
||||
margin-bottom: -18px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Popover
|
||||
category: Popover
|
||||
elements: ons-popover
|
||||
markup: |
|
||||
<div class="popover-mask popover-mask--material"></div>
|
||||
<div class="popover popover--material popover--left" style="top: 50px; left: 65px;">
|
||||
<div class="popover__arrow popover--material__arrow popover--left__arrow"></div>
|
||||
<div class="popover__content popover--material__content popover--left__content">
|
||||
<div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.popover--material {
|
||||
}
|
||||
|
||||
.popover-mask--material {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.popover--material__content {
|
||||
background-color: var(--material-popover-background-color);
|
||||
border-radius: var(--material-popover-radius);
|
||||
color: var(--material-popover-text-color);
|
||||
@apply(--material-shadow-1);
|
||||
}
|
||||
|
||||
.popover--material__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
|
||||
/*~
|
||||
name: Progress Bar
|
||||
category: Progress Bar
|
||||
elements: ons-progress-bar
|
||||
markup: |
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar__primary" style="width: 30%"></div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar__primary" style="width:20%"></div>
|
||||
<div class="progress-bar__secondary" style="width:76%"></div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="progress-bar progress-bar--indeterminate">
|
||||
</div>
|
||||
*/
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
height: 2px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: var(--progress-bar-background-color);
|
||||
background-clip: padding-box;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.progress-bar__primary,
|
||||
.progress-bar__secondary {
|
||||
position: absolute;
|
||||
background-color: var(--progress-bar-color);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: width .3s linear;
|
||||
z-index: 100;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.progress-bar__secondary {
|
||||
background-color: var(--progress-bar-secondary-color);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.progress-bar--indeterminate:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--progress-bar-color);
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.progress-bar--indeterminate:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--progress-bar-color);
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
||||
animation-delay: 1.15s;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes progress-bar__indeterminate {
|
||||
0% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-bar__indeterminate-short {
|
||||
0% {
|
||||
left: -200%;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
60% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Progress Bar
|
||||
category: Progress Bar
|
||||
elements: ons-progress-bar
|
||||
markup: |
|
||||
<div class="progress-bar progress-bar--material">
|
||||
<div class="progress-bar__primary progress-bar--material__primary" style="width: 30%"></div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="progress-bar progress-bar--material">
|
||||
<div class="progress-bar__primary progress-bar--material__primary" style="width:20%"></div>
|
||||
<div class="progress-bar__secondary progress-bar--material__secondary" style="width:76%"></div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="progress-bar progress-bar--material progress-bar--indeterminate">
|
||||
</div>
|
||||
*/
|
||||
|
||||
.progress-bar--material {
|
||||
height: 4px;
|
||||
background-color: var(--material-progress-bar-background-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.progress-bar--material__primary,
|
||||
.progress-bar--material__secondary {
|
||||
background-color: var(--material-progress-bar-primary-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.progress-bar--material__secondary {
|
||||
background-color: var(--material-progress-bar-secondary-color);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.progress-bar--material.progress-bar--indeterminate:before { /* FIXME */
|
||||
background-color: var(--material-progress-bar-primary-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.progress-bar--material.progress-bar--indeterminate:after { /* FIXME */
|
||||
background-color: var(--material-progress-bar-primary-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
|
||||
/*~
|
||||
name: Progress Circle
|
||||
category: Progress Circle
|
||||
elements: ons-progress-circular
|
||||
markup: |
|
||||
<svg class="progress-circular progress-circular--indeterminate">
|
||||
<circle class="progress-circular__background"/>
|
||||
<circle class="progress-circular__primary progress-circular--indeterminate__primary"/>
|
||||
<circle class="progress-circular__secondary progress-circular--indeterminate__secondary"/>
|
||||
</svg>
|
||||
|
||||
<svg class="progress-circular">
|
||||
<circle class="progress-circular__background"/>
|
||||
<circle class="progress-circular__secondary" style="stroke-dasharray: 140%, 251.32%"/>
|
||||
<circle class="progress-circular__primary" style="stroke-dasharray: 100%, 251.32%"/>
|
||||
</svg>
|
||||
|
||||
<svg class="progress-circular">
|
||||
<circle class="progress-circular__background"/>
|
||||
<circle class="progress-circular__primary" style="stroke-dasharray: 80%, 251.32%"/>
|
||||
</svg>
|
||||
*/
|
||||
|
||||
.progress-circular {
|
||||
height: 32px;
|
||||
position: relative;
|
||||
width: 32px;
|
||||
transform: rotate(270deg);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.progress-circular__background,
|
||||
.progress-circular__primary,
|
||||
.progress-circular__secondary {
|
||||
cx: 50%;
|
||||
cy: 50%;
|
||||
r: 40%;
|
||||
animation: none;
|
||||
fill: none;
|
||||
stroke-width: 5%;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.progress-circular__background {
|
||||
stroke: var(--progress-circle-background-color);
|
||||
}
|
||||
|
||||
.progress-circular__primary {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke: var(--progress-circle-primary-color);
|
||||
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.progress-circular__secondary {
|
||||
stroke: var(--progress-circle-secondary-color);
|
||||
}
|
||||
|
||||
.progress-circular--indeterminate {
|
||||
animation: progress__rotate 2s linear infinite;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.progress-circular--indeterminate__primary {
|
||||
animation: progress__dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.progress-circular--indeterminate__secondary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes progress__rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress__dash {
|
||||
0% {
|
||||
stroke-dasharray: 10%, 241.32%;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 201%, 50.322%;
|
||||
stroke-dashoffset: -100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 10%, 241.32%;
|
||||
stroke-dashoffset: -251.32%;
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Progress Circle
|
||||
category: Progress Circle
|
||||
elements: ons-progress-circular
|
||||
markup: |
|
||||
<svg class="progress-circular progress-circular--material progress-circular--indeterminate">
|
||||
<circle class="progress-circular__background progress-circular--material__background"/>
|
||||
<circle class="progress-circular__primary progress-circular--material__primary progress-circular--indeterminate__primary"/>
|
||||
<circle class="progress-circular__secondary progress-circular--material__secondary progress-circular--indeterminate__secondary"/>
|
||||
</svg>
|
||||
|
||||
<svg class="progress-circular progress-circular--material">
|
||||
<circle class="progress-circular__background progress-circular--material__background"/>
|
||||
<circle class="progress-circular__secondary progress-circular--material__secondary" style="stroke-dasharray: 140%, 251.32%"/>
|
||||
<circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 100%, 251.32%"/>
|
||||
</svg>
|
||||
|
||||
<svg class="progress-circular progress-circular--material">
|
||||
<circle class="progress-circular__background progress-circular--material__background"/>
|
||||
<circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 80%, 251.32%"/>
|
||||
</svg>
|
||||
*/
|
||||
|
||||
.progress-circular--material__background,
|
||||
.progress-circular--material__primary,
|
||||
.progress-circular--material__secondary {
|
||||
stroke-width: 9%;
|
||||
}
|
||||
|
||||
.progress-circular--material__background {
|
||||
stroke: var(--material-progress-circle-background-color);
|
||||
}
|
||||
|
||||
.progress-circular--material__primary {
|
||||
stroke: var(--material-progress-circle-primary-color);
|
||||
}
|
||||
|
||||
.progress-circular--material__secondary {
|
||||
stroke: var(--material-progress-circle-secondary-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
:root {
|
||||
--radio-button-background-active: rgba(0, 0, 0, 0);
|
||||
--radio-button-indicator-color: var(--highlight-color);
|
||||
--radio-button-background: transparent;
|
||||
--radio-button-border: 3px solid var(--radio-button-indicator-color);
|
||||
--radio-button-size: 24px;
|
||||
--material-radio-button-size: 20px;
|
||||
--material-radio-button-shadow-size: calc((48px - var(--material-radio-button-size)) / 2);
|
||||
|
||||
--radio-button: {
|
||||
@apply(--reset-box-model);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@apply(--reset-cursor);
|
||||
@apply(--reset-font);
|
||||
@apply(--hide-input-parent);
|
||||
}
|
||||
|
||||
--radio-button__label: {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@apply(--reset-cursor);
|
||||
}
|
||||
|
||||
--radio-button--before: {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
@apply(--reset-box-model);
|
||||
}
|
||||
|
||||
--radio-button--after: {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
--radio-button--disabled: {
|
||||
@apply(--disabled);
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Radio Button
|
||||
category: Radio Button
|
||||
elements: ons-input
|
||||
markup: |
|
||||
<label class="radio-button">
|
||||
<input type="radio" class="radio-button__input" name="r" checked="checked">
|
||||
<div class="radio-button__checkmark"></div>
|
||||
Label
|
||||
</label>
|
||||
|
||||
<label class="radio-button">
|
||||
<input type="radio" class="radio-button__input" name="r">
|
||||
<div class="radio-button__checkmark"></div>
|
||||
Label
|
||||
</label>
|
||||
|
||||
<label class="radio-button">
|
||||
<input type="radio" class="radio-button__input" name="r">
|
||||
<div class="radio-button__checkmark"></div>
|
||||
Label
|
||||
</label>
|
||||
*/
|
||||
|
||||
.radio-button__input {
|
||||
@apply(--hide-input);
|
||||
}
|
||||
|
||||
.radio-button__input:active,
|
||||
.radio-button__input:focus {
|
||||
outline: 0;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
@apply(--radio-button__label);
|
||||
@apply(--hide-input-parent);
|
||||
line-height: var(--radio-button-size);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.radio-button__checkmark:before {
|
||||
@apply(--radio-button--before);
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--checkbox-size);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.radio-button__checkmark {
|
||||
@apply(--radio-button);
|
||||
position: relative;
|
||||
width: var(--radio-button-size);
|
||||
height: var(--radio-button-size);
|
||||
background: var(--radio-button-background);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.radio-button__checkmark:after {
|
||||
@apply(--checkmark);
|
||||
}
|
||||
|
||||
:checked + .radio-button__checkmark {
|
||||
background: var(--radio-button-background-active);
|
||||
}
|
||||
|
||||
:checked + .radio-button__checkmark:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:checked + .radio-button__checkmark:before {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:disabled + .radio-button__checkmark {
|
||||
@apply(--radio-button--disabled);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Radio Button
|
||||
category: Radio Button
|
||||
elements: ons-input
|
||||
markup: |
|
||||
<label class="radio-button radio-button--material">
|
||||
<input type="radio" class="radio-button__input radio-button--material__input" name="r" checked="checked">
|
||||
<div class="radio-button__checkmark radio-button--material__checkmark"></div>
|
||||
Label
|
||||
</label>
|
||||
<label class="radio-button radio-button--material">
|
||||
<input type="radio" class="radio-button__input radio-button--material__input" name="r">
|
||||
<div class="radio-button__checkmark radio-button--material__checkmark"></div>
|
||||
Label
|
||||
</label>
|
||||
<label class="radio-button radio-button--material">
|
||||
<input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled checked>
|
||||
<div class="radio-button__checkmark radio-button--material__checkmark"></div>
|
||||
Label
|
||||
</label>
|
||||
<label class="radio-button radio-button--material">
|
||||
<input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled>
|
||||
<div class="radio-button__checkmark radio-button--material__checkmark"></div>
|
||||
Label
|
||||
</label>
|
||||
*/
|
||||
|
||||
.radio-button--material {
|
||||
line-height: calc(var(--material-radio-button-size) + 2px);
|
||||
@apply(--material-font);
|
||||
}
|
||||
|
||||
.radio-button--material__input:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
width: var(--material-radio-button-size);
|
||||
height: var(--material-radio-button-size);
|
||||
box-shadow: 0 0 0 var(--material-radio-button-shadow-size) var(--material-radio-button-inactive-color);
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background-color: var(--material-radio-button-inactive-color);
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
transform: scale3d(0.2, 0.2, 0.2);
|
||||
transition: opacity 0.25s ease-out, transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
.radio-button--material__input:checked:before {
|
||||
box-shadow: 0 0 0 var(--material-radio-button-shadow-size) var(--material-radio-button-active-color);
|
||||
background-color: var(--material-radio-button-active-color);
|
||||
}
|
||||
|
||||
.radio-button--material__input:active:before {
|
||||
opacity: .15;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.radio-button--material__checkmark {
|
||||
width: var(--material-radio-button-size);
|
||||
height: var(--material-radio-button-size);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.radio-button--material__checkmark:before {
|
||||
background: transparent;
|
||||
border: 2px solid var(--material-radio-button-inactive-color);
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
width: var(--material-radio-button-size);
|
||||
height: var(--material-radio-button-size);
|
||||
transition: border 0.2s ease;
|
||||
}
|
||||
|
||||
.radio-button--material__checkmark:after {
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
top: calc(var(--material-radio-button-size) / 4);
|
||||
left: calc(var(--material-radio-button-size) / 4);
|
||||
width: calc(var(--material-radio-button-size) / 2);
|
||||
height: calc(var(--material-radio-button-size) / 2);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
:checked + .radio-button--material__checkmark:before {
|
||||
background: transparent;
|
||||
border: 2px solid var(--material-radio-button-active-color);
|
||||
}
|
||||
|
||||
.radio-button--material__input + .radio-button__checkmark:after {
|
||||
background: var(--material-radio-button-inactive-color);
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
:checked + .radio-button--material__checkmark:after {
|
||||
opacity: 1;
|
||||
background: var(--material-radio-button-active-color);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
:disabled + .radio-button--material__checkmark {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:disabled + .radio-button--material__checkmark:after {
|
||||
background-color: var(--material-radio-button-disabled-color);
|
||||
border-color: var(--material-radio-button-disabled-color);
|
||||
}
|
||||
|
||||
:disabled + .radio-button--material__checkmark:before {
|
||||
border-color: var(--material-radio-button-disabled-color);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
|
||||
:root {
|
||||
--range-thumb-size: 28px;
|
||||
--range-track-height: 2px;
|
||||
|
||||
--material-range-track-height: 2px;
|
||||
--material-range-thumb-size: 14px;
|
||||
--material-range-thumb-radius: calc(var(--material-range-thumb-size) / 2);
|
||||
--material-range-thumb-vertical-margin: 24px;
|
||||
--material-range-thumb-horizontal-margin: 2px;
|
||||
|
||||
--range__thumb: {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: var(--range-thumb-size);
|
||||
width: var(--range-thumb-size);
|
||||
background-color: var(--range-thumb-background-color);
|
||||
border: none;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Range
|
||||
category: Range
|
||||
elements: ons-range
|
||||
markup: |
|
||||
<div class="range">
|
||||
<input type="range" class="range__input">
|
||||
<input type="range" class="range__focus-ring">
|
||||
</div>
|
||||
|
||||
<div class="range range--disabled">
|
||||
<input type="range" class="range__input" disabled>
|
||||
<input type="range" class="range__focus-ring" disabled>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.range {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: calc(var(--range-thumb-size) + 2px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-image: linear-gradient(var(--range-track-background-color), var(--range-track-background-color));
|
||||
background-position: left center;
|
||||
background-size: 100% var(--range-track-height);
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.range__input {
|
||||
@apply(--reset-input);
|
||||
appearance: none;
|
||||
background-image: linear-gradient(var(--range-track-background-color-active), var(--range-track-background-color-active));
|
||||
background-position: left center;
|
||||
background-size: 0% var(--range-track-height);
|
||||
background-repeat: no-repeat;
|
||||
height: calc(var(--range-thumb-size) + 2px);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.range__input::-moz-range-track {
|
||||
position: relative;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.range__input::-ms-track {
|
||||
position: relative;
|
||||
border: none;
|
||||
background-color: var(--range-track-background-color);
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.range__input::-webkit-slider-thumb {
|
||||
@apply(--range__thumb);
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.range__input::-moz-range-thumb {
|
||||
@apply(--range__thumb);
|
||||
}
|
||||
|
||||
.range__input::-ms-thumb {
|
||||
@apply(--range__thumb);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.range__input::-ms-fill-lower {
|
||||
height: 2px;
|
||||
background-color: var(--range-track-background-color-active);
|
||||
}
|
||||
|
||||
.range__input::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.range__input:disabled {
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.range__focus-ring {
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
@apply(--reset-input);
|
||||
appearance: none;
|
||||
background: none;
|
||||
height: calc(var(--range-thumb-size) + 2px);
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.range--disabled {
|
||||
@apply(--disabled);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Range
|
||||
category: Range
|
||||
elements: ons-range
|
||||
markup: |
|
||||
<div class="range range--material">
|
||||
<input type="range" class="range__input range--material__input" min="0" max="100">
|
||||
<!-- <input type="range" class="range__focus-ring range--material__focus-ring"> -->
|
||||
</div>
|
||||
|
||||
<div class="range range--material range--disabled">
|
||||
<input type="range" class="range__input range--material__input" disabled>
|
||||
<!-- <input type="range" class="range__focus-ring range--material__focus-ring" disabled> -->
|
||||
</div>
|
||||
*/
|
||||
|
||||
.range--material {
|
||||
position: relative;
|
||||
background-image: linear-gradient(var(--material-range-track-color), var(--material-range-track-color));
|
||||
}
|
||||
|
||||
.range--material__input {
|
||||
background-image: linear-gradient(var(--material-range-thumb-color), var(--material-range-thumb-color));
|
||||
background-position: center left;
|
||||
background-size: 0% 2px;
|
||||
}
|
||||
|
||||
.range--material__focus-ring {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.range--material__focus-ring::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: var(--material-range-thumb-size);
|
||||
height: var(--material-range-thumb-size);
|
||||
border: none;
|
||||
box-shadow: 0 0 0 calc((32px - var(--material-range-thumb-size)) / 2) var(--material-range-thumb-color);
|
||||
background-color: var(--material-range-thumb-color);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
.range--material__input.range__input--active + .range--material__focus-ring::-webkit-slider-thumb {
|
||||
opacity: 0.2;
|
||||
transform: scale(1.5, 1.5, 1.5);
|
||||
}
|
||||
|
||||
.range--material__input::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
width: var(--material-range-thumb-size);
|
||||
height: 32px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-image: radial-gradient(circle farthest-corner, var(--material-range-thumb-color) 0%, var(--material-range-thumb-color) calc(var(--material-range-thumb-radius) - 0.4px), transparent var(--material-range-thumb-radius));
|
||||
transition: transform 0.1s linear;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.range--material__input[_zero]::-webkit-slider-thumb {
|
||||
background-image: radial-gradient(circle farthest-corner, var(--material-range-zero-thumb-color) 0%, var(--material-range-zero-thumb-color) 4px, var(--material-range-track-color) 4px, var(--material-range-track-color) calc(var(--material-range-thumb-radius) - 0.6px), transparent calc(var(--material-range-thumb-radius)));
|
||||
}
|
||||
|
||||
.range--material__input[_zero] + .range--material__focus-ring::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 calc((32px - var(--material-range-thumb-size)) / 2) var(--material-range-track-color);
|
||||
}
|
||||
|
||||
.range--material__input::-moz-range-track {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.range--material__input::-moz-range-thumb,
|
||||
.range--material__input:focus::-moz-range-thumb {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
width: var(--material-range-thumb-size);
|
||||
height: 32px;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
background-image: -moz-radial-gradient(circle farthest-corner, var(--material-range-thumb-color) 0%, var(--material-range-thumb-color) calc(var(--material-range-thumb-radius) - 0.4px), transparent var(--material-range-thumb-radius)); /* stylelint-disable-line */
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.range--material__input:active::-webkit-slider-thumb,
|
||||
.range--material__input.range__input--active::-webkit-slider-thumb { /* NOTICE: ":active" does not work on Android Chrome. */
|
||||
transform: scale(1.5);
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
/* stylelint-disable */ .range--disabled.range--material { /* stylelint-enable */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* stylelint-disable */ .range--disabled > .range--material__input { /* stylelint-enable */
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.range--material__input:disabled::-webkit-slider-thumb {
|
||||
background-image: radial-gradient(circle farthest-corner, var(--material-range-disabled-thumb-color) 0%, var(--material-range-disabled-thumb-color) 4px, var(--material-range-disabled-thumb-border-color) 4.4px, var(--material-range-disabled-thumb-border-color) calc(var(--material-range-thumb-radius) + 0.6px), transparent calc(var(--material-range-thumb-radius) + 0.6px));
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.range--material__input:disabled::-moz-range-thumb {
|
||||
background-image: -moz-radial-gradient(circle farthest-corner, var(--material-range-disabled-thumb-color) 0%, var(--material-range-disabled-thumb-color) 4px, var(--material-range-disabled-thumb-border-color) 4.4px, var(--material-range-disabled-thumb-border-color) calc(var(--material-range-thumb-radius) + 0.6px), transparent calc(var(--material-range-thumb-radius) + 0.6px)); /* stylelint-disable-line */
|
||||
transition: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
:root {
|
||||
--search-icon: url('../img/ios-search-input-icon.svg');
|
||||
--search-input-background-image: var(--search-icon);
|
||||
--search-input-color: var(--input-text-color);
|
||||
--search-decoration-margin-right: 0;
|
||||
--search-input-border-radius: 5.5px;
|
||||
--search-input-height: 28px;
|
||||
--search-input-font-size: 14px;
|
||||
--search-input-placeholder-color: #7a797b;
|
||||
|
||||
--material-search-icon: url('../img/android-search-input-icon.svg');
|
||||
|
||||
--search-input: {
|
||||
@apply(--reset-input);
|
||||
@apply(--reset-font);
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
--search-input--disabled: {
|
||||
@apply(--disabled);
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Search Input
|
||||
category: Search Input
|
||||
markup: |
|
||||
<input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">
|
||||
*/
|
||||
|
||||
.search-input {
|
||||
@apply(--search-input);
|
||||
box-sizing: border-box;
|
||||
height: var(--search-input-height);
|
||||
font-size: var(--search-input-font-size);
|
||||
background-color: var(--search-input-background-color);
|
||||
box-shadow: none;
|
||||
color: var(--search-input-color);
|
||||
line-height: 1.3;
|
||||
padding: 0 8px 0 28px;
|
||||
margin: 0;
|
||||
border-radius: var(--search-input-border-radius);
|
||||
background-image: var(--search-input-background-image);
|
||||
background-position: 8px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 13px;
|
||||
font-weight: var(--font-weight);
|
||||
display: inline-block;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.search-input::-webkit-search-cancel-button {
|
||||
appearance: textfield;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-input::-webkit-search-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--search-input-placeholder-color);
|
||||
font-size: var(--search-input-font-size);
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.search-input:placeholder-shown {
|
||||
}
|
||||
|
||||
.search-input:disabled {
|
||||
@apply(--search-input--disabled);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Search Input
|
||||
category: Search Input
|
||||
markup: |
|
||||
<input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 280px;">
|
||||
*/
|
||||
|
||||
.search-input--material {
|
||||
@apply(--material-font);
|
||||
border-radius: 2px;
|
||||
height: 48px;
|
||||
background-color: var(--material-search-background-color);
|
||||
background-image: var(--material-search-icon);
|
||||
background-size: 18px;
|
||||
background-position: 18px center;
|
||||
font-size: 14px;
|
||||
padding: 0 24px 0 64px;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
|
||||
}
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
:root {
|
||||
--segment-active-color: var(--segment-active-text-color);
|
||||
--segment-border-top: 1px solid var(--segment-color);
|
||||
--segment-border-bottom: 1px solid var(--segment-color);
|
||||
--segment-border: 0 solid var(--segment-color);
|
||||
--segment-border-radius: 4px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Segment
|
||||
category: Segment
|
||||
markup: |
|
||||
<div class="segment" style="width: 280px; margin: 0 auto;">
|
||||
<div class="segment__item">
|
||||
<input type="radio" class="segment__input" name="segment-a" checked>
|
||||
<div class="segment__button">One</div>
|
||||
</div>
|
||||
<div class="segment__item">
|
||||
<input type="radio" class="segment__input" name="segment-a">
|
||||
<div class="segment__button">Two</div>
|
||||
</div>
|
||||
<div class="segment__item">
|
||||
<input type="radio" class="segment__input" name="segment-a">
|
||||
<div class="segment__button">Three</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.segment {
|
||||
@apply(--reset-font);
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.segment__item {
|
||||
@apply(--reset-font);
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@apply(--hide-input-parent);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.segment__input {
|
||||
@apply(--hide-input);
|
||||
}
|
||||
|
||||
.segment__button {
|
||||
@apply(--reset-font);
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
color: var(--segment-color);
|
||||
border: 1px solid var(--segment-color);
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 0;
|
||||
font-weight: var(--font-weight);
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
width: 100%;
|
||||
transition: background-color 0.2s linear, color 0.2s linear;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.segment__item:disabled {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
.segment__button:hover {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.segment__button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:active + .segment__button {
|
||||
background-color: var(--segment-active-background-color);
|
||||
border: var(--segment-border);
|
||||
border-top: var(--segment-border-top);
|
||||
border-bottom: var(--segment-border-bottom);
|
||||
border-right: 1px solid var(--segment-color);
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
:checked + .segment__button {
|
||||
background-color: var(--segment-color);
|
||||
color: var(--segment-active-color);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.segment__item:first-child > .segment__button {
|
||||
border-left-width: 1px;
|
||||
border-radius: var(--segment-border-radius) 0 0 var(--segment-border-radius);
|
||||
}
|
||||
|
||||
.segment__item:last-child > .segment__button {
|
||||
border-right-width: 1px;
|
||||
border-radius: 0 var(--segment-border-radius) var(--segment-border-radius) 0;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Segment
|
||||
category: Segment
|
||||
markup: |
|
||||
<div class="segment segment--material" style="width: 280px; margin: 0 auto;">
|
||||
<div class="segment__item segment--material__item">
|
||||
<input type="radio" class="segment__input segment--material__input" name="segment-b" checked>
|
||||
<div class="segment__button segment--material__button">One</div>
|
||||
</div>
|
||||
<div class="segment__item segment--material__item">
|
||||
<input type="radio" class="segment__input segment--material__input" name="segment-b">
|
||||
<div class="segment__button segment--material__button">Two</div>
|
||||
</div>
|
||||
<div class="segment__item segment--material__item">
|
||||
<input type="radio" class="segment__input segment--material__input" name="segment-b">
|
||||
<div class="segment__button segment--material__button">Three</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.segment--material {
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.segment--material__button {
|
||||
@apply(--material-font);
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-width: 0;
|
||||
color: var(--material-segment-text-color);
|
||||
border-radius: 0;
|
||||
background-color: var(--material-segment-background-color);
|
||||
}
|
||||
|
||||
:active + .segment--material__button {
|
||||
background-color: var(--material-segment-background-color);
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
font-size: 14px;
|
||||
transition: none;
|
||||
color: var(--material-segment-text-color);
|
||||
}
|
||||
|
||||
:checked + .segment--material__button {
|
||||
background-color: var(--material-segment-active-background-color);
|
||||
color: var(--material-segment-active-text-color);
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.segment--material__item:first-child > .segment--material__button,
|
||||
.segment--material__item:last-child > .segment--material__button {
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
|
||||
:root {
|
||||
--select-input-font-size: var(--font-size);
|
||||
--select-input-height: 32px;
|
||||
|
||||
--material-select-input-font-size: 15px;
|
||||
|
||||
--select-input: {
|
||||
@apply(--input);
|
||||
@apply(--transparent);
|
||||
position: relative;
|
||||
font-size: var(--select-input-font-size);
|
||||
height: var(--select-input-height);
|
||||
line-height: var(--select-input-height);
|
||||
border-color: var(--select-input-border-color);
|
||||
color: var(--select-input-color);
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
--select-input--disabled: {
|
||||
@apply(--disabled);
|
||||
@apply(--transparent);
|
||||
}
|
||||
|
||||
--input-placeholder: {
|
||||
@apply(--transparent);
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
--select-input--invalid: {
|
||||
@apply(--transparent);
|
||||
color: var(--input-invalid-text-color);
|
||||
}
|
||||
|
||||
--select-input--material-placeholder: {
|
||||
color: var(--material-select-input-inactive-color);
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Select Input
|
||||
category: Select Input
|
||||
markup: |
|
||||
<select class="select-input">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
|
||||
|
||||
|
||||
<select class="select-input" disabled>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
*/
|
||||
|
||||
.select-input {
|
||||
@apply(--select-input);
|
||||
padding: 0 20px 0 0;
|
||||
background-color: transparent;
|
||||
background-image: url('../img/select-arrow.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.select-input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-input::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
.select-input:disabled {
|
||||
@apply(--select-input--disabled);
|
||||
}
|
||||
|
||||
.select-input:disabled::placeholder {
|
||||
@apply(--input-placeholder);
|
||||
}
|
||||
|
||||
.select-input:invalid {
|
||||
@apply(--select-input--invalid);
|
||||
}
|
||||
|
||||
.select-input[multiple] {
|
||||
height: calc(var(--select-input-height) * 2);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Select Input
|
||||
category: Select Input
|
||||
markup: |
|
||||
<select class="select-input select-input--material">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
|
||||
|
||||
|
||||
<select class="select-input select-input--material" disabled>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
*/
|
||||
|
||||
.select-input--material {
|
||||
@apply(--material-font);
|
||||
color: var(--material-select-input-color);
|
||||
font-size: var(--material-select-input-font-size);
|
||||
background-image: url('../img/select-arrow.svg'), linear-gradient(to top, var(--material-select-border-color) 50%, var(--material-select-border-color) 50%);
|
||||
background-size: auto, 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center, left bottom;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
transform: translate3d(0, 0, 0); /* prevent ios flicker */
|
||||
}
|
||||
|
||||
.select-input--material__label {
|
||||
@apply(--material-font);
|
||||
color: var(--material-select-input-inactive-color);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
font-size: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.select-input--material__label--active {
|
||||
color: var(--material-select-input-active-color);
|
||||
transform: translate(0, -75%) scale(0.75);
|
||||
transform-origin: left top;
|
||||
transition: transform 0.1s ease-in, color 0.1s ease-in;
|
||||
}
|
||||
|
||||
.select-input--material::placeholder {
|
||||
@apply(--select-input--material-placeholder);
|
||||
}
|
||||
|
||||
@keyframes material-select-input-animate {
|
||||
0% {
|
||||
background-size: 0% 2px, 100% 2px;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-size: 100% 2px, 100% 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Underbar Select Input
|
||||
category: Select Input
|
||||
markup: |
|
||||
<select class="select-input select-input--underbar">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
|
||||
|
||||
|
||||
<select class="select-input select-input--underbar" disabled>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
*/
|
||||
|
||||
.select-input--underbar {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--select-input-border-color);
|
||||
}
|
||||
|
||||
.select-input--underbar:disabled {
|
||||
@apply(--select-input--disabled);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid var(--select-input-border-color);
|
||||
}
|
||||
|
||||
.select-input--underbar:disabled::placeholder {
|
||||
@apply(--input-placeholder);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.select-input--underbar:invalid {
|
||||
@apply(--select-input--invalid);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid var(--input-invalid-border-color);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
:root {
|
||||
--switch-checked-background-color: var(--switch-highlight-color); /* background color active */
|
||||
--switch-thumb-background-color: white;
|
||||
--switch-thumb-border-color: var(--border-color);
|
||||
--switch-thumb-border-color-active: var(--switch-highlight-color);
|
||||
--switch-height: 32px;
|
||||
--switch-width: 51px;
|
||||
|
||||
--switch: {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@apply(--reset-box-model);
|
||||
@apply(--hide-input-parent);
|
||||
min-width: 51px;
|
||||
}
|
||||
|
||||
--switch__toggle: {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-cursor);
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Switch
|
||||
category: Switch
|
||||
elements: ons-switch
|
||||
markup: |
|
||||
<label class="switch">
|
||||
<input type="checkbox" class="switch__input">
|
||||
<div class="switch__toggle">
|
||||
<div class="switch__handle"></div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" class="switch__input" checked>
|
||||
<div class="switch__toggle">
|
||||
<div class="switch__handle"></div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" class="switch__input" disabled>
|
||||
<div class="switch__toggle">
|
||||
<div class="switch__handle"></div>
|
||||
</div>
|
||||
</label>
|
||||
*/
|
||||
|
||||
.switch {
|
||||
@apply(--switch);
|
||||
font-size: var(--font-size);
|
||||
padding: 0 20px;
|
||||
border: none;
|
||||
overflow: visible;
|
||||
width: var(--switch-width);
|
||||
height: var(--switch-height);
|
||||
z-index: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.switch__input {
|
||||
@apply(--hide-input);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* switch toggle background */
|
||||
.switch__toggle {
|
||||
background-color: var(--switch-background-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 30px;
|
||||
transition-property: all;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: ease-out;
|
||||
box-shadow: inset 0 0 0 2px var(--switch-border-color);
|
||||
}
|
||||
|
||||
/* switch toggle circle */
|
||||
.switch__handle {
|
||||
@apply(--reset-box-model);
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 28px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
background-color: var(--switch-thumb-background-color);
|
||||
left: 1px;
|
||||
top: 2px;
|
||||
transition-property: all;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: cubic-bezier(.59, .01, .5, .99);
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.switch--active__handle {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
:checked + .switch__toggle {
|
||||
box-shadow: inset 0 0 0 2px var(--switch-checked-background-color);
|
||||
background-color: var(--switch-checked-background-color);
|
||||
}
|
||||
|
||||
:checked + .switch__toggle > .switch__handle {
|
||||
left: 21px;
|
||||
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
:disabled + .switch__toggle {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
.switch__touch {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
bottom: -5px;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Switch
|
||||
category: Switch
|
||||
elements: ons-switch
|
||||
markup: |
|
||||
<label class="switch switch--material">
|
||||
<input type="checkbox" class="switch__input switch--material__input">
|
||||
<div class="switch__toggle switch--material__toggle">
|
||||
<div class="switch__handle switch--material__handle">
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="switch switch--material">
|
||||
<input type="checkbox" class="switch__input switch--material__input" checked>
|
||||
<div class="switch__toggle switch--material__toggle">
|
||||
<div class="switch__handle switch--material__handle">
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="switch switch--material">
|
||||
<input type="checkbox" class="switch__input switch--material__input" disabled>
|
||||
<div class="switch__toggle switch--material__toggle">
|
||||
<div class="switch__handle switch--material__handle">
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
*/
|
||||
|
||||
.switch--material {
|
||||
width: 36px;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.switch--material__toggle {
|
||||
background-color: var(--material-switch-inactive-background-color);
|
||||
margin-top: 5px;
|
||||
height: 14px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.switch--material__input {
|
||||
@apply(--hide-input);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.switch--material__handle {
|
||||
background-color: var(--material-switch-inactive-thumb-color);
|
||||
left: 0;
|
||||
margin-top: -5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@apply(--material-shadow-2);
|
||||
}
|
||||
|
||||
:checked + .switch--material__toggle {
|
||||
background-color: var(--material-switch-active-background-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:checked + .switch--material__toggle > .switch--material__handle {
|
||||
left: 16px;
|
||||
background-color: var(--material-switch-active-thumb-color);
|
||||
@apply(--material-shadow-1);
|
||||
}
|
||||
|
||||
:disabled + .switch--material__toggle {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
.switch--material__handle:before {
|
||||
background: transparent;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
|
||||
transition: box-shadow 0.1s linear;
|
||||
}
|
||||
|
||||
.switch--material__toggle > .switch--active__handle:before {
|
||||
box-shadow: 0 0 0 14px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:checked + .switch--material__toggle > .switch--active__handle:before {
|
||||
box-shadow: 0 0 0 14px color(var(--material-switch-active-thumb-color) alpha(20%));
|
||||
}
|
||||
|
||||
.switch--material__touch {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
bottom: -10px;
|
||||
left: -15px;
|
||||
right: -15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,523 @@
|
|||
|
||||
:root {
|
||||
--tabbar-button-color: var(--tabbar-text-color); /* Text color */
|
||||
--tabbar-active-color: var(--tabbar-highlight-text-color); /* Text color active */
|
||||
--material-tabbar-current-color: var(--material-tabbar-highlight-text-color);
|
||||
--tabbar-active-border-top: none;
|
||||
--tabbar-focus-border-top: none;
|
||||
--tabbar-height: 49px;
|
||||
--tabbar-button-line-height: 49px;
|
||||
--tabbar-button-border: none;
|
||||
--tabbar-active-box-shadow: none;
|
||||
--tabbar-button-focus-box-shadow: none;
|
||||
--tabbar-border-top: 1px solid var(--tabbar-border-color);
|
||||
|
||||
--retina-tabbar-top-border: {
|
||||
@media (--retina-query) {
|
||||
border-top: none;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-image: linear-gradient(180deg, var(--tabbar-border-color), var(--tabbar-border-color) 50%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
||||
--retina-tabbar-bottom-border: {
|
||||
@media (--retina-query) {
|
||||
border-bottom: none;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-image: linear-gradient(0deg, var(--tabbar-border-color), var(--tabbar-border-color) 50%, transparent 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Icon Tabbar
|
||||
category: Tabbar
|
||||
elements: ons-tabbar ons-tab
|
||||
markup: |
|
||||
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
|
||||
<div class="tabbar">
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-a" checked="checked">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-stop"></i>
|
||||
<div class="tabbar__label">One</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-a">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-record"></i>
|
||||
<div class="tabbar__label">Two</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-a">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-star"></i>
|
||||
<div class="tabbar__label">Three</div>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Tabbar
|
||||
category: Tabbar
|
||||
elements: ons-tabbar ons-tab
|
||||
markup: |
|
||||
<div class="tabbar">
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-c" checked="checked">
|
||||
<button class="tabbar__button">
|
||||
<div class="tabbar__label">One</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-c">
|
||||
<button class="tabbar__button">
|
||||
<div class="tabbar__label">Two</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-c">
|
||||
<button class="tabbar__button">
|
||||
<div class="tabbar__label">Three</div>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.tabbar {
|
||||
@apply(--reset-font);
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: var(--tabbar-height);
|
||||
background-color: var(--tabbar-background-color);
|
||||
border-top: var(--tabbar-border-top);
|
||||
width: 100%;
|
||||
@apply(--retina-tabbar-top-border);
|
||||
}
|
||||
|
||||
.tabbar__item {
|
||||
@apply(--reset-font);
|
||||
@apply(--hide-input-parent);
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tabbar__item > input {
|
||||
@apply(--hide-input);
|
||||
}
|
||||
|
||||
.tabbar__button {
|
||||
@apply(--reset-font);
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-cursor);
|
||||
@apply(--ellipsis);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
height: var(--tabbar-button-line-height);
|
||||
letter-spacing: 0;
|
||||
color: var(--tabbar-button-color);
|
||||
vertical-align: top;
|
||||
background-color: transparent;
|
||||
border-top: var(--tabbar-button-border);
|
||||
width: 100%;
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--tabbar-button-line-height);
|
||||
@media (--retina-query) {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar__icon {
|
||||
font-size: 24px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 26px;
|
||||
display: block !important; /* stylelint-disable-line declaration-no-important */
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.tabbar__label {
|
||||
@apply(--reset-font);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar__badge.notification {
|
||||
vertical-align: text-bottom;
|
||||
top: -1px;
|
||||
margin-left: 5px;
|
||||
z-index: 10;
|
||||
font-size: 12px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
line-height: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tabbar__icon ~ .tabbar__badge.notification {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.tabbar__icon + .tabbar__label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
.tabbar__label:first-child {
|
||||
font-size: 16px;
|
||||
line-height: var(--tabbar-button-line-height);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:checked + .tabbar__button {
|
||||
color: var(--tabbar-active-color);
|
||||
background-color: transparent;
|
||||
box-shadow: var(--tabbar-active-box-shadow);
|
||||
border-top: var(--tabbar-active-border-top);
|
||||
}
|
||||
|
||||
.tabbar__button:disabled {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
.tabbar__button:focus {
|
||||
z-index: 1;
|
||||
border-top: var(--tabbar-focus-border-top);
|
||||
box-shadow: var(--tabbar-button-focus-box-shadow);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.tabbar__content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: var(--tabbar-height);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tabbar--autogrow .tabbar__item {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Icon Only Tabbar
|
||||
category: Tabbar
|
||||
elements: ons-tabbar ons-tab
|
||||
markup: |
|
||||
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
|
||||
<div class="tabbar">
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-b" checked="checked">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-stop"></i>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-b">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-record"></i>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="tabbar-b">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-star"></i>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Top Tabbar
|
||||
category: Tabbar
|
||||
elements: ons-tabbar ons-tab
|
||||
markup: |
|
||||
<div class="tabbar tabbar--top">
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="top-tabbar-a" checked="checked">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-stop"></i>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="top-tabbar-a">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-record"></i>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item">
|
||||
<input type="radio" name="top-tabbar-a">
|
||||
<button class="tabbar__button">
|
||||
<i class="tabbar__icon ion-star"></i>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.tabbar--top {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
border-top: none;
|
||||
border-bottom: var(--tabbar-border-top);
|
||||
@apply(--retina-tabbar-bottom-border);
|
||||
}
|
||||
|
||||
.tabbar--top__content {
|
||||
top: var(--tabbar-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Bordered Top Tabbar
|
||||
category: Tabbar
|
||||
elements: ons-tabbar ons-tab
|
||||
markup: |
|
||||
<div class="tabbar tabbar--top tabbar--top-border">
|
||||
<label class="tabbar__item tabbar--top-border__item">
|
||||
<input type="radio" name="top-tabbar-b" checked="checked">
|
||||
<button class="tabbar__button tabbar--top-border__button">
|
||||
Home
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--top-border__item">
|
||||
<input type="radio" name="top-tabbar-b">
|
||||
<button class="tabbar__button tabbar--top-border__button">
|
||||
Comments
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--top-border__item">
|
||||
<input type="radio" name="top-tabbar-b">
|
||||
<button class="tabbar__button tabbar--top-border__button">
|
||||
Activity
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Material Tabbar
|
||||
category: Tabbar
|
||||
elements: ons-tabbar ons-tab
|
||||
markup: |
|
||||
<div class="tabbar tabbar--top tabbar--material">
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-a" checked="checked">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
Music
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-a">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
Movies
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-a">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
Books
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-a">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
Games
|
||||
</button>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
*/
|
||||
|
||||
.tabbar--top-border__button {
|
||||
background-color: transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
}
|
||||
|
||||
:checked + .tabbar--top-border__button {
|
||||
background-color: transparent;
|
||||
border-bottom: 4px solid var(--tabbar-active-color);
|
||||
}
|
||||
|
||||
.tabbar__border {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background-color: var(--tabbar-active-color);
|
||||
}
|
||||
|
||||
.tabbar--material {
|
||||
background: none;
|
||||
background-color: var(--material-tabbar-background-color);
|
||||
border-bottom-width: 0;
|
||||
box-shadow:
|
||||
0 4px 2px -2px rgba(0, 0, 0, 0.14),
|
||||
0 3px 5px -2px rgba(0, 0, 0, 0.12),
|
||||
0 5px 1px -4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tabbar--material__button {
|
||||
background-color: transparent;
|
||||
color: var(--material-tabbar-text-color);
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@apply(--material-font);
|
||||
}
|
||||
|
||||
.tabbar--material__button:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
margin-top: -2px;
|
||||
background-color: var(--material-tabbar-current-color);
|
||||
}
|
||||
|
||||
:checked + .tabbar--material__button:after {
|
||||
width: 100%;
|
||||
transition: width 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
:checked + .tabbar--material__button {
|
||||
background-color: transparent;
|
||||
color: var(--material-tabbar-current-color);
|
||||
}
|
||||
|
||||
.tabbar--material__item:not([ripple]):active {
|
||||
background-color: var(--material-tabbar-highlight-color);
|
||||
}
|
||||
|
||||
.tabbar--material__border {
|
||||
height: 2px;
|
||||
background-color: var(--material-tabbar-current-color);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Tabbar (Icon only)
|
||||
category: Tabbar
|
||||
elements: ons-tabbar ons-tab
|
||||
markup: |
|
||||
<div class="tabbar tabbar--top tabbar--material">
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-b" checked="checked">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-b">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-b">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon zmdi zmdi-pin-account"></i>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.tabbar--material__icon {
|
||||
font-size: 22px !important; /* stylelint-disable-line declaration-no-important */
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Tabbar (Icon and Label)
|
||||
category: Tabbar
|
||||
elements: ons-tabbar ons-tab
|
||||
markup: |
|
||||
<div class="tabbar tabbar--top tabbar--material">
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-c" checked="checked">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
|
||||
<div class="tabbar__label tabbar--material__label">Call</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-c">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
|
||||
<div class="tabbar__label tabbar--material__label">Favorites</div>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="tabbar__item tabbar--material__item">
|
||||
<input type="radio" name="tabbar-material-c">
|
||||
<button class="tabbar__button tabbar--material__button">
|
||||
<i class="tabbar__icon tabbar--material__icon zmdi zmdi-delete"></i>
|
||||
<div class="tabbar__label tabbar--material__label">Delete</div>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.tabbar--material__label {
|
||||
@apply(--material-font);
|
||||
}
|
||||
|
||||
.tabbar--material__label:first-child {
|
||||
@apply(--material-font);
|
||||
letter-spacing: 0.015em;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tabbar--material__icon + .tabbar--material__label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
|
||||
:root {
|
||||
--text-input-font-size: 16px;
|
||||
--text-input-height: 31px;
|
||||
--text-input-border-color: var(--input-border-color);
|
||||
--material-text-input-font-size: 16px;
|
||||
--material-text-input-color: var(--material-text-input-text-color);
|
||||
|
||||
--text-input: {
|
||||
@apply(--input);
|
||||
@apply(--transparent);
|
||||
letter-spacing: 0;
|
||||
box-shadow: none;
|
||||
color: var(--input-text-color);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
font-size: var(--text-input-font-size);
|
||||
height: var(--text-input-height);
|
||||
font-weight: var(--font-weight);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--text-input--disabled: {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
--text-input--focus: {
|
||||
}
|
||||
|
||||
--input-placeholder: {
|
||||
@apply(--transparent);
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
--text-input--invalid: {
|
||||
@apply(--transparent);
|
||||
color: var(--input-invalid-text-color);
|
||||
}
|
||||
|
||||
--text-input-underbar-disabled: {
|
||||
@apply(--input-placeholder);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
--text-input--material-placeholder: {
|
||||
color: var(--material-text-input-inactive-color);
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Text Input
|
||||
category: Text Input
|
||||
elements: ons-input
|
||||
markup: |
|
||||
<div><input type="text" class="text-input" placeholder="text" value=""></div>
|
||||
<div><input type="text" class="text-input" placeholder="text" value="" disabled></div>
|
||||
*/
|
||||
|
||||
.text-input {
|
||||
@apply(--text-input);
|
||||
}
|
||||
|
||||
.text-input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text-input:disabled {
|
||||
@apply(--text-input--disabled);
|
||||
}
|
||||
|
||||
.text-input::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
.text-input:disabled::placeholder {
|
||||
@apply(--input-placeholder);
|
||||
}
|
||||
|
||||
.text-input:invalid {
|
||||
@apply(--text-input--invalid);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Underbar Text Input
|
||||
category: Text Input
|
||||
elements: ons-input
|
||||
markup: |
|
||||
<div><input type="text" class="text-input text-input--underbar" placeholder="text" value=""></div>
|
||||
<div><input type="text" class="text-input text-input--underbar" placeholder="text" value="" disabled></div>
|
||||
*/
|
||||
|
||||
.text-input--underbar {
|
||||
@apply(--text-input);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid var(--text-input-border-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.text-input--underbar:disabled {
|
||||
@apply(--text-input--disabled);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid var(--text-input-border-color);
|
||||
}
|
||||
|
||||
.text-input--underbar:disabled::placeholder {
|
||||
@apply(--text-input-underbar-disabled);
|
||||
}
|
||||
|
||||
.text-input--underbar:invalid {
|
||||
@apply(--text-input--invalid);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid var(--input-invalid-border-color);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Input
|
||||
category: Text Input
|
||||
elements: ons-input
|
||||
markup: |
|
||||
<span>
|
||||
<div><input class="text-input text-input--material" placeholder="Username" type="text" required></div>
|
||||
<br />
|
||||
<div><input class="text-input text-input--material" placeholder="Password" type="password" required></div>
|
||||
</span>
|
||||
*/
|
||||
|
||||
.text-input--material {
|
||||
@apply(--input);
|
||||
@apply(--material-font);
|
||||
color: var(--material-text-input-color);
|
||||
background-image: linear-gradient(to top, transparent 1px, var(--material-text-input-inactive-color) 1px);
|
||||
background-size: 100% 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-color: transparent;
|
||||
font-size: var(--material-text-input-font-size);
|
||||
font-weight: 400;
|
||||
border: none;
|
||||
padding-bottom: 2px;
|
||||
border-radius: 0;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
-webkit-transform: translate3d(0, 0, 0); /* FIXME: prevent ios flicker */
|
||||
}
|
||||
|
||||
.text-input--material__label {
|
||||
@apply(--material-font);
|
||||
color: var(--material-text-input-inactive-color);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.text-input--material__label--active {
|
||||
color: var(--material-text-input-active-color);
|
||||
transform: translate(0, -75%) scale(0.75);
|
||||
transform-origin: left top;
|
||||
transition: transform 0.1s ease-in, color 0.1s ease-in;
|
||||
}
|
||||
|
||||
.text-input--material:focus {
|
||||
background-image:
|
||||
linear-gradient(var(--material-text-input-active-color), var(--material-text-input-active-color)),
|
||||
linear-gradient(to top, transparent 1px, var(--material-text-input-inactive-color) 1px);
|
||||
animation: material-text-input-animate 0.3s forwards;
|
||||
}
|
||||
|
||||
.text-input--material::placeholder {
|
||||
@apply(--text-input--material-placeholder);
|
||||
}
|
||||
|
||||
@keyframes material-text-input-animate {
|
||||
0% {
|
||||
background-size: 0% 2px, 100% 2px;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-size: 100% 2px, 100% 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
:root {
|
||||
--textarea-color: var(--input-text-color);
|
||||
--textarea-border: 1px solid var(--input-border-color);
|
||||
--textarea-padding: 5px 5px 5px 5px;
|
||||
--textarea-box-shadow: none;
|
||||
--textarea-border-radius: 4px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Textarea
|
||||
category: Textarea
|
||||
markup: |
|
||||
<textarea class="textarea" rows="3" placeholder="Textarea"></textarea>
|
||||
*/
|
||||
|
||||
.textarea {
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-font);
|
||||
vertical-align: top;
|
||||
resize: none;
|
||||
outline: none;
|
||||
padding: var(--textarea-padding);
|
||||
font-size: var(--text-input-font-size);
|
||||
font-weight: var(--font-weight);
|
||||
border-radius: var(--textarea-border-radius);
|
||||
border: var(--textarea-border);
|
||||
background-color: var(--input-bg-color);
|
||||
color: var(--textarea-color);
|
||||
letter-spacing: 0;
|
||||
box-shadow: var(--textarea-box-shadow);
|
||||
appearance: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.textarea:disabled {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
.textarea::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Textarea Transparent
|
||||
category: Textarea
|
||||
markup: |
|
||||
<textarea class="textarea textarea--transparent" rows="3" placeholder="Textarea"></textarea>
|
||||
*/
|
||||
|
||||
.textarea--transparent {
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-font);
|
||||
vertical-align: top;
|
||||
resize: none;
|
||||
outline: none;
|
||||
padding: var(--textarea-padding);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: var(--text-input-font-size);
|
||||
font-weight: var(--font-weight);
|
||||
border-radius: var(--textarea-border-radius);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--textarea-color);
|
||||
letter-spacing: 0;
|
||||
box-shadow: var(--textarea-box-shadow);
|
||||
appearance: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.textarea--transparent:disabled {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
.textarea--transparent::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
|
||||
:root {
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Toast
|
||||
category: Toast
|
||||
markup: |
|
||||
<div class="toast">
|
||||
<div class="toast__message">Message Message Message Message Message Message</div>
|
||||
<button class="toast__button">ACTION</button>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.toast {
|
||||
@apply(--reset-font);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 0;
|
||||
margin: 8px 0;
|
||||
border-radius: 8px;
|
||||
background-color: var(--toast-background-color);
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.toast__message {
|
||||
font-size: 14px;
|
||||
color: var(--toast-text-color);
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
margin: 0 16px 0 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.toast__button {
|
||||
font-size: 14px;
|
||||
color: var(--toast-button-text-color);
|
||||
flex-grow: 0;
|
||||
appearance: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.toast__button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toast__button:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Toast
|
||||
category: Toast
|
||||
markup: |
|
||||
<div class="toast toast--material">
|
||||
<div class="toast__message toast--material__message">Message Message Message Message Message Message</div>
|
||||
<button class="toast__button toast--material__button">ACTION</button>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.toast--material {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
background-color: var(--material-toast-background-color);
|
||||
border-radius: 0;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.toast--material__message {
|
||||
@apply(--material-font);
|
||||
margin: 0 24px 0 0;
|
||||
}
|
||||
|
||||
.toast--material__button {
|
||||
@apply(--material-font);
|
||||
color: var(--material-toast-button-text-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
|
||||
:root {
|
||||
--toolbar-button-background-color: rgba(0, 0, 0, 0);
|
||||
--toolbar-button-border-color: var(--toolbar-button-color);
|
||||
--toolbar-button-border-radius: 2px;
|
||||
--toolbar-button-padding: 4px 10px;
|
||||
--toolbar-button-active-background-color: var(--toolbar-button-background-color);
|
||||
--toolbar-button-border: 1px solid var(--toolbar-button-border-color);
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Toolbar Button
|
||||
category: Toolbar Button
|
||||
elements: ons-toolbar-button
|
||||
markup: |
|
||||
<!-- Prerequisite=This example use font-awesome(http://fortawesome.github.io/Font-Awesome/) to display icons. -->
|
||||
<button class="toolbar-button">
|
||||
<i class="fa fa-bell" style="font-size:17px"></i>
|
||||
</button>
|
||||
|
||||
<button class="toolbar-button">
|
||||
Label
|
||||
</button>
|
||||
|
||||
<button class="toolbar-button toolbar-button--outline">
|
||||
<i class="fa fa-bell" style="font-size:17px"></i> Label
|
||||
</button>
|
||||
*/
|
||||
|
||||
.toolbar-button {
|
||||
@apply(--reset-font);
|
||||
padding: var(--toolbar-button-padding);
|
||||
letter-spacing: 0;
|
||||
color: var(--toolbar-button-color);
|
||||
background-color: var(--toolbar-button-background-color);
|
||||
border-radius: var(--toolbar-button-border-radius);
|
||||
border: 1px solid transparent;
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.toolbar-button:active {
|
||||
background-color: var(--toolbar-button-active-background-color);
|
||||
transition: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.toolbar-button:disabled,
|
||||
.toolbar-button[disabled] {
|
||||
@apply(--disabled);
|
||||
}
|
||||
|
||||
.toolbar-button:focus {
|
||||
outline: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.toolbar-button--outline {
|
||||
border: var(--toolbar-button-border);
|
||||
margin: auto 8px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Toolbar Button
|
||||
category: Toolbar Button
|
||||
elements: ons-toolbar-button
|
||||
markup: |
|
||||
<!-- Prerequisite=This example use Material Design Iconic Font(http://zavoloklom.github.io/material-design-iconic-font/) to display icons. -->
|
||||
<span class="toolbar-button toolbar-button--material">
|
||||
<i class="zmdi zmdi-menu"></i>
|
||||
</span>
|
||||
<span class="toolbar-button toolbar-button--material">
|
||||
Label
|
||||
</span>
|
||||
<span class="toolbar-button toolbar-button--material">
|
||||
<i class="zmdi zmdi-favorite"></i>
|
||||
</span>
|
||||
*/
|
||||
|
||||
.toolbar-button--material {
|
||||
font-size: 22px;
|
||||
color: var(--material-toolbar-button-color);
|
||||
display: inline-block;
|
||||
padding: 0 12px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
vertical-align: initial;
|
||||
transition: background-color 0.25s linear;
|
||||
}
|
||||
|
||||
.toolbar-button--material:first-of-type {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.toolbar-button--material:last-of-type {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.toolbar-button--material:active {
|
||||
opacity: 1;
|
||||
transition: background-color 0.25s linear;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding-left: 8px;
|
||||
color: var(--toolbar-button-color);
|
||||
background-color: var(--toolbar-button-background-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.back-button:active {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.back-button__label {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
line-height: var(--toolbar-height);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight--large);
|
||||
}
|
||||
|
||||
.back-button__icon {
|
||||
margin-right: 6px;
|
||||
display: inline-flex;
|
||||
fill: var(--toolbar-button-color);
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.back-button--material {
|
||||
font-size: 22px;
|
||||
color: var(--material-toolbar-button-color);
|
||||
display: inline-block;
|
||||
padding: 0 12px;
|
||||
height: 100%;
|
||||
margin: 0 0 0 4px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
vertical-align: initial;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.back-button--material__label {
|
||||
display: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.back-button--material__icon {
|
||||
display: inline-flex;
|
||||
fill: var(--material-toolbar-button-color);
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.back-button--material:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,385 @@
|
|||
|
||||
:root {
|
||||
--toolbar-separator-color: var(--toolbar-border-color);
|
||||
--toolbar-color: var(--toolbar-text-color);
|
||||
|
||||
--toolbar-height: 44px;
|
||||
--toolbar-box-shadow: none;
|
||||
--toolbar-padding: 0;
|
||||
--toolbar-separator: 1px solid var(--toolbar-separator-color);
|
||||
--toolbar-material-height: 56px;
|
||||
--material-toolbar-color: var(--material-toolbar-text-color);
|
||||
|
||||
--retina-toolbar-top-border: {
|
||||
border-top: none;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-image: linear-gradient(180deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 100%);
|
||||
|
||||
@media (--retina-query) {
|
||||
background-image: linear-gradient(180deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 50%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
||||
--retina-toolbar-bottom-border: {
|
||||
border-bottom: none;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-image: linear-gradient(0deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 100%);
|
||||
|
||||
@media (--retina-query) {
|
||||
background-image: linear-gradient(0deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 50%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
||||
--toolbar: {
|
||||
@apply(--reset-font);
|
||||
@apply(--reset-container);
|
||||
@apply(--reset-base);
|
||||
@apply(--reset-cursor);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
--toolbar__item: {
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-base);
|
||||
}
|
||||
|
||||
--toolbar--material-font: {
|
||||
@apply(--material-font);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--material-toolbar-color);
|
||||
}
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Toolbar
|
||||
category: Toolbar
|
||||
elements: ons-toolbar
|
||||
markup: |
|
||||
<div class="toolbar">
|
||||
<div class="toolbar__center">Navigation Bar</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.toolbar {
|
||||
@apply(--toolbar);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: nowrap;
|
||||
height: var(--toolbar-height);
|
||||
padding-left: var(--toolbar-padding);
|
||||
padding-right: var(--toolbar-padding);
|
||||
background: var(--toolbar-background-color);
|
||||
color: var(--toolbar-color);
|
||||
box-shadow: var(--toolbar-box-shadow);
|
||||
font-weight: var(--font-weight);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
@apply(--retina-toolbar-bottom-border);
|
||||
}
|
||||
|
||||
.toolbar__bg {
|
||||
background: var(--toolbar-background-color);
|
||||
}
|
||||
|
||||
.toolbar__item {
|
||||
@apply(--toolbar__item);
|
||||
height: var(--toolbar-height);
|
||||
overflow: visible;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toolbar__left {
|
||||
@apply(--toolbar__item);
|
||||
max-width: 50%;
|
||||
width: 27%;
|
||||
text-align: left;
|
||||
line-height: var(--toolbar-height);
|
||||
}
|
||||
|
||||
.toolbar__right {
|
||||
@apply(--toolbar__item);
|
||||
max-width: 50%;
|
||||
width: 27%;
|
||||
text-align: right;
|
||||
line-height: var(--toolbar-height);
|
||||
}
|
||||
|
||||
.toolbar__center {
|
||||
@apply(--toolbar__item);
|
||||
width: 46%;
|
||||
text-align: center;
|
||||
line-height: var(--toolbar-height);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight--large);
|
||||
color: var(--toolbar-color);
|
||||
}
|
||||
|
||||
.toolbar__title {
|
||||
line-height: var(--toolbar-height);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight--large);
|
||||
color: var(--toolbar-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.toolbar__center:first-child:last-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Toolbar Item
|
||||
category: Toolbar
|
||||
elements: ons-toolbar ons-toolbar-button
|
||||
markup: |
|
||||
<div class="toolbar">
|
||||
<div class="toolbar__left">
|
||||
<span class="toolbar-button">
|
||||
<i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="toolbar__center">
|
||||
Navigation Bar
|
||||
</div>
|
||||
|
||||
<div class="toolbar__right">
|
||||
<span class="toolbar-button">Label</span>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Toolbar with Outline Button
|
||||
category: Toolbar
|
||||
elements: ons-toolbar ons-toolbar-button
|
||||
markup: |
|
||||
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
|
||||
<div class="toolbar">
|
||||
<div class="toolbar__left">
|
||||
<span class="toolbar-button toolbar-button--outline">
|
||||
<i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="toolbar__center">
|
||||
Title
|
||||
</div>
|
||||
|
||||
<div class="toolbar__right">
|
||||
<span class="toolbar-button toolbar-button--outline">Button</span>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Bottom Bar
|
||||
category: Toolbar
|
||||
elements: ons-bottom-toolbar
|
||||
markup: |
|
||||
<div class="bottom-bar">
|
||||
<div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.bottom-bar {
|
||||
@apply(--toolbar);
|
||||
display: block;
|
||||
height: var(--toolbar-height);
|
||||
padding-left: var(--toolbar-padding);
|
||||
padding-right: var(--toolbar-padding);
|
||||
background: var(--toolbar-background-color);
|
||||
color: var(--toolbar-color);
|
||||
box-shadow: var(--toolbar-box-shadow);
|
||||
font-weight: var(--font-weight);
|
||||
border-bottom: none;
|
||||
border-top: var(--toolbar-separator);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
@apply(--retina-toolbar-top-border);
|
||||
}
|
||||
|
||||
.bottom-bar__line-height {
|
||||
line-height: var(--toolbar-height);
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.bottom-bar--aligned {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
line-height: var(--toolbar-height);
|
||||
}
|
||||
|
||||
.bottom-bar--transparent {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Toolbar with Segment
|
||||
category: Toolbar
|
||||
elements: ons-toolbar
|
||||
markup: |
|
||||
<div class="toolbar">
|
||||
<div class="toolbar__center">
|
||||
<div class="segment" style="width:200px;margin:7px 50px;">
|
||||
<div class="segment__item">
|
||||
<input type="radio" class="segment__input" name="navi-segment-a" checked>
|
||||
<div class="segment__button">One</div>
|
||||
</div>
|
||||
|
||||
<div class="segment__item">
|
||||
<input type="radio" class="segment__input" name="navi-segment-a">
|
||||
<div class="segment__button">Two</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Material Toolbar
|
||||
category: Toolbar
|
||||
elements: ons-toolbar
|
||||
markup: |
|
||||
<div class="toolbar toolbar--material">
|
||||
<div class="toolbar__center toolbar--material__center">
|
||||
Title
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.toolbar--material {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
height: var(--toolbar-material-height);
|
||||
border-bottom: 0;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
|
||||
padding: 0;
|
||||
background-color: var(--material-toolbar-background-color);
|
||||
background-size: 0;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: No Shadow Toolbar
|
||||
category: Toolbar
|
||||
elements: ons-toolbar
|
||||
markup: |
|
||||
<div class="toolbar toolbar--noshadow">
|
||||
<div class="toolbar__left">
|
||||
<span class="toolbar-button">
|
||||
<i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="toolbar__center">
|
||||
Navigation Bar
|
||||
</div>
|
||||
<div class="toolbar__right">
|
||||
<span class="toolbar-button">Label</span>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.toolbar--noshadow {
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.toolbar--material__left, .toolbar--material__right {
|
||||
@apply(--toolbar--material-font);
|
||||
height: var(--toolbar-material-height);
|
||||
min-width: 72px;
|
||||
width: auto;
|
||||
line-height: var(--toolbar-material-height);
|
||||
}
|
||||
|
||||
.toolbar--material__center {
|
||||
@apply(--toolbar--material-font);
|
||||
height: var(--toolbar-material-height);
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
line-height: var(--toolbar-material-height);
|
||||
}
|
||||
|
||||
.toolbar--material__center:first-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.toolbar--material__center:last-child {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.toolbar--material__left:empty, .toolbar--material__right:empty {
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
/*~
|
||||
name: Material Toolbar with Icons
|
||||
category: Toolbar
|
||||
elements: ons-toolbar
|
||||
markup: |
|
||||
<div class="toolbar toolbar--material">
|
||||
<div class="toolbar__left toolbar--material__left">
|
||||
<span class="toolbar-button toolbar-button--material">
|
||||
<i class="zmdi zmdi-menu"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="toolbar__center toolbar--material__center">
|
||||
Title
|
||||
</div>
|
||||
<div class="toolbar__right toolbar--material__right">
|
||||
<span class="toolbar-button toolbar-button--material">
|
||||
<i class="zmdi zmdi-search"></i>
|
||||
</span>
|
||||
<span class="toolbar-button toolbar-button--material">
|
||||
<i class="zmdi zmdi-favorite"></i>
|
||||
</span>
|
||||
<span class="toolbar-button toolbar-button--material">
|
||||
<i class="zmdi zmdi-more-vert"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*~
|
||||
name: Transparent Toolbar
|
||||
category: Toolbar
|
||||
elements: ons-toolbar
|
||||
markup: |
|
||||
<div class="toolbar toolbar--transparent">
|
||||
<div class="toolbar__left">
|
||||
<span class="toolbar-button">
|
||||
<i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="toolbar__center">
|
||||
Navigation Bar
|
||||
</div>
|
||||
<div class="toolbar__right">
|
||||
<span class="toolbar-button">Label</span>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.toolbar--transparent {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
|
||||
:root {
|
||||
--reset-font: {
|
||||
font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
--reset-box-model: {
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
--reset-base: {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
--reset-input: {
|
||||
@apply(--reset-box-model);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
vertical-align: top;
|
||||
outline: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
--hide-input: {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
vertical-align: top;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
--hide-input-parent: {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
--reset-cursor: {
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
--reset-overflow: {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
--reset-container: {
|
||||
@apply(--reset-box-model);
|
||||
@apply(--reset-overflow);
|
||||
word-spacing: 0;
|
||||
}
|
||||
|
||||
--ellipsis: {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
--disabled: {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
--input: {
|
||||
@apply(--reset-input);
|
||||
@apply(--reset-font);
|
||||
}
|
||||
|
||||
--transparent: {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@custom-media --retina-query (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx);
|
||||
|
||||
--material-font: {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: var(--material-font-weight);
|
||||
}
|
||||
|
||||
--material-shadow-0: {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
--material-shadow-1: {
|
||||
box-shadow:
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
--material-shadow-2: {
|
||||
box-shadow:
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
--material-shadow-3: {
|
||||
box-shadow:
|
||||
0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 5px -1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
--material-shadow-4: {
|
||||
box-shadow:
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
--material-shadow-5: {
|
||||
box-shadow:
|
||||
0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
||||
0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
--checkmark: {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 4px;
|
||||
opacity: 0;
|
||||
width: 11px;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
border: 2px solid var(--highlight-color);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
@import url('./license.css');
|
||||
@import url('./dark-theme.css');
|
||||
@import url('./components/index.css');
|
||||
@import url('./iphonex-support/index.css');
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
|
||||
:root {
|
||||
/* variables for iOS components */
|
||||
--background-color: #0d0d0d;
|
||||
--text-color: #fff;
|
||||
--sub-text-color: #999;
|
||||
--highlight-color: #ffa101;
|
||||
--second-highlight-color: #da5926;
|
||||
--border-color: #242424;
|
||||
--button-background-color: var(--highlight-color);
|
||||
--button-cta-background-color: var(--second-highlight-color);
|
||||
--button-light-color: white;
|
||||
--toolbar-background-color: #181818;
|
||||
--toolbar-button-color: var(--highlight-color);
|
||||
--toolbar-text-color: #fff;
|
||||
--toolbar-border-color: #242424;
|
||||
--button-bar-color: var(--highlight-color);
|
||||
--button-bar-active-text-color: #fff;
|
||||
--button-bar-active-background-color: color(var(--button-bar-color) b(80%));
|
||||
--segment-color: var(--highlight-color);
|
||||
--segment-active-text-color: #fff;
|
||||
--segment-active-background-color: color(var(--segment-color) b(80%));
|
||||
--list-background-color: #181818;
|
||||
--list-header-background-color: #111;
|
||||
--list-tap-active-background-color: #262626;
|
||||
--list-item-chevron-color: #383833;
|
||||
--progress-bar-color: var(--highlight-color);
|
||||
--progress-bar-secondary-color: color(var(--progress-bar-color) b(55%));
|
||||
--progress-bar-background-color: transparent;
|
||||
--progress-circle-primary-color: var(--progress-bar-color);
|
||||
--progress-circle-secondary-color: color(var(--progress-bar-secondary-color) b(55%));
|
||||
--progress-circle-background-color: transparent;
|
||||
--tabbar-background-color: #212121;
|
||||
--tabbar-text-color: #aaa;
|
||||
--tabbar-highlight-text-color: var(--highlight-color);
|
||||
--tabbar-border-color: #0d0d0d;
|
||||
--switch-highlight-color: #44db5e;
|
||||
--switch-border-color: #666;
|
||||
--switch-background-color: var(--background-color);
|
||||
--range-track-background-color: #6b6f74;
|
||||
--range-track-background-color-active: #bbb;
|
||||
--range-thumb-background-color: #fff;
|
||||
--modal-background-color: color(black a(70%));
|
||||
--modal-text-color: #fff;
|
||||
--alert-dialog-background-color: #f4f4f4;
|
||||
--alert-dialog-text-color: #1f1f21;
|
||||
--alert-dialog-button-color: var(--highlight-color);
|
||||
--alert-dialog-separator-color: #ddd;
|
||||
--dialog-background-color: #0d0d0d;
|
||||
--dialog-text-color: #1f1f21;
|
||||
--popover-background-color: #242424;
|
||||
--popover-text-color: var(--text-color);
|
||||
--action-sheet-title-color: #8f8e94;
|
||||
--action-sheet-button-separator-color: rgba(0, 0, 0, 0.1);
|
||||
--action-sheet-button-color: var(--highlight-color);
|
||||
--action-sheet-button-destructive-color: #fe3824;
|
||||
--action-sheet-button-background-color: rgba(255, 255, 255, 0.9);
|
||||
--action-sheet-button-active-background-color: #e9e9e9;
|
||||
--action-sheet-cancel-button-background-color: #fff;
|
||||
--notification-background-color: #fe3824;
|
||||
--notification-color: white;
|
||||
--search-input-background-color: color(white a(9%));
|
||||
--fab-text-color: #ffffff;
|
||||
--fab-background-color: var(--highlight-color);
|
||||
--fab-active-background-color: color(var(--fab-background-color) a(70%));
|
||||
--card-background-color: var(--border-color);
|
||||
--card-text-color: var(--text-color);
|
||||
--toast-background-color: #ccc;
|
||||
--toast-text-color: #000;
|
||||
--toast-button-text-color: #000;
|
||||
--select-input-color: var(--text-color);
|
||||
--select-input-border-color: var(--border-color);
|
||||
|
||||
/* variables for Material Design components */
|
||||
--material-background-color: #303030;
|
||||
--material-text-color: #ffffff;
|
||||
--material-notification-background-color: #f50057;
|
||||
--material-notification-color: white;
|
||||
--material-switch-active-thumb-color: #ffc107;
|
||||
--material-switch-active-background-color: color(var(--material-switch-active-thumb-color) a(50%));
|
||||
--material-switch-inactive-thumb-color: #bdbdbd;
|
||||
--material-switch-inactive-background-color: color(white a(30%));
|
||||
--material-range-track-color: #525252;
|
||||
--material-range-thumb-color: #cecec5;
|
||||
--material-range-disabled-thumb-color: #4f4f4f;
|
||||
--material-range-disabled-thumb-border-color: #303030;
|
||||
--material-range-zero-thumb-color: #0d0d0d;
|
||||
--material-toolbar-background-color: #212121;
|
||||
--material-toolbar-text-color: #ffffff;
|
||||
--material-toolbar-button-color: var(--toolbar-button-color);
|
||||
--material-segment-background-color: #292929;
|
||||
--material-segment-active-background-color: #404040;
|
||||
--material-segment-text-color: color(#fff a(62%));
|
||||
--material-segment-active-text-color: #cacaca;
|
||||
--material-button-background-color: #d68600;
|
||||
--material-button-text-color: #ffffff;
|
||||
--material-button-disabled-background-color: color(#b0b0b0 a(74%));
|
||||
--material-button-disabled-color: color(white a(74%));
|
||||
--material-flat-button-active-background-color: color(#666666 a(20%));
|
||||
--material-list-background-color: color(var(--material-background-color) l(+2%));
|
||||
--material-list-item-separator-color: color(white a(12%));
|
||||
--material-list-header-text-color: #8a8a8a;
|
||||
--material-checkbox-active-color: #fff;
|
||||
--material-checkbox-inactive-color: #717171;
|
||||
--material-checkbox-checkmark-color: #000;
|
||||
--material-radio-button-active-color: #ffa101;
|
||||
--material-radio-button-inactive-color: #8e8e8e;
|
||||
--material-radio-button-disabled-color: #505050;
|
||||
--material-text-input-text-color: color(#fff a(75%));
|
||||
--material-text-input-active-color: color(#fff a(75%));
|
||||
--material-text-input-inactive-color: color(#fff a(30%));
|
||||
--material-search-background-color: #424242;
|
||||
--material-dialog-background-color: #424242;
|
||||
--material-dialog-text-color: var(--material-text-color);
|
||||
--material-alert-dialog-background-color: #424242;
|
||||
--material-alert-dialog-title-color: white;
|
||||
--material-alert-dialog-content-color: color(var(--material-alert-dialog-title-color) a(85%));
|
||||
--material-alert-dialog-button-color: #d68600;
|
||||
--material-progress-bar-primary-color: #d68600;
|
||||
--material-progress-bar-secondary-color: color(var(--material-progress-bar-primary-color) b(55%));
|
||||
--material-progress-bar-background-color: transparent;
|
||||
--material-progress-circle-primary-color: var(--material-progress-bar-primary-color);
|
||||
--material-progress-circle-secondary-color: var(--material-progress-bar-secondary-color);
|
||||
--material-progress-circle-background-color: transparent;
|
||||
--material-tabbar-background-color: var(--material-toolbar-background-color);
|
||||
--material-tabbar-text-color: color(var(--material-toolbar-text-color) a(50%));
|
||||
--material-tabbar-highlight-text-color: var(--material-toolbar-text-color);
|
||||
--material-tabbar-highlight-color: color(var(--material-toolbar-background-color) l(+3%));
|
||||
--material-fab-text-color: #31313a;
|
||||
--material-fab-background-color: #ffffff;
|
||||
--material-fab-active-background-color: color(white a(75%));
|
||||
--material-card-background-color: #424242;
|
||||
--material-card-text-color: color(white a(46%));
|
||||
--material-toast-background-color: #ccc;
|
||||
--material-toast-text-color: #000;
|
||||
--material-toast-button-text-color: #583905;
|
||||
--material-select-input-color: var(--material-text-color);
|
||||
--material-select-input-active-color: color(white a(85%));
|
||||
--material-select-input-inactive-color: color(white a(19%));
|
||||
--material-select-border-color: color(white a(88%));
|
||||
--material-popover-background-color: var(--material-alert-dialog-background-color);
|
||||
--material-popover-text-color: var(--material-text-color);
|
||||
--material-action-sheet-text-color: #686868;
|
||||
|
||||
/* others */
|
||||
--tap-highlight-color: transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="android-search-input-icon" fill-rule="nonzero" fill="#898989">
|
||||
<g id="components">
|
||||
<g id="material-search">
|
||||
<g id="search">
|
||||
<g id="Material/Icons-black/search">
|
||||
<path d="M12.502,6.491 L11.708,6.491 L11.432,6.765 C12.407,7.902 13,9.376 13,10.991 C13,14.581 10.09,17.491 6.5,17.491 C2.91,17.491 0,14.581 0,10.991 C0,7.401 2.91,4.491 6.5,4.491 C8.115,4.491 9.588,5.083 10.725,6.057 L11.001,5.783 L11.001,4.991 L15.999,0 L17.49,1.491 L12.502,6.491 L12.502,6.491 Z M6.5,6.491 C4.014,6.491 2,8.505 2,10.991 C2,13.476 4.014,15.491 6.5,15.491 C8.985,15.491 11,13.476 11,10.991 C11,8.505 8.985,6.491 6.5,6.491 L6.5,6.491 Z" id="Shape" transform="translate(8.745000, 8.745500) scale(-1, 1) rotate(-180.000000) translate(-8.745000, -8.745500) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="13px" height="14px" viewBox="0 0 13 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>ios-search-input-icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ios-search-input" transform="translate(-48.000000, -43.000000)" fill="#7A797B">
|
||||
<g id="Group" transform="translate(40.000000, 36.000000)">
|
||||
<path d="M16.9972482,15.5041466 C17.0773657,15.5405938 17.1522731,15.5916129 17.2177516,15.6570914 L20.649991,19.0893308 C20.9448449,19.3841847 20.9484764,19.858606 20.6535412,20.1535412 C20.360648,20.4464344 19.8812716,20.4419317 19.5893308,20.149991 L16.1570914,16.7177516 C16.09137,16.6520301 16.0401171,16.5773874 16.0034141,16.4977995 C15.1671694,17.1270411 14.1271393,17.5 13,17.5 C10.2385763,17.5 8,15.2614237 8,12.5 C8,9.73857625 10.2385763,7.5 13,7.5 C15.7614237,7.5 18,9.73857625 18,12.5 C18,13.6274685 17.6268232,14.6677768 16.9972482,15.5041466 Z M13,16.5 C15.209139,16.5 17,14.709139 17,12.5 C17,10.290861 15.209139,8.5 13,8.5 C10.790861,8.5 9,10.290861 9,12.5 C9,14.709139 10.790861,16.5 13,16.5 Z" id="ios-search-input-icon"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="5px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>select-allow</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="select" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ios-select" transform="translate(-198.000000, -114.000000)" fill="#757575">
|
||||
<g id="menu-bar-+-open-menu" transform="translate(123.000000, 100.000000)">
|
||||
<g id="menu-bar">
|
||||
<polygon id="select-allow" points="75 14 80 19 85 14"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 800 B |
|
|
@ -0,0 +1,14 @@
|
|||
@media (orientation: portrait) {
|
||||
html[onsflag-iphonex-portrait] .action-sheet {
|
||||
bottom: calc(var(--iphonex-safe-area-inset-bottom-portrait) + 14px); /* bottom safe area + 14 pt (extra bottom margin) */
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
html[onsflag-iphonex-landscape] .action-sheet {
|
||||
/* The width in landscape mode is the same as the width in portrait mode */
|
||||
left: calc((100vw - (100vh + 20px)) / 2);
|
||||
right: calc((100vw - (100vh + 20px)) / 2);
|
||||
bottom: calc(var(--iphonex-safe-area-inset-bottom-landscape) + 12px); /* bottom safe area + 12 pt (extra bottom margin) */
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
/*
|
||||
Note:
|
||||
|
||||
:not(X) does not work if X is a complex selector like `.foo .bar` due to the spec of :not(X).
|
||||
Instead we have to use the following form for representing A:not(X A):not(Y A):not(Z A),
|
||||
which means `A which does not have any X, Y and Z as its ancestors`.
|
||||
|
||||
// Equivalent to A:not(X A):not(Y A):not(Z A) { foo: bar; }
|
||||
A {
|
||||
// Apply styles for A
|
||||
foo: bar;
|
||||
}
|
||||
X A,
|
||||
Y A,
|
||||
Z A {
|
||||
// Subtract `X A`, `Y A` and `Z A`
|
||||
// (Restore original styles of A)
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
Note:
|
||||
|
||||
@apply has been deprecated as of Oct, 2017.
|
||||
Please do not use @apply to restore original styles.
|
||||
*/
|
||||
|
||||
/* Bars and page contents */
|
||||
@media (orientation: portrait) {
|
||||
/* Outermost toolbar */
|
||||
html[onsflag-iphonex-portrait] .toolbar {
|
||||
top: 0;
|
||||
box-sizing: content-box;
|
||||
padding-top: var(--iphonex-safe-area-inset-top-portrait);
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .toolbar, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar, /* if wrapped with a page with a toolbar */
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar { /* if wrapped with a top tabbar */
|
||||
/* Restore original styles */
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Outermost bottom-bar */
|
||||
html[onsflag-iphonex-portrait] .bottom-bar {
|
||||
bottom: 0;
|
||||
box-sizing: content-box;
|
||||
padding-bottom: var(--iphonex-safe-area-inset-bottom-portrait);
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .bottom-bar, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */
|
||||
/* Restore original styles */
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Outermost page__content without toolbars or bottom-bars */
|
||||
html[onsflag-iphonex-portrait] .page__content {
|
||||
top: 0;
|
||||
padding-top: var(--iphonex-safe-area-inset-top-portrait);
|
||||
bottom: 0;
|
||||
padding-bottom: var(--iphonex-safe-area-inset-bottom-portrait);
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .page__content, /* if wrapped with a page with a toolbar */
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content .page__content, /* if wrapped with a top tabbar */
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if the page has a toolbar */
|
||||
/* Restore original styles */
|
||||
top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */
|
||||
html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */
|
||||
/* Restore original styles */
|
||||
bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Outermost page__content with a toolbar */
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background,
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content {
|
||||
top: calc(var(--iphonex-safe-area-inset-top-portrait) + var(--toolbar-height));
|
||||
padding-top: 0;
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background,
|
||||
html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with dialogs */
|
||||
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background,
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with a page with a toolbar */
|
||||
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background,
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if wrapped with a top tabbar */
|
||||
/* Restore original styles */
|
||||
top: var(--toolbar-height);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Outermost page__content with a bottom-bar */
|
||||
html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content {
|
||||
bottom: calc(var(--iphonex-safe-area-inset-bottom-portrait) + var(--toolbar-height));
|
||||
padding-bottom: 0;
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */
|
||||
/* Restore original styles */
|
||||
bottom: var(--toolbar-height);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Outermost page__content with a transparent cover-content toolbar and its direct descendant page_content */
|
||||
html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
|
||||
html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
|
||||
top: 0;
|
||||
padding-top: calc(var(--iphonex-safe-area-inset-top-portrait) + var(--toolbar-height));
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content,
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with a page with a toolbar */
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page__content,
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content { /* if wrapped with a top tabbar */
|
||||
/* Restore original styles */
|
||||
top: 0;
|
||||
padding-top: var(--toolbar-height);
|
||||
}
|
||||
|
||||
/* Outermost top tabbar */
|
||||
html[onsflag-iphonex-portrait] .tabbar--top {
|
||||
padding-top: var(--iphonex-safe-area-inset-top-portrait);
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .tabbar--top, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top, /* if wrapped with a page with a toolbar */
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top { /* if wrapped with a top tabbar */
|
||||
/* Restore original styles */
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Outermost tabbar--top__content */
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content {
|
||||
top: calc(var(--iphonex-safe-area-inset-top-portrait) + var(--tabbar-height));
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .tabbar--top__content, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top__content, /* if wrapped with a page with a toolbar */
|
||||
html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top__content { /* if wrapped with a top tabbar */
|
||||
/* Restore original styles */
|
||||
top: var(--tabbar-height);
|
||||
}
|
||||
|
||||
/* Outermost bottom tabbar */
|
||||
html[onsflag-iphonex-portrait] .tabbar:not(.tabbar--top):not(.tabbar--top) {
|
||||
padding-bottom: var(--iphonex-safe-area-inset-bottom-portrait);
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .tabbar:not(.tabbar--top):not(.tabbar--top), /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */
|
||||
/* Restore original styles */
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Outermost.tabbar__content:not(.tabbar--top__content) */
|
||||
html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) {
|
||||
bottom: calc(var(--iphonex-safe-area-inset-bottom-portrait) + var(--tabbar-height));
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-portrait] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */
|
||||
/* Restore original styles */
|
||||
bottom: var(--tabbar-height);
|
||||
}
|
||||
}
|
||||
@media (orientation: landscape) {
|
||||
/* Outermost bottom-bar */
|
||||
html[onsflag-iphonex-landscape] .bottom-bar {
|
||||
bottom: 0;
|
||||
box-sizing: content-box;
|
||||
padding-bottom: var(--iphonex-safe-area-inset-bottom-landscape);
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-landscape] .dialog .bottom-bar, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */
|
||||
/* Restore original styles */
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Outermost page__content without bottom-bars */
|
||||
html[onsflag-iphonex-landscape] .page__content {
|
||||
bottom: 0;
|
||||
padding-bottom: var(--iphonex-safe-area-inset-bottom-landscape);
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */
|
||||
html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */
|
||||
/* Restore original styles */
|
||||
bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Outermost page__content with a bottom-bar */
|
||||
html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content {
|
||||
bottom: calc(var(--iphonex-safe-area-inset-bottom-landscape) + var(--toolbar-height));
|
||||
padding-bottom: 0;
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-landscape] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */
|
||||
/* Restore original styles */
|
||||
bottom: var(--toolbar-height);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Outermost bottom tabbar */
|
||||
html[onsflag-iphonex-landscape] .tabbar:not(.tabbar--top) {
|
||||
padding-bottom: var(--iphonex-safe-area-inset-bottom-landscape);
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-landscape] .dialog .tabbar:not(.tabbar--top), /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */
|
||||
/* Restore original styles */
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Outermost.tabbar__content:not(.tabbar--top__content) */
|
||||
html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) {
|
||||
bottom: calc(var(--iphonex-safe-area-inset-bottom-landscape) + var(--tabbar-height));
|
||||
}
|
||||
/* Non-outermost */
|
||||
html[onsflag-iphonex-landscape] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */
|
||||
html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */
|
||||
html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */
|
||||
/* Restore original styles */
|
||||
bottom: var(--tabbar-height);
|
||||
}
|
||||
}
|
||||
|
||||
/* Lists in .page__content */
|
||||
@media (orientation: landscape) {
|
||||
/* Only patching lists just under .page__content */
|
||||
html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) {
|
||||
margin-left: calc(- var(--iphonex-safe-area-inset-left-landscape));
|
||||
margin-right: calc(- var(--iphonex-safe-area-inset-right-landscape));
|
||||
}
|
||||
|
||||
/* For left safe area */
|
||||
html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-header {
|
||||
padding-left: calc(var(--iphonex-safe-area-inset-left-landscape) + 15px);
|
||||
}
|
||||
html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item {
|
||||
/* margin-left is not suitable for iPhone X patch. Using padding-left here. */
|
||||
padding-left: calc(var(--iphonex-safe-area-inset-left-landscape) + 14px);
|
||||
}
|
||||
|
||||
/* For right safe area */
|
||||
html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item--chevron:before {
|
||||
right: calc(var(--iphonex-safe-area-inset-right-landscape) + 16px);
|
||||
}
|
||||
html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
|
||||
padding-right: calc(var(--iphonex-safe-area-inset-right-landscape) + 6px);
|
||||
}
|
||||
html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
|
||||
padding-right: calc(var(--iphonex-safe-area-inset-right-landscape) + 12px);
|
||||
}
|
||||
html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
|
||||
padding-right: calc(var(--iphonex-safe-area-inset-right-landscape) + 30px);
|
||||
}
|
||||
}
|
||||
/* Lists in .page__content in dialogs and modals */
|
||||
@media (orientation: landscape) {
|
||||
/* Only patching lists just under .page__content */
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* For left safe area */
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-header {
|
||||
padding-left: 15px;
|
||||
}
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
/* For right safe area */
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item--chevron:before {
|
||||
right: 16px;
|
||||
}
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
|
||||
padding-right: 6px;
|
||||
}
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
|
||||
padding-right: 12px;
|
||||
}
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
@media (orientation: portrait) {
|
||||
/* For top safe area */
|
||||
html[onsflag-iphonex-portrait] .fab--top__left,
|
||||
html[onsflag-iphonex-portrait] .fab--top__center,
|
||||
html[onsflag-iphonex-portrait] .fab--top__right {
|
||||
top: calc(var(--iphonex-safe-area-inset-top-portrait) + 20px);
|
||||
}
|
||||
|
||||
/* For bottom safe area */
|
||||
html[onsflag-iphonex-portrait] .fab--bottom__left,
|
||||
html[onsflag-iphonex-portrait] .fab--bottom__center,
|
||||
html[onsflag-iphonex-portrait] .fab--bottom__right {
|
||||
bottom: calc(var(--iphonex-safe-area-inset-bottom-portrait)); /* Omit 20px space */
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
/* For bottom safe area */
|
||||
html[onsflag-iphonex-landscape] .fab--bottom__left,
|
||||
html[onsflag-iphonex-landscape] .fab--bottom__center,
|
||||
html[onsflag-iphonex-landscape] .fab--bottom__right {
|
||||
bottom: calc(var(--iphonex-safe-area-inset-bottom-landscape)); /* Omit 20px space */
|
||||
}
|
||||
|
||||
/* For left safe area */
|
||||
html[onsflag-iphonex-landscape] .fab--top__left,
|
||||
html[onsflag-iphonex-landscape] .fab--bottom__left {
|
||||
left: calc(var(--iphonex-safe-area-inset-left-landscape)); /* Omit 20px space */
|
||||
}
|
||||
|
||||
/* For right safe area */
|
||||
html[onsflag-iphonex-landscape] .fab--top__right,
|
||||
html[onsflag-iphonex-landscape] .fab--bottom__right {
|
||||
right: calc(var(--iphonex-safe-area-inset-right-landscape)); /* Omit 20px space */
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
:root {
|
||||
--iphonex-safe-area-inset-top-portrait: 44px;
|
||||
--iphonex-safe-area-inset-right-portrait: 0;
|
||||
--iphonex-safe-area-inset-bottom-portrait: 34px;
|
||||
--iphonex-safe-area-inset-left-portrait: 0;
|
||||
|
||||
--iphonex-safe-area-inset-top-landscape: 0;
|
||||
--iphonex-safe-area-inset-right-landscape: 44px;
|
||||
--iphonex-safe-area-inset-bottom-landscape: 21px;
|
||||
--iphonex-safe-area-inset-left-landscape: 44px;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
@import './global.css';
|
||||
/* @import './util.css'; */
|
||||
@import './page.css';
|
||||
/* @import './switch.css'; */
|
||||
/* @import './range.css'; */
|
||||
/* @import './notification.css'; */
|
||||
@import './toolbar.css';
|
||||
/* @import './button.css'; */
|
||||
/* @import './button-bar.css'; */
|
||||
/* @import './segment.css'; */
|
||||
@import './tabbar.css';
|
||||
/* @import './toolbar-button.css'; */
|
||||
/* @import './checkbox.css'; */
|
||||
/* @import './radio-button.css'; */
|
||||
/* @import './list.css'; */
|
||||
/* @import './search-input.css'; */
|
||||
/* @import './text-input.css'; */
|
||||
/* @import './textarea.css'; */
|
||||
/* @import './dialog.css'; */
|
||||
/* @import './alert-dialog.css'; */
|
||||
/* @import './popover.css'; */
|
||||
/* @import './progress-bar.css'; */
|
||||
/* @import './progress-circular.css'; */
|
||||
@import './fab.css';
|
||||
/* @import './modal.css'; */
|
||||
/* @import './select.css'; */
|
||||
@import './action-sheet.css';
|
||||
/* @import './card.css'; */
|
||||
@import './toast.css';
|
||||
@import './combination.css'; /* non BEM */
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@media (orientation: landscape) {
|
||||
html[onsflag-iphonex-landscape] .page__content {
|
||||
padding-left: var(--iphonex-safe-area-inset-left-landscape);
|
||||
padding-right: var(--iphonex-safe-area-inset-right-landscape);
|
||||
}
|
||||
/* Ignore if the page is in dialogs or modals */
|
||||
html[onsflag-iphonex-landscape] .dialog .page__content,
|
||||
html[onsflag-iphonex-landscape] .modal .page__content {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@media (orientation: landscape) {
|
||||
html[onsflag-iphonex-landscape] .tabbar {
|
||||
padding-left: var(--iphonex-safe-area-inset-left-landscape);
|
||||
padding-right: var(--iphonex-safe-area-inset-right-landscape);
|
||||
width: calc(100% - var(--iphonex-safe-area-inset-left-landscape) - var(--iphonex-safe-area-inset-right-landscape));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@media (orientation: portrait) {
|
||||
html[onsflag-iphonex-portrait] .toast {
|
||||
bottom: var(--iphonex-safe-area-inset-bottom-portrait);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
html[onsflag-iphonex-landscape] .toast {
|
||||
left: calc(var(--iphonex-safe-area-inset-left-landscape) + 8px);
|
||||
right: calc(var(--iphonex-safe-area-inset-right-landscape) + 8px);
|
||||
bottom: var(--iphonex-safe-area-inset-bottom-landscape);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@media (orientation: landscape) {
|
||||
html[onsflag-iphonex-landscape] .toolbar__left {
|
||||
padding-left: var(--iphonex-safe-area-inset-left-landscape);
|
||||
}
|
||||
|
||||
html[onsflag-iphonex-landscape] .toolbar__right {
|
||||
padding-right: var(--iphonex-safe-area-inset-right-landscape);
|
||||
}
|
||||
|
||||
html[onsflag-iphonex-landscape] .bottom-bar {
|
||||
padding-right: var(--iphonex-safe-area-inset-right-landscape);
|
||||
padding-left: var(--iphonex-safe-area-inset-left-landscape);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/*!
|
||||
* Copyright 2013-2017 ASIAL CORPORATION
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
*/
|
||||
/*!
|
||||
* Copyright 2012 Adobe Systems Inc.;
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
*/
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
@import url('./license.css');
|
||||
@import url('./old-theme.css');
|
||||
@import url('./components/index.css');
|
||||
@import url('./iphonex-support/index.css');
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
|
||||
:root {
|
||||
/* variables for iOS components */
|
||||
--background-color: #f9f9f9;
|
||||
--text-color: #1f1f21;
|
||||
--sub-text-color: #999;
|
||||
--highlight-color: rgba(24, 103, 194, 0.81);
|
||||
--second-highlight-color: #25a6d9;
|
||||
--border-color: #ccc;
|
||||
--button-background-color: var(--highlight-color);
|
||||
--button-cta-background-color: var(--second-highlight-color);
|
||||
--toolbar-background-color: #fff;
|
||||
--toolbar-button-color: rgba(38, 100, 171, 0.81);
|
||||
--toolbar-text-color: #1f1f21;
|
||||
--toolbar-border-color: #bbb;
|
||||
--button-bar-color: rgba(18, 114, 224, 0.77);
|
||||
--button-bar-active-text-color: #fff;
|
||||
--button-bar-active-background-color: color(var(--button-bar-color) tint(70%));
|
||||
--button-light-color: black;
|
||||
--segment-color: rgba(18, 114, 224, 0.77);
|
||||
--segment-active-text-color: #fff;
|
||||
--segment-active-background-color: color(var(--segment-color) tint(70%));
|
||||
--list-background-color: #fff;
|
||||
--list-header-background-color: #eee;
|
||||
--list-tap-active-background-color: #d9d9d9;
|
||||
--list-item-chevron-color: #c7c7cc;
|
||||
--progress-bar-color: rgba(24, 103, 194, 0.81);
|
||||
--progress-bar-secondary-color: rgba(24, 103, 194, 0.4);
|
||||
--progress-bar-background-color: #b6b6b6;
|
||||
--progress-circle-primary-color: rgba(24, 103, 194, 0.81);
|
||||
--progress-circle-secondary-color: rgba(24, 103, 194, 0.81);
|
||||
--progress-circle-background-color: #ddd;
|
||||
--tabbar-background-color: #fff;
|
||||
--tabbar-text-color: #999;
|
||||
--tabbar-highlight-text-color: rgba(24, 103, 194, 0.81);
|
||||
--tabbar-border-color: #ccc;
|
||||
--switch-highlight-color: #5198db;
|
||||
--switch-border-color: #e5e5e5;
|
||||
--switch-background-color: white;
|
||||
--range-track-background-color: #a4aab3;
|
||||
--range-track-background-color-active: var(--highlight-color);
|
||||
--range-thumb-background-color: #fff;
|
||||
--modal-background-color: rgba(0, 0, 0, 0.7);
|
||||
--modal-text-color: #fff;
|
||||
--alert-dialog-background-color: #f4f4f4;
|
||||
--alert-dialog-text-color: #1f1f21;
|
||||
--alert-dialog-button-color: rgba(24, 103, 194, 0.81);
|
||||
--alert-dialog-separator-color: #ddd;
|
||||
--dialog-background-color: #f4f4f4;
|
||||
--dialog-text-color: var(--text-color);
|
||||
--popover-background-color: white;
|
||||
--popover-text-color: #1f1f21;
|
||||
--action-sheet-title-color: #8f8e94;
|
||||
--action-sheet-button-separator-color: rgba(0, 0, 0, 0.1);
|
||||
--action-sheet-button-color: var(--highlight-color);
|
||||
--action-sheet-button-destructive-color: #fe3824;
|
||||
--action-sheet-button-background-color: rgba(255, 255, 255, 0.9);
|
||||
--action-sheet-button-active-background-color: #e9e9e9;
|
||||
--action-sheet-cancel-button-background-color: #fff;
|
||||
--notification-background-color: #dc5236;
|
||||
--notification-color: white;
|
||||
--search-input-background-color: rgba(3, 3, 3, 0.09);
|
||||
--fab-text-color: #ffffff;
|
||||
--fab-background-color: rgba(24, 103, 194, 0.81);
|
||||
--fab-active-background-color: rgba(24, 103, 194, 0.61);
|
||||
--card-background-color: white;
|
||||
--card-text-color: #030303;
|
||||
--toast-background-color: rgba(0, 0, 0, 0.8);
|
||||
--toast-text-color: white;
|
||||
--toast-button-text-color: white;
|
||||
--select-input-color: var(--text-color);
|
||||
--select-input-border-color: var(--border-color);
|
||||
|
||||
/* variables for Material Design components */
|
||||
--material-background-color: #ffffff;
|
||||
--material-text-color: var(--text-color);
|
||||
--material-notification-background-color: #e91e63;
|
||||
--material-notification-color: white;
|
||||
--material-switch-active-thumb-color: #009688;
|
||||
--material-switch-inactive-thumb-color: #f1f1f1;
|
||||
--material-switch-active-background-color: #77c2bb;
|
||||
--material-switch-inactive-background-color: #b0afaf;
|
||||
--material-range-track-color: #bdbdbd;
|
||||
--material-range-thumb-color: #009688;
|
||||
--material-range-disabled-thumb-color: #b0b0b0;
|
||||
--material-range-disabled-thumb-border-color: #eeeeee;
|
||||
--material-range-zero-thumb-color: #f2f2f2;
|
||||
--material-toolbar-background-color: #009688;
|
||||
--material-toolbar-text-color: #ffffff;
|
||||
--material-toolbar-button-color: #ffffff;
|
||||
--material-segment-background-color: #fafafa;
|
||||
--material-segment-active-background-color: #c8c8c8;
|
||||
--material-segment-text-color: color(black a(38%));
|
||||
--material-segment-active-text-color: #353535;
|
||||
--material-button-background-color: #009688;
|
||||
--material-button-text-color: #ffffff;
|
||||
--material-button-disabled-background-color: color(#4f4f4f a(26%));
|
||||
--material-button-disabled-color: color(black a(26%));
|
||||
--material-flat-button-active-background-color: color(#999 a(20%));
|
||||
--material-list-background-color: #fff;
|
||||
--material-list-item-separator-color: #eee;
|
||||
--material-list-header-text-color: #757575;
|
||||
--material-checkbox-active-color: #37474f;
|
||||
--material-checkbox-inactive-color: #717171;
|
||||
--material-checkbox-checkmark-color: #ffffff;
|
||||
--material-checkbox-active-color: #009688;
|
||||
--material-checkbox-inactive-color: #717171;
|
||||
--material-checkbox-checkmark-color: #ffffff;
|
||||
--material-radio-button-active-color: #009688;
|
||||
--material-radio-button-inactive-color: #717171;
|
||||
--material-radio-button-disabled-color: #afafaf;
|
||||
--material-text-input-text-color: #212121;
|
||||
--material-text-input-active-color: #009688;
|
||||
--material-text-input-inactive-color: #afafaf;
|
||||
--material-search-background-color: #fafafa;
|
||||
--material-dialog-background-color: #ffffff;
|
||||
--material-dialog-text-color: var(--material-text-color);
|
||||
--material-alert-dialog-background-color: #ffffff;
|
||||
--material-alert-dialog-title-color: #212121;
|
||||
--material-alert-dialog-content-color: #727272;
|
||||
--material-alert-dialog-button-color: #009688;
|
||||
--material-progress-bar-primary-color: #009688;
|
||||
--material-progress-bar-secondary-color: #80cbc4;
|
||||
--material-progress-bar-background-color: #e0e0e0;
|
||||
--material-progress-circle-primary-color: #009688;
|
||||
--material-progress-circle-secondary-color: #80cbc4;
|
||||
--material-progress-circle-background-color: #dbdbdb;
|
||||
--material-tabbar-background-color: #009688;
|
||||
--material-tabbar-text-color: rgba(255, 255, 255, 0.6);
|
||||
--material-tabbar-highlight-text-color: #ffffff;
|
||||
--material-tabbar-highlight-color: #26a69a;
|
||||
--material-fab-text-color: #ffffff;
|
||||
--material-fab-background-color: #009688;
|
||||
--material-fab-active-background-color: rgba(0, 150, 136, 0.85);
|
||||
--material-card-background-color: white;
|
||||
--material-card-text-color: rgba(0, 0, 0, 0.54);
|
||||
--material-toast-background-color: rgba(0, 0, 0, 0.8);
|
||||
--material-toast-text-color: white;
|
||||
--material-toast-button-text-color: #bbdefb;
|
||||
--material-select-input-color: var(--material-text-color);
|
||||
--material-select-input-active-color: rgba(0, 0, 0, 0.15);
|
||||
--material-select-input-inactive-color: rgba(0, 0, 0, 0.81);
|
||||
--material-select-border-color: color(black a(12%));
|
||||
--material-popover-background-color: #fafafa;
|
||||
--material-popover-text-color: var(--material-text-color);
|
||||
--material-action-sheet-text-color: #686868;
|
||||
|
||||
/* others */
|
||||
--tap-highlight-color: transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
@import url('./license.css');
|
||||
@import url('./theme.css');
|
||||
@import url('./components/index.css');
|
||||
@import url('./iphonex-support/index.css');
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
|
||||
:root {
|
||||
/* variables for iOS components */
|
||||
--background-color: #efeff4;
|
||||
--text-color: #1f1f21;
|
||||
--sub-text-color: #999;
|
||||
--highlight-color: #0076ff;
|
||||
--second-highlight-color: #25a6d9;
|
||||
--border-color: #ccc;
|
||||
--button-background-color: var(--highlight-color);
|
||||
--button-cta-background-color: var(--second-highlight-color);
|
||||
--toolbar-background-color: #fafafa;
|
||||
--toolbar-button-color: var(--highlight-color);
|
||||
--toolbar-text-color: #1f1f21;
|
||||
--toolbar-border-color: #b2b2b2;
|
||||
--button-bar-color: var(--highlight-color);
|
||||
--button-bar-active-text-color: #fff;
|
||||
--button-bar-active-background-color: color(var(--button-bar-color) tint(70%));
|
||||
--button-light-color: black;
|
||||
--segment-color: var(--highlight-color);
|
||||
--segment-active-text-color: #fff;
|
||||
--segment-active-background-color: color(var(--segment-color) tint(70%));
|
||||
--list-background-color: #fff;
|
||||
--list-header-background-color: #eee;
|
||||
--list-tap-active-background-color: #d9d9d9;
|
||||
--list-item-chevron-color: #c7c7cc;
|
||||
--progress-bar-color: var(--highlight-color);
|
||||
--progress-bar-secondary-color: #65adff;
|
||||
--progress-bar-background-color: transparent;
|
||||
--progress-circle-primary-color: var(--highlight-color);
|
||||
--progress-circle-secondary-color: #65adff;
|
||||
--progress-circle-background-color: transparent;
|
||||
--tabbar-background-color: #fafafa;
|
||||
--tabbar-text-color: #999;
|
||||
--tabbar-highlight-text-color: var(--highlight-color);
|
||||
--tabbar-border-color: #ccc;
|
||||
--switch-highlight-color: #44db5e;
|
||||
--switch-border-color: #e5e5e5;
|
||||
--switch-background-color: white;
|
||||
--range-track-background-color: #a4aab3;
|
||||
--range-track-background-color-active: var(--highlight-color);
|
||||
--range-thumb-background-color: #fff;
|
||||
--modal-background-color: rgba(0, 0, 0, 0.7);
|
||||
--modal-text-color: #fff;
|
||||
--alert-dialog-background-color: #f4f4f4;
|
||||
--alert-dialog-text-color: #1f1f21;
|
||||
--alert-dialog-button-color: var(--highlight-color);
|
||||
--alert-dialog-separator-color: #ddd;
|
||||
--dialog-background-color: #f4f4f4;
|
||||
--dialog-text-color: var(--text-color);
|
||||
--popover-background-color: white;
|
||||
--popover-text-color: #1f1f21;
|
||||
--action-sheet-title-color: #8f8e94;
|
||||
--action-sheet-button-separator-color: rgba(0, 0, 0, 0.1);
|
||||
--action-sheet-button-color: var(--highlight-color);
|
||||
--action-sheet-button-destructive-color: #fe3824;
|
||||
--action-sheet-button-background-color: rgba(255, 255, 255, 0.9);
|
||||
--action-sheet-button-active-background-color: #e9e9e9;
|
||||
--action-sheet-cancel-button-background-color: #fff;
|
||||
--notification-background-color: #fe3824;
|
||||
--notification-color: white;
|
||||
--search-input-background-color: rgba(3, 3, 3, 0.09);
|
||||
--fab-text-color: #ffffff;
|
||||
--fab-background-color: var(--highlight-color);
|
||||
--fab-active-background-color: color(var(--fab-background-color) a(70%));
|
||||
--card-background-color: white;
|
||||
--card-text-color: #030303;
|
||||
--toast-background-color: rgba(0, 0, 0, 0.8);
|
||||
--toast-text-color: white;
|
||||
--toast-button-text-color: white;
|
||||
--select-input-color: var(--text-color);
|
||||
--select-input-border-color: var(--border-color);
|
||||
|
||||
/* variables for Material Design components */
|
||||
--material-background-color: #eceff1;
|
||||
--material-text-color: var(--text-color);
|
||||
--material-notification-background-color: #e91e63;
|
||||
--material-notification-color: white;
|
||||
--material-switch-active-thumb-color: #37474f;
|
||||
--material-switch-active-background-color: color(#37474f a(50%));
|
||||
--material-switch-inactive-thumb-color: #f1f1f1;
|
||||
--material-switch-inactive-background-color: #b0afaf;
|
||||
--material-range-track-color: #bdbdbd;
|
||||
--material-range-thumb-color: #31313a;
|
||||
--material-range-disabled-thumb-color: #b0b0b0;
|
||||
--material-range-disabled-thumb-border-color: #eeeeee;
|
||||
--material-range-zero-thumb-color: #f2f2f2;
|
||||
--material-toolbar-background-color: #ffffff;
|
||||
--material-toolbar-text-color: #31313a;
|
||||
--material-toolbar-button-color: #1e88e5;
|
||||
--material-segment-background-color: #fafafa;
|
||||
--material-segment-active-background-color: #c8c8c8;
|
||||
--material-segment-text-color: color(black a(38%));
|
||||
--material-segment-active-text-color: #353535;
|
||||
--material-button-background-color: #2979ff;
|
||||
--material-button-text-color: #ffffff;
|
||||
--material-button-disabled-background-color: color(#4f4f4f a(26%));
|
||||
--material-button-disabled-color: color(black a(26%));
|
||||
--material-flat-button-active-background-color: color(#999 a(20%));
|
||||
--material-list-background-color: #fff;
|
||||
--material-list-item-separator-color: #eee;
|
||||
--material-list-header-text-color: #757575;
|
||||
--material-checkbox-active-color: #37474f;
|
||||
--material-checkbox-inactive-color: #717171;
|
||||
--material-checkbox-checkmark-color: #ffffff;
|
||||
--material-radio-button-active-color: #37474f;
|
||||
--material-radio-button-inactive-color: #717171;
|
||||
--material-radio-button-disabled-color: #afafaf;
|
||||
--material-text-input-text-color: #212121;
|
||||
--material-text-input-active-color: #3d5afe;
|
||||
--material-text-input-inactive-color: #afafaf;
|
||||
--material-search-background-color: #fafafa;
|
||||
--material-dialog-background-color: #ffffff;
|
||||
--material-dialog-text-color: var(--material-text-color);
|
||||
--material-alert-dialog-background-color: #ffffff;
|
||||
--material-alert-dialog-title-color: #31313a;
|
||||
--material-alert-dialog-content-color: rgba(49, 49, 58, 0.85);
|
||||
--material-alert-dialog-button-color: #37474f;
|
||||
--material-progress-bar-primary-color: #37474f;
|
||||
--material-progress-bar-secondary-color: #548ba7;
|
||||
--material-progress-bar-background-color: transparent;
|
||||
--material-progress-circle-primary-color: var(--material-progress-bar-primary-color);
|
||||
--material-progress-circle-secondary-color: var(--material-progress-bar-secondary-color);
|
||||
--material-progress-circle-background-color: transparent;
|
||||
--material-tabbar-background-color: #ffffff;
|
||||
--material-tabbar-text-color: #31313a;
|
||||
--material-tabbar-highlight-text-color: #31313a;
|
||||
--material-tabbar-highlight-color: rgba(49, 49, 58, 0.1);
|
||||
--material-fab-text-color: #31313a;
|
||||
--material-fab-background-color: #ffffff;
|
||||
--material-fab-active-background-color: rgba(255, 255, 255, 0.75);
|
||||
--material-card-background-color: white;
|
||||
--material-card-text-color: rgba(0, 0, 0, 0.54);
|
||||
--material-toast-background-color: rgba(0, 0, 0, 0.8);
|
||||
--material-toast-text-color: white;
|
||||
--material-toast-button-text-color: #bbdefb;
|
||||
--material-select-input-color: var(--material-text-color);
|
||||
--material-select-input-active-color: rgba(0, 0, 0, 0.15);
|
||||
--material-select-input-inactive-color: rgba(0, 0, 0, 0.81);
|
||||
--material-select-border-color: color(black a(12%));
|
||||
--material-popover-background-color: #fafafa;
|
||||
--material-popover-text-color: var(--material-text-color);
|
||||
--material-action-sheet-text-color: #686868;
|
||||
|
||||
/* others */
|
||||
--tap-highlight-color: transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
module.exports = {
|
||||
defaultSeverity: 'warning',
|
||||
|
||||
rules: {
|
||||
// Color
|
||||
'color-hex-case': 'lower',
|
||||
'color-hex-length': null,
|
||||
'color-named': null,
|
||||
'color-no-hex': null,
|
||||
'color-no-invalid-hex': true,
|
||||
|
||||
// Font
|
||||
'font-family-name-quotes': 'always-unless-keyword',
|
||||
'font-family-no-duplicate-names': true,
|
||||
'font-weight-notation': 'numeric',
|
||||
|
||||
// Function
|
||||
'function-blacklist': null,
|
||||
'function-calc-no-unspaced-operator': true,
|
||||
'function-comma-newline-after': 'never-multi-line',
|
||||
'function-comma-newline-before': null,
|
||||
'function-comma-space-after': 'always',
|
||||
'function-comma-space-before': 'never',
|
||||
'function-linear-gradient-no-nonstandard-direction': true,
|
||||
'function-max-empty-lines': 0,
|
||||
'function-name-case': 'lower',
|
||||
'function-parentheses-newline-inside': null,
|
||||
'function-parentheses-space-inside': 'never',
|
||||
'function-url-data-uris': null,
|
||||
'function-url-no-scheme-relative': null,
|
||||
'function-url-quotes': 'always',
|
||||
'function-url-scheme-whitelist': null,
|
||||
'function-whitelist': null,
|
||||
'function-whitespace-after': 'always',
|
||||
|
||||
// Number
|
||||
'number-leading-zero': null,
|
||||
'number-max-precision': null,
|
||||
'number-no-trailing-zeros': true,
|
||||
|
||||
// String
|
||||
'string-no-newline': true,
|
||||
'string-quotes': 'single',
|
||||
|
||||
// Length
|
||||
'length-zero-no-unit': true,
|
||||
|
||||
// Time
|
||||
'time-min-milliseconds': null,
|
||||
|
||||
// Unit
|
||||
'unit-blacklist': null,
|
||||
'unit-case': 'lower',
|
||||
'unit-no-unknown': true,
|
||||
'unit-whitelist': null,
|
||||
|
||||
// Value
|
||||
'value-keyword-case': 'lower',
|
||||
'value-no-vendor-prefix': true,
|
||||
|
||||
// Value list
|
||||
'value-list-comma-newline-after': null,
|
||||
'value-list-comma-newline-after': null,
|
||||
'value-list-comma-space-after': 'always-single-line',
|
||||
'value-list-comma-space-before': 'never',
|
||||
'value-list-max-empty-lines': 0,
|
||||
|
||||
// Custom property
|
||||
'custom-property-empty-line-before': null,
|
||||
'custom-property-pattern': null,
|
||||
|
||||
// Shorthand property
|
||||
'shorthand-property-no-redundant-values': null,
|
||||
|
||||
// Property
|
||||
'property-blacklist': null,
|
||||
'property-case': 'lower',
|
||||
'property-no-unknown': true,
|
||||
'property-no-vendor-prefix': null,
|
||||
'property-whitelist': null,
|
||||
|
||||
// Keyframe declaration
|
||||
'keyframe-declaration-no-important': true,
|
||||
|
||||
// Declration
|
||||
'declaration-bang-space-after': 'never',
|
||||
'declaration-bang-space-before': 'always',
|
||||
'declaration-colon-newline-after': null,
|
||||
'declaration-colon-space-after': 'always-single-line',
|
||||
'declaration-colon-space-before': 'never',
|
||||
'declaration-empty-line-before': null,
|
||||
'declaration-no-important': true,
|
||||
'declaration-property-unit-blacklist': null,
|
||||
'declaration-property-unit-whitelist': null,
|
||||
'declaration-property-value-blacklist': null,
|
||||
'declaration-property-value-whitelist': null,
|
||||
|
||||
// Declaration block
|
||||
'declaration-block-no-duplicate-properties': true,
|
||||
'declaration-block-no-redundant-longhand-properties': null,
|
||||
'declaration-block-no-shorthand-property-overrides': true,
|
||||
'declaration-block-semicolon-newline-after': 'always',
|
||||
'declaration-block-semicolon-newline-before': null,
|
||||
'declaration-block-semicolon-space-after': null,
|
||||
'declaration-block-semicolon-space-before': null,
|
||||
'declaration-block-single-line-max-declarations': null,
|
||||
'declaration-block-trailing-semicolon': 'always',
|
||||
|
||||
// Block
|
||||
'block-closing-brace-empty-line-before': 'never',
|
||||
'block-closing-brace-newline-after': 'always',
|
||||
'block-closing-brace-newline-before': 'always',
|
||||
'block-closing-brace-space-after': null,
|
||||
'block-closing-brace-space-before': null,
|
||||
'block-no-empty': null,
|
||||
'block-opening-brace-newline-after': 'always',
|
||||
'block-opening-brace-newline-before': null,
|
||||
'block-opening-brace-space-after': null,
|
||||
'block-opening-brace-space-before': null,
|
||||
|
||||
// Selector
|
||||
'selector-attribute-brackets-space-inside': 'never',
|
||||
'selector-attribute-operator-blacklist': null,
|
||||
'selector-attribute-operator-space-after': 'never',
|
||||
'selector-attribute-operator-space-before': 'never',
|
||||
'selector-attribute-operator-whitelist': null,
|
||||
'selector-attribute-quotes': 'always',
|
||||
'selector-class-pattern': '^([a-z0-9]+(-[a-z0-9]+)*)(--[a-z0-9]+(-[a-z0-9]+)*)?(__([a-z0-9]+(-[a-z0-9]+)*)(--[a-z0-9]+(-[a-z0-9]+)*)?)*$', // MindBEMding style
|
||||
'selector-combinator-space-after': 'always',
|
||||
'selector-combinator-space-before': 'always',
|
||||
'selector-descendant-combinator-no-non-space': true,
|
||||
'selector-id-pattern': null,
|
||||
'selector-max-compound-selectors': 3,
|
||||
'selector-max-specificity': '0,3,1',
|
||||
'selector-nested-pattern': null,
|
||||
'selector-no-attribute': null,
|
||||
'selector-no-combinator': null,
|
||||
'selector-no-id': true,
|
||||
'selector-no-qualifying-type': true,
|
||||
'selector-no-type': null,
|
||||
'selector-no-universal': true,
|
||||
'selector-no-vendor-prefix': true,
|
||||
'selector-pseudo-class-blacklist': null,
|
||||
'selector-pseudo-class-case': 'lower',
|
||||
'selector-pseudo-class-no-unknown': true,
|
||||
'selector-pseudo-class-parentheses-space-inside': 'never',
|
||||
'selector-pseudo-class-whitelist': null,
|
||||
'selector-pseudo-element-case': 'lower',
|
||||
'selector-pseudo-element-colon-notation': 'single',
|
||||
'selector-pseudo-element-no-unknown': true,
|
||||
'selector-type-case': 'lower',
|
||||
'selector-type-no-unknown': true,
|
||||
'selector-max-empty-lines': 0,
|
||||
|
||||
// Rule
|
||||
'rule-empty-line-before': ['always', {except: ['after-single-line-comment', 'first-nested']}],
|
||||
|
||||
// Media feature
|
||||
'media-feature-colon-space-after': 'always',
|
||||
'media-feature-colon-space-before': 'never',
|
||||
'media-feature-name-blacklist': null,
|
||||
'media-feature-name-case': 'lower',
|
||||
'media-feature-name-no-unknown': true,
|
||||
'media-feature-name-no-vendor-prefix': null,
|
||||
'media-feature-name-whitelist': null,
|
||||
'media-feature-parentheses-space-inside': 'never',
|
||||
'media-feature-range-operator-space-after': 'always',
|
||||
'media-feature-range-operator-space-before': 'always',
|
||||
|
||||
// Custom media
|
||||
'custom-media-pattern': null,
|
||||
|
||||
// Media query list
|
||||
'media-query-list-comma-newline-after': null,
|
||||
'media-query-list-comma-newline-before': null,
|
||||
'media-query-list-comma-space-after': 'always',
|
||||
'media-query-list-comma-space-before': 'never',
|
||||
|
||||
// At-rule
|
||||
'at-rule-blacklist': null,
|
||||
'at-rule-empty-line-before': null,
|
||||
'at-rule-name-case': 'lower',
|
||||
'at-rule-name-newline-after': null,
|
||||
'at-rule-name-space-after': 'always',
|
||||
'at-rule-no-unknown': true,
|
||||
'at-rule-no-vendor-prefix': null,
|
||||
'at-rule-semicolon-newline-after': 'always',
|
||||
'at-rule-whitelist': null,
|
||||
|
||||
// Comment
|
||||
'comment-empty-line-before': null,
|
||||
'comment-no-empty': true,
|
||||
'comment-whitespace-inside': null,
|
||||
'comment-word-blacklist': null,
|
||||
|
||||
// General / Sheet
|
||||
'indentation': 2,
|
||||
'max-empty-lines': 1,
|
||||
'max-line-length': null,
|
||||
'max-nesting-depth': null,
|
||||
'no-descending-specificity': true,
|
||||
'no-duplicate-selectors': true,
|
||||
'no-empty-source': true,
|
||||
'no-eol-whitespace': true,
|
||||
'no-extra-semicolons': true,
|
||||
'no-invalid-double-slash-comments': true,
|
||||
'no-missing-end-of-source-newline': null,
|
||||
'no-unknown-animations': true
|
||||
}
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
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 one or more lines are too long
|
|
@ -0,0 +1,14 @@
|
|||
/*!
|
||||
* Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Brands';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: auto;
|
||||
src: url("../webfonts/fa-brands-400.eot");
|
||||
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
|
||||
|
||||
.fab {
|
||||
font-family: 'Font Awesome 5 Brands'; }
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/*!
|
||||
* Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/
|
||||
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,15 @@
|
|||
/*!
|
||||
* Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: auto;
|
||||
src: url("../webfonts/fa-regular-400.eot");
|
||||
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
|
||||
|
||||
.far {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 400; }
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/*!
|
||||
* Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/
|
||||
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/*!
|
||||
* Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: auto;
|
||||
src: url("../webfonts/fa-solid-900.eot");
|
||||
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
|
||||
|
||||
.fa,
|
||||
.fas {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900; }
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/*!
|
||||
* Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/
|
||||
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:"Font Awesome 5 Free";font-weight:900}
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
/*!
|
||||
* Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/
|
||||
svg:not(:root).svg-inline--fa {
|
||||
overflow: visible; }
|
||||
|
||||
.svg-inline--fa {
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
vertical-align: -.125em; }
|
||||
.svg-inline--fa.fa-lg {
|
||||
vertical-align: -.225em; }
|
||||
.svg-inline--fa.fa-w-1 {
|
||||
width: 0.0625em; }
|
||||
.svg-inline--fa.fa-w-2 {
|
||||
width: 0.125em; }
|
||||
.svg-inline--fa.fa-w-3 {
|
||||
width: 0.1875em; }
|
||||
.svg-inline--fa.fa-w-4 {
|
||||
width: 0.25em; }
|
||||
.svg-inline--fa.fa-w-5 {
|
||||
width: 0.3125em; }
|
||||
.svg-inline--fa.fa-w-6 {
|
||||
width: 0.375em; }
|
||||
.svg-inline--fa.fa-w-7 {
|
||||
width: 0.4375em; }
|
||||
.svg-inline--fa.fa-w-8 {
|
||||
width: 0.5em; }
|
||||
.svg-inline--fa.fa-w-9 {
|
||||
width: 0.5625em; }
|
||||
.svg-inline--fa.fa-w-10 {
|
||||
width: 0.625em; }
|
||||
.svg-inline--fa.fa-w-11 {
|
||||
width: 0.6875em; }
|
||||
.svg-inline--fa.fa-w-12 {
|
||||
width: 0.75em; }
|
||||
.svg-inline--fa.fa-w-13 {
|
||||
width: 0.8125em; }
|
||||
.svg-inline--fa.fa-w-14 {
|
||||
width: 0.875em; }
|
||||
.svg-inline--fa.fa-w-15 {
|
||||
width: 0.9375em; }
|
||||
.svg-inline--fa.fa-w-16 {
|
||||
width: 1em; }
|
||||
.svg-inline--fa.fa-w-17 {
|
||||
width: 1.0625em; }
|
||||
.svg-inline--fa.fa-w-18 {
|
||||
width: 1.125em; }
|
||||
.svg-inline--fa.fa-w-19 {
|
||||
width: 1.1875em; }
|
||||
.svg-inline--fa.fa-w-20 {
|
||||
width: 1.25em; }
|
||||
.svg-inline--fa.fa-pull-left {
|
||||
margin-right: .3em;
|
||||
width: auto; }
|
||||
.svg-inline--fa.fa-pull-right {
|
||||
margin-left: .3em;
|
||||
width: auto; }
|
||||
.svg-inline--fa.fa-border {
|
||||
height: 1.5em; }
|
||||
.svg-inline--fa.fa-li {
|
||||
width: 2em; }
|
||||
.svg-inline--fa.fa-fw {
|
||||
width: 1.25em; }
|
||||
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
.fa-layers {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: -.125em;
|
||||
width: 1em; }
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center; }
|
||||
|
||||
.fa-layers-text, .fa-layers-counter {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
text-align: center; }
|
||||
|
||||
.fa-layers-text {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center; }
|
||||
|
||||
.fa-layers-counter {
|
||||
background-color: #ff253a;
|
||||
border-radius: 1em;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
height: 1.5em;
|
||||
line-height: 1;
|
||||
max-width: 5em;
|
||||
min-width: 1.5em;
|
||||
overflow: hidden;
|
||||
padding: .25em;
|
||||
right: 0;
|
||||
text-overflow: ellipsis;
|
||||
top: 0;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right; }
|
||||
|
||||
.fa-layers-bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: auto;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: bottom right;
|
||||
transform-origin: bottom right; }
|
||||
|
||||
.fa-layers-bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: auto;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left; }
|
||||
|
||||
.fa-layers-top-right {
|
||||
right: 0;
|
||||
top: 0;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right; }
|
||||
|
||||
.fa-layers-top-left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: 0;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left; }
|
||||
|
||||
.fa-lg {
|
||||
font-size: 1.33333em;
|
||||
line-height: 0.75em;
|
||||
vertical-align: -.0667em; }
|
||||
|
||||
.fa-xs {
|
||||
font-size: .75em; }
|
||||
|
||||
.fa-sm {
|
||||
font-size: .875em; }
|
||||
|
||||
.fa-1x {
|
||||
font-size: 1em; }
|
||||
|
||||
.fa-2x {
|
||||
font-size: 2em; }
|
||||
|
||||
.fa-3x {
|
||||
font-size: 3em; }
|
||||
|
||||
.fa-4x {
|
||||
font-size: 4em; }
|
||||
|
||||
.fa-5x {
|
||||
font-size: 5em; }
|
||||
|
||||
.fa-6x {
|
||||
font-size: 6em; }
|
||||
|
||||
.fa-7x {
|
||||
font-size: 7em; }
|
||||
|
||||
.fa-8x {
|
||||
font-size: 8em; }
|
||||
|
||||
.fa-9x {
|
||||
font-size: 9em; }
|
||||
|
||||
.fa-10x {
|
||||
font-size: 10em; }
|
||||
|
||||
.fa-fw {
|
||||
text-align: center;
|
||||
width: 1.25em; }
|
||||
|
||||
.fa-ul {
|
||||
list-style-type: none;
|
||||
margin-left: 2.5em;
|
||||
padding-left: 0; }
|
||||
.fa-ul > li {
|
||||
position: relative; }
|
||||
|
||||
.fa-li {
|
||||
left: -2em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 2em;
|
||||
line-height: inherit; }
|
||||
|
||||
.fa-border {
|
||||
border: solid 0.08em #eee;
|
||||
border-radius: .1em;
|
||||
padding: .2em .25em .15em; }
|
||||
|
||||
.fa-pull-left {
|
||||
float: left; }
|
||||
|
||||
.fa-pull-right {
|
||||
float: right; }
|
||||
|
||||
.fa.fa-pull-left,
|
||||
.fas.fa-pull-left,
|
||||
.far.fa-pull-left,
|
||||
.fal.fa-pull-left,
|
||||
.fab.fa-pull-left {
|
||||
margin-right: .3em; }
|
||||
|
||||
.fa.fa-pull-right,
|
||||
.fas.fa-pull-right,
|
||||
.far.fa-pull-right,
|
||||
.fal.fa-pull-right,
|
||||
.fab.fa-pull-right {
|
||||
margin-left: .3em; }
|
||||
|
||||
.fa-spin {
|
||||
-webkit-animation: fa-spin 2s infinite linear;
|
||||
animation: fa-spin 2s infinite linear; }
|
||||
|
||||
.fa-pulse {
|
||||
-webkit-animation: fa-spin 1s infinite steps(8);
|
||||
animation: fa-spin 1s infinite steps(8); }
|
||||
|
||||
@-webkit-keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
.fa-rotate-90 {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg); }
|
||||
|
||||
.fa-rotate-180 {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg); }
|
||||
|
||||
.fa-rotate-270 {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg); }
|
||||
|
||||
.fa-flip-horizontal {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1); }
|
||||
|
||||
.fa-flip-vertical {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
|
||||
-webkit-transform: scale(1, -1);
|
||||
transform: scale(1, -1); }
|
||||
|
||||
.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
|
||||
-webkit-transform: scale(-1, -1);
|
||||
transform: scale(-1, -1); }
|
||||
|
||||
:root .fa-rotate-90,
|
||||
:root .fa-rotate-180,
|
||||
:root .fa-rotate-270,
|
||||
:root .fa-flip-horizontal,
|
||||
:root .fa-flip-vertical,
|
||||
:root .fa-flip-both {
|
||||
-webkit-filter: none;
|
||||
filter: none; }
|
||||
|
||||
.fa-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
width: 2.5em; }
|
||||
|
||||
.fa-stack-1x,
|
||||
.fa-stack-2x {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
.svg-inline--fa.fa-stack-1x {
|
||||
height: 1em;
|
||||
width: 1.25em; }
|
||||
|
||||
.svg-inline--fa.fa-stack-2x {
|
||||
height: 2em;
|
||||
width: 2.5em; }
|
||||
|
||||
.fa-inverse {
|
||||
color: #fff; }
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px; }
|
||||
|
||||
.sr-only-focusable:active, .sr-only-focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto; }
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/*!
|
||||
* Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/
|
||||
.svg-inline--fa,svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;transform:scale(.25);transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;transform:scale(.25);transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;transform:scale(.25);transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;transform:scale(.25);transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;transform:scale(.25);transform-origin:top left}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s infinite linear}.fa-pulse{animation:fa-spin 1s infinite steps(8)}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue