You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by mm...@apache.org on 2014/05/05 17:02:18 UTC
[35/51] [abbrv] [partial] Moving test-harness out of app and into
plugin
http://git-wip-us.apache.org/repos/asf/cordova-labs/blob/15d2581d/cordova-app-test-harness/www/assets/topcoat-0.7.5/demo/index.html
----------------------------------------------------------------------
diff --git a/cordova-app-test-harness/www/assets/topcoat-0.7.5/demo/index.html b/cordova-app-test-harness/www/assets/topcoat-0.7.5/demo/index.html
deleted file mode 100755
index 00cf38a..0000000
--- a/cordova-app-test-harness/www/assets/topcoat-0.7.5/demo/index.html
+++ /dev/null
@@ -1,3167 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Topcoat</title>
- <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
- <link rel="stylesheet" type="text/css" href="fonts/stylesheet.css">
- <link rel="stylesheet" type="text/css" href="../css/topcoat-desktop-dark.css">
- <link rel="stylesheet" type="text/css" href="css/main.css">
- <link rel="stylesheet" type="text/css" href="css/brackets.css"><!--[if lt IE 9]>
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
- </head>
- <body class="dark">
- <div id="wrapper">
- <div class="max-width">
- <div id="sideNav">
- <nav class="site">
- <ul>
- <li><a href="http://topcoat.io">Home</a></li>
- <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>
- <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>
- <li><a href="http://topcoat.io/blog">Blog</a></li>
- </ul>
- </nav>
- <div class="combo">
- <select class="docNav">
- <option value="index.html" selected="selected">Topcoat Desktop Dark</option>
- <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>
- <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>
- <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>
- </select>
- </div>
- <div id="pageNav">
- <ul>
- <li><a href="#button-bar">Button Bar</a></li>
- <li><a href="#large-buttonbar">Large Button Bar</a></li>
- <li><a href="#button">Button</a></li>
- <li><a href="#quiet-button">Quiet Button</a></li>
- <li><a href="#large-button">Large Button</a></li>
- <li><a href="#large-quietbutton">Large Quiet Button</a></li>
- <li><a href="#call-toaction button">Call To Action Button</a></li>
- <li><a href="#large-callto action button">Large Call To Action Button</a></li>
- <li><a href="#checkbox">Checkbox</a></li>
- <li><a href="#icon-button">Icon Button</a></li>
- <li><a href="#quiet-iconbutton">Quiet Icon Button</a></li>
- <li><a href="#large-iconbutton">Large Icon Button</a></li>
- <li><a href="#large-quieticon button">Large Quiet Icon Button</a></li>
- <li><a href="#notification">Notification</a></li>
- <li><a href="#radio-button">Radio Button</a></li>
- <li><a href="#range">Range</a></li>
- <li><a href="#search-input">Search Input</a></li>
- <li><a href="#large-searchinput">Large Search Input</a></li>
- <li><a href="#switch">Switch</a></li>
- <li><a href="#tab-bar">Tab Bar</a></li>
- <li><a href="#text-input">Text input</a></li>
- <li><a href="#large-textinput">Large Text Input</a></li>
- <li><a href="#textarea">Textarea</a></li>
- <li><a href="#large-textarea">Large Textarea</a></li>
- </ul>
- </div>
- </div>
- </div>
- <div id="site">
- <header id="main-header">
- <div class="max-width">
- <hgroup>
- <h1><a href="http://topcoat.io">Topcoat</a></h1>
- <p>CSS for clean and fast web apps</p>
- </hgroup>
- <nav>
- <ul>
- <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>
- <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>
- <li><a href="http://topcoat.io/blog">Blog</a></li>
- <li><a id="download-btn" href="https://github.com/topcoat/topcoat/archive/v0.7.0.zip" onclick="_gaq.push(['_trackEvent', 'download', 'click',,, false]);">Download</a></li>
- </ul>
- </nav><a id="slide-menu-button" class="topcoat-icon-button--large--quiet"><span class="topcoat-icon--large topcoat-icon--menu-stack"></span></a>
- </div>
- </header>
- <div id="content" class="max-width">
- <article id="button-bar" class="component">
- <header>
- <h2>Button Bar</h2>
- </header>
- <section class="component"><div class="topcoat-button-bar">
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button">One</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button">Two</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button">Three</button>
</div>
</div></section>
- <section class="examples">
- <h4>Examples</h4>
- <ul>
- <li><a href="http://codepen.io/Topcoat/pen/kdKyg">mobile button bar</a></li>
- </ul>
- </section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><div class="topcoat-button-bar">
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button">One</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button">Two</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button">Three</button>
</div>
</div></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-button-bar > .topcoat-button-bar__item:first-child {
- border-top-left-radius: 4px;
- border-bottom-left-radius: 4px;
-}
-
-.topcoat-button-bar > .topcoat-button-bar__item:last-child {
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
-}
-
-.topcoat-button-bar__item:first-child > .topcoat-button-bar__button,
-.topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {
- border-right: none;
-}
-
-.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,
-.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {
- border-left: none;
-}
-
-.topcoat-button-bar__button {
- border-radius: inherit;
-}
-
-.topcoat-button-bar__button:focus,
-.topcoat-button-bar__button--large:focus {
- z-index: 1;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="large-buttonbar" class="component">
- <header>
- <h2>Large Button Bar</h2>
- </header>
- <section class="component"><div class="topcoat-button-bar">
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button--large">One</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button--large">Two</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button--large">Three</button>
</div>
</div></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><div class="topcoat-button-bar">
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button--large">One</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button--large">Two</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button-bar__button--large">Three</button>
</div>
</div></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-button-bar__button--large {
- border-radius: inherit;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-.button {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- text-decoration: none;
-}
-
-.button--quiet {
- background: transparent;
- border: 1px solid transparent;
- box-shadow: none;
-}
-
-.button--disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.button,
-.topcoat-button,
-.topcoat-button--quiet,
-.topcoat-button--large,
-.topcoat-button--large--quiet,
-.topcoat-button--cta,
-.topcoat-button--large--cta {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- text-decoration: none;
-}
-
-.button--quiet {
- background: transparent;
- border: 1px solid transparent;
- box-shadow: none;
-}
-
-.button--disabled,
-.topcoat-button:disabled,
-.topcoat-button--quiet:disabled,
-.topcoat-button--large:disabled,
-.topcoat-button--large--quiet:disabled,
-.topcoat-button--cta:disabled,
-.topcoat-button--large--cta:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="button" class="component">
- <header>
- <h2>Button</h2>
- </header>
- <section class="component"><button class="topcoat-button">Button</button>
<button class="topcoat-button" disabled>Button</button></section>
- <section class="examples">
- <h4>Examples</h4>
- <ul>
- <li><a href="http://codepen.io/Topcoat/pen/DpKtf">mobile button</a></li>
- </ul>
- </section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-button">Button</button>
<button class="topcoat-button" disabled>Button</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-button,
-.topcoat-button--quiet,
-.topcoat-button--large,
-.topcoat-button--large--quiet,
-.topcoat-button--cta,
-.topcoat-button--large--cta {
- padding: 0 0.563rem;
- font-size: 12px;
- line-height: 1.313rem;
- letter-spacing: 0;
- color: #c6c8c8;
- text-shadow: 0 -1px rgba(0,0,0,0.69);
- vertical-align: top;
- background-color: #595b5b;
- box-shadow: inset 0 1px #727373;
- border: 1px solid #303233;
- border-radius: 4px;
-}
-
-.topcoat-button:hover,
-.topcoat-button--quiet:hover,
-.topcoat-button--large:hover,
-.topcoat-button--large--quiet:hover {
- background-color: #646666;
-}
-
-.topcoat-button:active,
-.topcoat-button--large:active {
- background-color: #404141;
- box-shadow: inset 0 1px rgba(0,0,0,0.18);
-}
-
-.topcoat-button:focus,
-.topcoat-button--quiet:focus,
-.topcoat-button--large:focus,
-.topcoat-button--large--quiet:focus,
-.topcoat-button--cta:focus,
-.topcoat-button--large--cta:focus {
- border: 1px solid #0940fd;
- box-shadow: 0 0 0 2px #6fb5f1;
- outline: 0;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="quiet-button" class="component">
- <header>
- <h2>Quiet Button</h2>
- </header>
- <section class="component"><button class="topcoat-button--quiet">Button</button>
<button class="topcoat-button--quiet" disabled>Button</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-button--quiet">Button</button>
<button class="topcoat-button--quiet" disabled>Button</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-button--quiet {
- background: transparent;
- border: 1px solid transparent;
- box-shadow: none;
-}
-
-.topcoat-button--quiet:hover,
-.topcoat-button--large--quiet:hover {
- text-shadow: 0 -1px rgba(0,0,0,0.69);
- border: 1px solid #303233;
- box-shadow: inset 0 1px #727373;
-}
-
-.topcoat-button--quiet:active,
-.topcoat-button--large--quiet:active {
- color: #c6c8c8;
- text-shadow: 0 -1px rgba(0,0,0,0.69);
- background-color: #404141;
- border: 1px solid #303233;
- box-shadow: inset 0 1px rgba(0,0,0,0.18);
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="large-button" class="component">
- <header>
- <h2>Large Button</h2>
- </header>
- <section class="component"><button class="topcoat-button--large" >Button</button>
<button class="topcoat-button--large" disabled>Button</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-button--large" >Button</button>
<button class="topcoat-button--large" disabled>Button</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-button--large,
-.topcoat-button--large--quiet {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.688rem;
- padding: 0 0.875rem;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="large-quietbutton" class="component">
- <header>
- <h2>Large Quiet Button</h2>
- </header>
- <section class="component"><button class="topcoat-button--large--quiet" >Button</button>
<button class="topcoat-button--large--quiet" disabled>Button</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-button--large--quiet" >Button</button>
<button class="topcoat-button--large--quiet" disabled>Button</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-button--large--quiet {
- background: transparent;
- border: 1px solid transparent;
- box-shadow: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="call-toaction button" class="component">
- <header>
- <h2>Call To Action Button</h2>
- </header>
- <section class="component"><button class="topcoat-button--cta" >Button</button>
<button class="topcoat-button--cta" disabled>Button</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-button--cta" >Button</button>
<button class="topcoat-button--cta" disabled>Button</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-button--cta,
-.topcoat-button--large--cta {
- border: 1px solid #143250;
- background-color: #288edf;
- box-shadow: inset 0 1px rgba(255,255,255,0.36);
- color: #fff;
- font-weight: 500;
- text-shadow: 0 -1px rgba(0,0,0,0.36);
-}
-
-.topcoat-button--cta:hover,
-.topcoat-button--large--cta:hover {
- background-color: #509bef;
-}
-
-.topcoat-button--cta:active,
-.topcoat-button--large--cta:active {
- background-color: #1976c3;
- box-shadow: inset 0 1px rgba(0,0,0,0.12);
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="large-callto action button" class="component">
- <header>
- <h2>Large Call To Action Button</h2>
- </header>
- <section class="component"><button class="topcoat-button--large--cta" >Button</button>
<button class="topcoat-button--large--cta" disabled>Button</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-button--large--cta" >Button</button>
<button class="topcoat-button--large--cta" disabled>Button</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-button--large--cta {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.688rem;
- padding: 0 0.875rem;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-input[type="checkbox"] {
- position: absolute;
- overflow: hidden;
- padding: 0;
- border: 0;
- opacity: 0.001;
- z-index: 1;
- vertical-align: top;
- outline: none;
-}
-
-.checkbox {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- position: relative;
- display: inline-block;
- vertical-align: top;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.checkbox__label {
- position: relative;
- display: inline-block;
- vertical-align: top;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.checkbox--disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-.checkbox:before,
-.checkbox:after {
- content: '';
- position: absolute;
-}
-
-.checkbox:before {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-input[type="checkbox"] {
- position: absolute;
- overflow: hidden;
- padding: 0;
- border: 0;
- opacity: 0.001;
- z-index: 1;
- vertical-align: top;
- outline: none;
-}
-
-.checkbox,
-.topcoat-checkbox__checkmark {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- position: relative;
- display: inline-block;
- vertical-align: top;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.checkbox__label,
-.topcoat-checkbox {
- position: relative;
- display: inline-block;
- vertical-align: top;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.checkbox--disabled,
-input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-.checkbox:before,
-.checkbox:after,
-.topcoat-checkbox__checkmark:before,
-.topcoat-checkbox__checkmark:after {
- content: '';
- position: absolute;
-}
-
-.checkbox:before,
-.topcoat-checkbox__checkmark:before {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="checkbox" class="component">
- <header>
- <h2>Checkbox</h2>
- </header>
- <section class="component"><label class="topcoat-checkbox">
<input type="checkbox">
<div class="topcoat-checkbox__checkmark"></div>
Default
</label>
<br>
<br>
<label class="topcoat-checkbox">
<input type="checkbox" disabled>
<div class="topcoat-checkbox__checkmark"></div>
Disabled
</label></section>
- <section class="examples">
- <h4>Examples</h4>
- <ul>
- <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>
- </ul>
- </section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><label class="topcoat-checkbox">
<input type="checkbox">
<div class="topcoat-checkbox__checkmark"></div>
Default
</label>
<br>
<br>
<label class="topcoat-checkbox">
<input type="checkbox" disabled>
<div class="topcoat-checkbox__checkmark"></div>
Disabled
</label></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-checkbox__checkmark {
- height: 1rem;
-}
-
-input[type="checkbox"] {
- height: 1rem;
- width: 1rem;
- margin-top: 0;
- margin-right: -1rem;
- margin-bottom: -1rem;
- margin-left: 0;
-}
-
-input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
- opacity: 1;
-}
-
-.topcoat-checkbox {
- line-height: 1rem;
-}
-
-.topcoat-checkbox__checkmark:before {
- width: 1rem;
- height: 1rem;
- background: #595b5b;
- border: 1px solid #303233;
- border-radius: 3px;
- box-shadow: inset 0 1px #727373;
-}
-
-.topcoat-checkbox__checkmark {
- width: 1rem;
- height: 1rem;
-}
-
-.topcoat-checkbox__checkmark:after {
- top: 2px;
- left: 1px;
- opacity: 0;
- width: 14px;
- height: 4px;
- background: transparent;
- border: 7px solid #fff;
- border-width: 3px;
- border-top: none;
- border-right: none;
- border-radius: 1px;
- -webkit-transform: rotate(-50deg);
- -ms-transform: rotate(-50deg);
- transform: rotate(-50deg);
-}
-
-input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
- border: 1px solid #0940fd;
- box-shadow: 0 0 0 2px #6fb5f1;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.button,
-.topcoat-icon-button,
-.topcoat-icon-button--quiet,
-.topcoat-icon-button--large,
-.topcoat-icon-button--large--quiet {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- text-decoration: none;
-}
-
-.button--quiet {
- background: transparent;
- border: 1px solid transparent;
- box-shadow: none;
-}
-
-.button--disabled,
-.topcoat-icon-button:disabled,
-.topcoat-icon-button--quiet:disabled,
-.topcoat-icon-button--large:disabled,
-.topcoat-icon-button--large--quiet:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="icon-button" class="component">
- <header>
- <h2>Icon Button</h2>
- </header>
- <section class="component"><button class="topcoat-icon-button">
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button" disabled>
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-icon-button">
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button" disabled>
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-icon-button,
-.topcoat-icon-button--quiet,
-.topcoat-icon-button--large,
-.topcoat-icon-button--large--quiet {
- padding: 0 0.25rem;
- line-height: 1.313rem;
- letter-spacing: 0;
- color: #c6c8c8;
- text-shadow: 0 -1px rgba(0,0,0,0.69);
- vertical-align: baseline;
- background-color: #595b5b;
- box-shadow: inset 0 1px #727373;
- border: 1px solid #303233;
- border-radius: 4px;
-}
-
-.topcoat-icon-button:hover,
-.topcoat-icon-button--quiet:hover,
-.topcoat-icon-button--large:hover,
-.topcoat-icon-button--large--quiet:hover {
- background-color: #646666;
-}
-
-.topcoat-icon-button:active {
- background-color: #404141;
- box-shadow: inset 0 1px rgba(0,0,0,0.18);
-}
-
-.topcoat-icon-button:focus,
-.topcoat-icon-button--quiet:focus,
-.topcoat-icon-button--quiet:hover:focus,
-.topcoat-icon-button--large:focus,
-.topcoat-icon-button--large--quiet:focus,
-.topcoat-icon-button--large--quiet:hover:focus {
- border: 1px solid #0940fd;
- box-shadow: 0 0 0 2px #6fb5f1;
- outline: 0;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="quiet-iconbutton" class="component">
- <header>
- <h2>Quiet Icon Button</h2>
- </header>
- <section class="component"><button class="topcoat-icon-button--quiet">
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--quiet" disabled>
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-icon-button--quiet">
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--quiet" disabled>
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-icon-button--quiet {
- background: transparent;
- border: 1px solid transparent;
- box-shadow: none;
-}
-
-.topcoat-icon-button--quiet:hover,
-.topcoat-icon-button--large--quiet:hover {
- text-shadow: 0 -1px rgba(0,0,0,0.69);
- border: 1px solid #303233;
- box-shadow: inset 0 1px #727373;
-}
-
-.topcoat-icon-button--quiet:active,
-.topcoat-icon-button--large--quiet:active {
- color: #c6c8c8;
- text-shadow: 0 -1px rgba(0,0,0,0.69);
- background-color: #404141;
- border: 1px solid #303233;
- box-shadow: inset 0 1px rgba(0,0,0,0.18);
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="large-iconbutton" class="component">
- <header>
- <h2>Large Icon Button</h2>
- </header>
- <section class="component"><button class="topcoat-icon-button--large">
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--large" disabled>
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-icon-button--large">
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--large" disabled>
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-icon-button--large,
-.topcoat-icon-button--large--quiet {
- width: 1.688rem;
- height: 1.688rem;
- line-height: 1.688rem;
-}
-
-.topcoat-icon-button--large:active {
- background-color: #404141;
- box-shadow: inset 0 1px rgba(0,0,0,0.18);
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="large-quieticon button" class="component">
- <header>
- <h2>Large Quiet Icon Button</h2>
- </header>
- <section class="component"><button class="topcoat-icon-button--large--quiet">
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--large--quiet" disabled>
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><button class="topcoat-icon-button--large--quiet">
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--large--quiet" disabled>
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-icon-button--large--quiet {
- background: transparent;
- border: 1px solid transparent;
- box-shadow: none;
-}
-
-.topcoat-icon,
-.topcoat-icon--large {
- position: relative;
- display: inline-block;
- vertical-align: top;
- overflow: hidden;
- width: 0.81406rem;
- height: 0.81406rem;
- vertical-align: middle;
- top: -1px;
-}
-
-.topcoat-icon--large {
- width: 1.06344rem;
- height: 1.06344rem;
- top: -2px;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.input {
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- vertical-align: top;
- outline: none;
-}
-
-.input:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.list {
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-}
-
-.list__header {
- margin: 0;
-}
-
-.list__container {
- padding: 0;
- margin: 0;
- list-style-type: none;
-}
-
-.list__item {
- margin: 0;
- padding: 0;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.navigation-bar {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- white-space: nowrap;
- overflow: hidden;
- word-spacing: 0;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.navigation-bar__item {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- position: relative;
- display: inline-block;
- vertical-align: top;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
-}
-
-.navigation-bar__title {
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-
-/*
-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.
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.notification {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- text-decoration: none;
-}
-
-/*
-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.
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.notification,
-.topcoat-notification {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- text-decoration: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="notification" class="component">
- <header>
- <h2>Notification</h2>
- </header>
- <section class="component"><span class="topcoat-notification">1</span></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><span class="topcoat-notification">1</span></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-notification {
- padding: 0.15em 0.5em 0.2em;
- border-radius: 2px;
- background-color: #ec514e;
- color: #fff;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-input[type="radio"] {
- position: absolute;
- overflow: hidden;
- padding: 0;
- border: 0;
- opacity: 0.001;
- z-index: 1;
- vertical-align: top;
- outline: none;
-}
-
-.radio-button {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- position: relative;
- display: inline-block;
- vertical-align: top;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.radio-button__label {
- position: relative;
- display: inline-block;
- vertical-align: top;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.radio-button:before,
-.radio-button:after {
- content: '';
- position: absolute;
- border-radius: 100%;
-}
-
-.radio-button:after {
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-
-.radio-button:before {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
-}
-
-.radio-button--disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-input[type="radio"] {
- position: absolute;
- overflow: hidden;
- padding: 0;
- border: 0;
- opacity: 0.001;
- z-index: 1;
- vertical-align: top;
- outline: none;
-}
-
-.radio-button,
-.topcoat-radio-button__checkmark {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- position: relative;
- display: inline-block;
- vertical-align: top;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.radio-button__label,
-.topcoat-radio-button {
- position: relative;
- display: inline-block;
- vertical-align: top;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.radio-button:before,
-.radio-button:after,
-.topcoat-radio-button__checkmark:before,
-.topcoat-radio-button__checkmark:after {
- content: '';
- position: absolute;
- border-radius: 100%;
-}
-
-.radio-button:after,
-.topcoat-radio-button__checkmark:after {
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-
-.radio-button:before,
-.topcoat-radio-button__checkmark:before {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
-}
-
-.radio-button--disabled,
-input[type="radio"]:disabled + .topcoat-radio-button__checkmark {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="radio-button" class="component">
- <header>
- <h2>Radio Button</h2>
- </header>
- <section class="component"><!-- NO LABEL -->
<label class="topcoat-radio-button">
<input type="radio" name="topcoat">
<div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<br>
<!-- LEFT LABEL -->
<label class="topcoat-radio-button">
Left label
<input type="radio" name="topcoat">
<div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<br>
<!-- RIGHT LABEL -->
<label class="topcoat-radio-button">
<input type="radio" name="topcoat">
<div class="topcoat-radio-button__checkmark"></div>
Right label
</label>
<br>
<br>
<!-- DISABLED -->
<label class="topcoat-radio-button">
<input type="radio" name="topcoat" Disabled>
<div class="topcoat-radio-button__checkmark"></div>
Disabled
</label></section>
- <section class="examples">
- <h4>Examples</h4>
- <ul>
- <li><a href="http://codepen.io/Topcoat/pen/HDcJj">Mobile Radio Button</a></li>
- </ul>
- </section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><!-- NO LABEL -->
<label class="topcoat-radio-button">
<input type="radio" name="topcoat">
<div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<br>
<!-- LEFT LABEL -->
<label class="topcoat-radio-button">
Left label
<input type="radio" name="topcoat">
<div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<br>
<!-- RIGHT LABEL -->
<label class="topcoat-radio-button">
<input type="radio" name="topcoat">
<div class="topcoat-radio-button__checkmark"></div>
Right label
</label>
<br>
<br>
<!-- DISABLED -->
<label class="topcoat-radio-button">
<input type="radio" name="topcoat" Dis
abled>
<div class="topcoat-radio-button__checkmark"></div>
Disabled
</label></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-input[type="radio"] {
- height: 1.063rem;
- width: 1.063rem;
- margin-top: 0;
- margin-right: -1.063rem;
- margin-bottom: -1.063rem;
- margin-left: 0;
-}
-
-input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
- opacity: 1;
-}
-
-.topcoat-radio-button {
- color: #c6c8c8;
- line-height: 1.063rem;
-}
-
-.topcoat-radio-button__checkmark:before {
- width: 1.063rem;
- height: 1.063rem;
- background: #595b5b;
- border: 1px solid #303233;
- box-shadow: inset 0 1px #727373;
-}
-
-.topcoat-radio-button__checkmark {
- position: relative;
- width: 1.063rem;
- height: 1.063rem;
-}
-
-.topcoat-radio-button__checkmark:after {
- opacity: 0;
- width: 0.313rem;
- height: 0.313rem;
- background: #fff;
- border: 1px solid rgba(255,255,255,0.1);
- box-shadow: 0 1px rgba(255,255,255,0.5);
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
- top: 0.313rem;
- left: 0.313rem;
-}
-
-input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
- border: 1px solid #0940fd;
- box-shadow: 0 0 0 2px #6fb5f1;
-}
-
-/*
-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.
-*/
-
-/*
-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.
-*/
-
-.range {
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- vertical-align: top;
- outline: none;
- -webkit-appearance: none;
-}
-
-.range__thumb {
- cursor: pointer;
-}
-
-.range__thumb--webkit {
- cursor: pointer;
- -webkit-appearance: none;
-}
-
-.range:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-/*
-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.
-*/
-
-/*
-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.
-*/
-
-.range,
-.topcoat-range {
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- vertical-align: top;
- outline: none;
- -webkit-appearance: none;
-}
-
-.range__thumb,
-.topcoat-range::-moz-range-thumb {
- cursor: pointer;
-}
-
-.range__thumb--webkit,
-.topcoat-range::-webkit-slider-thumb {
- cursor: pointer;
- -webkit-appearance: none;
-}
-
-.range:disabled,
-.topcoat-range:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="range" class="component">
- <header>
- <h2>Range</h2>
- </header>
- <section class="component"><input type="range" class="topcoat-range">
<input type="range" class="topcoat-range" disabled></section>
- <section class="examples">
- <h4>Examples</h4>
- <ul>
- <li><a href="http://codepen.io/Topcoat/pen/BskEn">mobile range</a></li>
- </ul>
- </section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><input type="range" class="topcoat-range">
<input type="range" class="topcoat-range" disabled></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-range {
- border-radius: 4px;
- border: 1px solid #303233;
- background-color: #424546;
- height: 0.5rem;
- border-radius: 15px;
-}
-
-.topcoat-range::-moz-range-track {
- border-radius: 4px;
- border: 1px solid #303233;
- background-color: #424546;
- height: 0.5rem;
- border-radius: 15px;
-}
-
-.topcoat-range::-webkit-slider-thumb {
- height: 1.313rem;
- width: 0.75rem;
- background-color: #595b5b;
- border: 1px solid #303233;
- border-radius: 4px;
- box-shadow: inset 0 1px #727373;
-}
-
-.topcoat-range::-moz-range-thumb {
- height: 1.313rem;
- width: 0.75rem;
- background-color: #595b5b;
- border: 1px solid #303233;
- border-radius: 4px;
- box-shadow: inset 0 1px #727373;
-}
-
-.topcoat-range:focus::-webkit-slider-thumb {
- border: 1px solid #0940fd;
- box-shadow: 0 0 0 2px #6fb5f1;
-}
-
-.topcoat-range:focus::-moz-range-thumb {
- border: 1px solid #0940fd;
- box-shadow: 0 0 0 2px #6fb5f1;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.search-input {
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- vertical-align: top;
- outline: none;
- -webkit-appearance: none;
-}
-
-input[type="search"]::-webkit-search-cancel-button {
- -webkit-appearance: none;
-}
-
-.search-input:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.search-input,
-.topcoat-search-input,
-.topcoat-search-input--large {
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- vertical-align: top;
- outline: none;
- -webkit-appearance: none;
-}
-
-input[type="search"]::-webkit-search-cancel-button {
- -webkit-appearance: none;
-}
-
-.search-input:disabled,
-.topcoat-search-input:disabled,
-.topcoat-search-input--large:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="search-input" class="component">
- <header>
- <h2>Search Input</h2>
- </header>
- <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input">
<input type="search" value="" placeholder="search" class="topcoat-search-input" disabled></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><input type="search" value="" placeholder="search" class="topcoat-search-input">
<input type="search" value="" placeholder="search" class="topcoat-search-input" disabled></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-search-input,
-.topcoat-search-input--large {
- line-height: 1.313rem;
- font-size: 12px;
- border: 1px solid #303233;
- background-color: #404141;
- box-shadow: inset 0 1px rgba(0,0,0,0.18);
- color: #c6c8c8;
- padding: 0 0 0 1.3rem;
- border-radius: 15px;
- background-image: url("../img/search.svg");
- background-position: 1em center;
- background-repeat: no-repeat;
- background-size: 12px;
-}
-
-.topcoat-search-input:focus,
-.topcoat-search-input--large:focus {
- background-image: url("../img/search_dark.svg");
- background-color: #646666;
- color: #fff;
- border: 1px solid #0940fd;
- box-shadow: 0 0 0 2px #6fb5f1;
-}
-
-.topcoat-search-input::-webkit-search-cancel-button,
-.topcoat-search-input::-webkit-search-decoration,
-.topcoat-search-input--large::-webkit-search-cancel-button,
-.topcoat-search-input--large::-webkit-search-decoration {
- margin-right: 5px;
-}
-
-.topcoat-search-input:focus::-webkit-input-placeholder,
-.topcoat-search-input:focus::-webkit-input-placeholder {
- color: #c6c8c8;
-}
-
-.topcoat-search-input:disabled::-webkit-input-placeholder {
- color: #fff;
-}
-
-.topcoat-search-input:disabled::-moz-placeholder {
- color: #fff;
-}
-
-.topcoat-search-input:disabled:-ms-input-placeholder {
- color: #fff;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="large-searchinput" class="component">
- <header>
- <h2>Large Search Input</h2>
- </header>
- <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input--large">
<input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><input type="search" value="" placeholder="search" class="topcoat-search-input--large">
<input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-search-input--large {
- line-height: 1.688rem;
- font-size: 0.875rem;
- font-weight: 400;
- padding: 0 0 0 1.8rem;
- border-radius: 25px;
- background-position: 1.2em center;
- background-size: 0.875rem;
-}
-
-.topcoat-search-input--large:disabled {
- color: #fff;
-}
-
-.topcoat-search-input--large:disabled::-webkit-input-placeholder {
- color: #fff;
-}
-
-.topcoat-search-input--large:disabled::-moz-placeholder {
- color: #fff;
-}
-
-.topcoat-search-input--large:disabled:-ms-input-placeholder {
- color: #fff;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.switch {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
-}
-
-.switch__input {
- position: absolute;
- overflow: hidden;
- padding: 0;
- border: 0;
- opacity: 0.001;
- z-index: 1;
- vertical-align: top;
- outline: none;
-}
-
-.switch__toggle {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.switch__toggle:before,
-.switch__toggle:after {
- content: '';
- position: absolute;
- z-index: -1;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
-}
-
-.switch--disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.switch,
-.topcoat-switch {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
-}
-
-.switch__input,
-.topcoat-switch__input {
- position: absolute;
- overflow: hidden;
- padding: 0;
- border: 0;
- opacity: 0.001;
- z-index: 1;
- vertical-align: top;
- outline: none;
-}
-
-.switch__toggle,
-.topcoat-switch__toggle {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.switch__toggle:before,
-.switch__toggle:after,
-.topcoat-switch__toggle:before,
-.topcoat-switch__toggle:after {
- content: '';
- position: absolute;
- z-index: -1;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
-}
-
-.switch--disabled,
-.topcoat-switch__input:disabled + .topcoat-switch__toggle {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="switch" class="component">
- <header>
- <h2>Switch</h2>
- </header>
- <section class="component"><label class="topcoat-switch">
<input type="checkbox" class="topcoat-switch__input">
<div class="topcoat-switch__toggle"></div>
</label>
<br>
<br>
<label class="topcoat-switch">
<input type="checkbox" class="topcoat-switch__input" checked>
<div class="topcoat-switch__toggle"></div>
</label>
<br>
<br>
<label class="topcoat-switch">
<input type="checkbox" class="topcoat-switch__input" disabled>
<div class="topcoat-switch__toggle"></div>
</label></section>
- <section class="examples">
- <h4>Examples</h4>
- <ul>
- <li><a href="http://codepen.io/Topcoat/pen/upxds">mobile switch</a></li>
- </ul>
- </section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><label class="topcoat-switch">
<input type="checkbox" class="topcoat-switch__input">
<div class="topcoat-switch__toggle"></div>
</label>
<br>
<br>
<label class="topcoat-switch">
<input type="checkbox" class="topcoat-switch__input" checked>
<div class="topcoat-switch__toggle"></div>
</label>
<br>
<br>
<label class="topcoat-switch">
<input type="checkbox" class="topcoat-switch__input" disabled>
<div class="topcoat-switch__toggle"></div>
</label></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-switch {
- font-size: 12px;
- padding: 0 0.563rem;
- border-radius: 4px;
- border: 1px solid #303233;
- overflow: hidden;
- width: 3.5rem;
-}
-
-.topcoat-switch__toggle:before,
-.topcoat-switch__toggle:after {
- top: -1px;
- width: 2.6rem;
-}
-
-.topcoat-switch__toggle:before {
- content: 'ON';
- color: #5dc1ff;
- background-color: #404141;
- right: 0.8rem;
- padding-left: 0.75rem;
-}
-
-.topcoat-switch__toggle {
- line-height: 1.313rem;
- height: 1.313rem;
- width: 1rem;
- border-radius: 4px;
- color: #c6c8c8;
- text-shadow: 0 -1px rgba(0,0,0,0.69);
- background-color: #595b5b;
- border: 1px solid #303233;
- margin-left: -0.6rem;
- margin-bottom: -1px;
- margin-top: -1px;
- box-shadow: inset 0 1px #727373;
- -webkit-transition: margin-left 0.05s ease-in-out;
- transition: margin-left 0.05s ease-in-out;
-}
-
-.topcoat-switch__toggle:after {
- content: 'OFF';
- background-color: #404141;
- left: 0.8rem;
- padding-left: 0.6rem;
-}
-
-.topcoat-switch__input:checked + .topcoat-switch__toggle {
- margin-left: 1.85rem;
-}
-
-.topcoat-switch__input:focus + .topcoat-switch__toggle {
- border: 1px solid #0940fd;
- box-shadow: 0 0 0 2px #6fb5f1;
-}
-
-.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
-.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
- background: transparent;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.button,
-.topcoat-tab-bar__button {
- position: relative;
- display: inline-block;
- vertical-align: top;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- text-decoration: none;
-}
-
-.button--quiet {
- background: transparent;
- border: 1px solid transparent;
- box-shadow: none;
-}
-
-.button--disabled,
-.topcoat-tab-bar__button:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-
-.button-bar,
-.topcoat-tab-bar {
- display: table;
- table-layout: fixed;
- white-space: nowrap;
- margin: 0;
- padding: 0;
-}
-
-.button-bar__item,
-.topcoat-tab-bar__item {
- display: table-cell;
- width: auto;
- border-radius: 0;
-}
-
-.button-bar__item > input,
-.topcoat-tab-bar__item > input {
- position: absolute;
- overflow: hidden;
- padding: 0;
- border: 0;
- opacity: 0.001;
- z-index: 1;
- vertical-align: top;
- outline: none;
-}
-
-.button-bar__button {
- border-radius: inherit;
-}
-
-.button-bar__item:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="tab-bar" class="component">
- <header>
- <h2>Tab Bar</h2>
- </header>
- <section class="component"><div class="topcoat-tab-bar">
<label class="topcoat-tab-bar__item">
<input type="radio" name="tab-bar">
<button class="topcoat-tab-bar__button">One</button>
</label>
<label class="topcoat-tab-bar__item">
<input type="radio" name="tab-bar">
<button class="topcoat-tab-bar__button">Two</button>
</label>
<label class="topcoat-tab-bar__item">
<input type="radio" name="tab-bar">
<button class="topcoat-tab-bar__button">Three</button>
</label>
</div></section>
- <section class="examples">
- <h4>Examples</h4>
- <ul>
- <li><a href="http://codepen.io/Topcoat/pen/rJICF">mobile tab bar</a></li>
- </ul>
- </section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><div class="topcoat-tab-bar">
<label class="topcoat-tab-bar__item">
<input type="radio" name="tab-bar">
<button class="topcoat-tab-bar__button">One</button>
</label>
<label class="topcoat-tab-bar__item">
<input type="radio" name="tab-bar">
<button class="topcoat-tab-bar__button">Two</button>
</label>
<label class="topcoat-tab-bar__item">
<input type="radio" name="tab-bar">
<button class="topcoat-tab-bar__button">Three</button>
</label>
</div></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.topcoat-tab-bar__button {
- padding: 0 0.563rem;
- height: 1.313rem;
- line-height: 1.313rem;
- letter-spacing: 0;
- color: #c6c8c8;
- text-shadow: 0 -1px rgba(0,0,0,0.69);
- vertical-align: top;
- background-color: #595b5b;
- box-shadow: inset 0 1px #727373;
- border-top: 1px solid #303233;
-}
-
-.topcoat-tab-bar__button:active,
-.topcoat-tab-bar__button--large:active,
-:checked + .topcoat-tab-bar__button {
- color: #5dc1ff;
- background-color: #404141;
- box-shadow: inset 0 0 2px #313231;
-}
-
-.topcoat-tab-bar__button:focus,
-.topcoat-tab-bar__button--large:focus {
- z-index: 1;
-}
-
-/**
-*
-* 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.
-*
-*/
-
-/**
-*
-* 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.
-*
-*/
-
-.input,
-.topcoat-text-input,
-.topcoat-text-input--large {
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- background: transparent;
- border: none;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background-clip: padding-box;
- vertical-align: top;
- outline: none;
-}
-
-.input:disabled,
-.topcoat-text-input:disabled,
-.topcoat-text-input--large:disabled {
- opacity: 0.3;
- cursor: default;
- pointer-events: none;
-}
-</code></pre>
- </div>
- </section>
- </footer>
- </article>
- <article id="text-input" class="component">
- <header>
- <h2>Text input</h2>
- </header>
- <section class="component"><input type="text" class="topcoat-text-input" placeholder="text" value="">
<br>
<br>
<input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>
<br>
<br>
<input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"></section>
- <footer>
- <div class="showcode"><a href="#">Show code snippets</a></div>
- <section class="code">
- <div>
- <h3>HTML</h3>
- <pre class="html"><code data-language="html"><input type="text" class="topcoat-text-input" placeholder="text" value="">
<br>
<br>
<input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>
<br>
<br>
<input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"></code></pre>
- </div>
- <div>
- <h3>CSS</h3>
- <pre class="css"><code data-language="css">
-.to
<TRUNCATED>