<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form id="form-edit-icon" class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Icon Info</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-5">
<input
id="name"
name="name"
type="text"
placeholder="untitled.svg"
class="form-control input-md"
required=""
/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="id">ID</label>
<div class="col-md-5">
<input
id="id"
name="id"
type="text"
placeholder="1234-5678-ABCD"
class="form-control input-md"
/>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="tags">Tags</label>
<div class="col-md-4">
<textarea class="form-control" id="tags" name="tags"></textarea>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="iconset">Icon Set</label>
<div class="col-md-5">
<select id="iconset" name="iconset" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>Meta Data</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="date">Date</label>
<div class="col-md-5">
<input
id="date"
name="date"
type="text"
placeholder=""
class="form-control input-md"
/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="type">Type</label>
<div class="col-md-5">
<input
id="type"
name="type"
type="text"
placeholder="SVG"
class="form-control input-md"
/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="height">Height</label>
<div class="col-md-2">
<input
id="height"
name="height"
type="text"
placeholder=""
class="form-control input-md"
/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="width">Width</label>
<div class="col-md-2">
<input
id="width"
name="width"
type="text"
placeholder=""
class="form-control input-md"
/>
</div>
</div>
</fieldset>
<fieldset>
<legend>License</legend>
<!-- Button Drop Down -->
<div class="form-group">
<label class="col-md-4 control-label" for="license">License</label>
<div class="col-md-5">
<div class="input-group">
<input
id="license"
name="license"
class="form-control"
placeholder=""
type="text"
/>
<div class="input-group-btn">
<button
type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
>
Open
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Option one</a></li>
<li><a href="#">Option two</a></li>
<li><a href="#">Option three</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="save">Save</label>
<div class="col-md-4">
<button id="save" name="save" class="btn btn-primary">Save</button>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="close">Close</label>
<div class="col-md-4">
<button id="close" name="close" class="btn btn-info">Close</button>
</div>
</div>
</fieldset>
</form>
/**
*
* 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-bar {
display: table;
table-layout: fixed;
white-space: nowrap;
margin: 0;
padding: 0;
}
.button-bar__item {
display: table-cell;
width: auto;
border-radius: 0;
}
.button-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;
}
/**
*
* 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,
.topcoat-button-bar__button,
.topcoat-button-bar__button--large {
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,
.topcoat-button-bar__button:disabled,
.topcoat-button-bar__button--large:disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta,
.topcoat-button-bar__button,
.topcoat-button-bar__button--large {
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 #737373;
border: 1px solid #333434;
border-radius: 4px;
}
.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover,
.topcoat-button-bar__button:hover,
.topcoat-button-bar__button--large:hover {
background-color: #626465;
}
.topcoat-button:focus,
.topcoat-button--quiet:focus,
.topcoat-button--quiet:hover:focus,
.topcoat-button--large:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--large--quiet:hover:focus,
.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus,
.topcoat-button-bar__button:focus,
.topcoat-button-bar__button--large:focus {
border: 1px solid #0036ff;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
outline: 0;
}
.topcoat-button:active,
.topcoat-button--large:active,
.topcoat-button-bar__button:active,
.topcoat-button-bar__button--large:active,
:checked + .topcoat-button-bar__button {
border: 1px solid #333434;
background-color: #3f4041;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
}
.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 #333434;
box-shadow: inset 0 1px #737373;
}
.topcoat-button--quiet:active,
.topcoat-button--quiet:focus:active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet:focus:active {
color: #c6c8c8;
text-shadow: 0 -1px rgba(0,0,0,0.69);
background-color: #3f4041;
border: 1px solid #333434;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
}
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button-bar__button--large {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.688rem;
padding: 0 0.875rem;
}
.topcoat-button--large--quiet {
background: transparent;
border: 1px solid transparent;
box-shadow: none;
}
.topcoat-button--cta,
.topcoat-button--large--cta {
border: 1px solid #134f7f;
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: #4ca1e4;
}
.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
background-color: #1e7dc8;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-button--large--cta {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.688rem;
padding: 0 0.875rem;
}
.button-bar,
.topcoat-button-bar {
display: table;
table-layout: fixed;
white-space: nowrap;
margin: 0;
padding: 0;
}
.button-bar__item,
.topcoat-button-bar__item {
display: table-cell;
width: auto;
border-radius: 0;
}
.button-bar__item > input,
.topcoat-button-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;
}
/* topdoc
name: Button Bar
description: Component of grouped buttons
modifiers:
:disabled: Disabled state
markup:
<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>
examples:
mobile button bar: http://codepen.io/Topcoat/pen/kdKyg
tags:
- desktop
- light
- dark
- mobile
- button
- group
- bar
*/
.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;
}
/* topdoc
name: Large Button Bar
description: A button bar, only larger
modifiers:
:disabled: Disabled state
markup:
<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>
tags:
- desktop
- light
- dark
- mobile
- button
- group
- bar
- large
*/
.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;
}
/* topdoc
name: Button
description: A simple button
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<button class="topcoat-button">Button</button>
<button class="topcoat-button" disabled>Button</button>
examples:
mobile button: http://codepen.io/Topcoat/pen/DpKtf
tags:
- desktop
- light
- mobile
- button
*/
.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 #737373;
border: 1px solid #333434;
border-radius: 4px;
}
.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover {
background-color: #626465;
}
.topcoat-button:focus,
.topcoat-button--quiet:focus,
.topcoat-button--quiet:hover:focus,
.topcoat-button--large:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--large--quiet:hover:focus,
.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus {
border: 1px solid #0036ff;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
outline: 0;
}
.topcoat-button:active,
.topcoat-button--large:active {
border: 1px solid #333434;
background-color: #3f4041;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
}
/* topdoc
name: Quiet Button
description: A simple, yet quiet button
modifiers:
:active: Quiet button active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<button class="topcoat-button--quiet">Button</button>
<button class="topcoat-button--quiet" disabled>Button</button>
tags:
- desktop
- light
- mobile
- button
- quiet
*/
.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 #333434;
box-shadow: inset 0 1px #737373;
}
.topcoat-button--quiet:active,
.topcoat-button--quiet:focus:active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet:focus:active {
color: #c6c8c8;
text-shadow: 0 -1px rgba(0,0,0,0.69);
background-color: #3f4041;
border: 1px solid #333434;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
}
/* topdoc
name: Large Button
description: A big ol button
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<button class="topcoat-button--large" >Button</button>
<button class="topcoat-button--large" disabled>Button</button>
tags:
- desktop
- light
- mobile
- button
- large
*/
.topcoat-button--large,
.topcoat-button--large--quiet {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.688rem;
padding: 0 0.875rem;
}
/* topdoc
name: Large Quiet Button
description: A large, yet quiet button
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<button class="topcoat-button--large--quiet" >Button</button>
<button class="topcoat-button--large--quiet" disabled>Button</button>
tags:
- desktop
- light
- mobile
- button
- large
- quiet
*/
.topcoat-button--large--quiet {
background: transparent;
border: 1px solid transparent;
box-shadow: none;
}
/* topdoc
name: Call To Action Button
description: A CALL TO ARMS, er, ACTION!
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<button class="topcoat-button--cta" >Button</button>
<button class="topcoat-button--cta" disabled>Button</button>
tags:
- desktop
- light
- mobile
- button
- call to action
*/
.topcoat-button--cta,
.topcoat-button--large--cta {
border: 1px solid #134f7f;
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: #4ca1e4;
}
.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
background-color: #1e7dc8;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
/* topdoc
name: Large Call To Action Button
description: Like call to action, but bigger
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<button class="topcoat-button--large--cta" >Button</button>
<button class="topcoat-button--large--cta" disabled>Button</button>
tags:
- desktop
- light
- mobile
- button
- large
- call to action
*/
.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;
}
/* topdoc
name: Checkbox
description: Default skin for Topcoat checkbox
modifiers:
:focus: Focus state
:disabled: Disabled state
markup:
<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>
examples:
mobile checkbox: http://codepen.io/Topcoat/pen/piHcs
tags:
- desktop
- light
- mobile
- checkbox
*/
.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 #333434;
border-radius: 3px;
box-shadow: inset 0 1px #737373;
}
.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 #c6c8c8;
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 #0036ff;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}
input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {
border: 1px solid #333434;
background-color: #3f4041;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
}
input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {
border: 1px solid #333434;
background: #595b5b;
box-shadow: inset 0 1px #737373;
}
/**
*
* 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;
}
/* topdoc
name: Icon Button
description: Like button, but it has an icon.
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<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>
tags:
- desktop
- light
- mobile
- button
- icon
*/
.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 #737373;
border: 1px solid #333434;
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: #626465;
}
.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 #0036ff;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
outline: 0;
}
.topcoat-icon-button:active,
.topcoat-icon-button--large:active {
border: 1px solid #333434;
background-color: #3f4041;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
}
/* topdoc
name: Quiet Icon Button
description: Like quiet button, but it has an icon.
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<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>
tags:
- desktop
- light
- mobile
- button
- icon
- quiet
*/
.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 #333434;
box-shadow: inset 0 1px #737373;
}
.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet:focus:active,
.topcoat-icon-button--large--quiet:active,
.topcoat-icon-button--large--quiet:focus:active {
color: #c6c8c8;
text-shadow: 0 -1px rgba(0,0,0,0.69);
background-color: #3f4041;
border: 1px solid #333434;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
}
/* topdoc
name: Large Icon Button
description: Like large button, but it has an icon.
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<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>
tags:
- desktop
- light
- mobile
- button
- icon
- large
*/
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
width: 1.688rem;
height: 1.688rem;
line-height: 1.688rem;
}
/* topdoc
name: Large Quiet Icon Button
description: Like large button, but it has an icon and this one is quiet.
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
markup:
<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>
tags:
- desktop
- light
- mobile
- button
- icon
- large
- quiet
*/
.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.
*
*/
.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;
}
/* topdoc
name: Notification
description: Notification badge
markup:
<span class="topcoat-notification">1</span>
tags:
- desktop
- light
- mobile
- notification
*/
.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;
}
/* topdoc
name: Radio Button
description: A button that can play music, but usually just plays ads.
modifiers:
markup:
<!-- 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>
examples:
Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj
tags:
- desktop
- light
- mobile
- Radio
*/
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 #333434;
box-shadow: inset 0 1px #737373;
}
.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: #c6c8c8;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 1px rgba(255,255,255,0.1);
-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 #0036ff;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}
input[type="radio"]:active + .topcoat-radio-button__checkmark:before {
border: 1px solid #333434;
background-color: #3f4041;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
}
input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {
border: 1px solid #333434;
background: #595b5b;
box-shadow: inset 0 1px #737373;
}
/*
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;
}
/* topdoc
name: Range
description: Range input
modifiers:
:active: Active state
:disabled: Disabled state
:hover: Hover state
:focus: Focused
markup:
<input type="range" class="topcoat-range">
<input type="range" class="topcoat-range" disabled>
examples:
mobile range: http://codepen.io/Topcoat/pen/BskEn
tags:
- desktop
- mobile
- range
*/
.topcoat-range {
border-radius: 4px;
border: 1px solid #333434;
background-color: #454646;
height: 0.5rem;
border-radius: 15px;
}
.topcoat-range::-moz-range-track {
border-radius: 4px;
border: 1px solid #333434;
background-color: #454646;
height: 0.5rem;
border-radius: 15px;
}
.topcoat-range::-webkit-slider-thumb {
height: 1.313rem;
width: 0.75rem;
background-color: #595b5b;
border: 1px solid #333434;
border-radius: 4px;
box-shadow: inset 0 1px #737373;
}
.topcoat-range::-moz-range-thumb {
height: 1.313rem;
width: 0.75rem;
background-color: #595b5b;
border: 1px solid #333434;
border-radius: 4px;
box-shadow: inset 0 1px #737373;
}
.topcoat-range:focus::-webkit-slider-thumb {
border: 1px solid #0036ff;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}
.topcoat-range:focus::-moz-range-thumb {
border: 1px solid #0036ff;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}
.topcoat-range:active::-webkit-slider-thumb {
border: 1px solid #333434;
box-shadow: inset 0 1px #737373;
}
.topcoat-range:active::-moz-range-thumb {
border: 1px solid #333434;
box-shadow: inset 0 1px #737373;
}
/**
*
* 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;
}
/* topdoc
name: Search Input
description: A text input designed for searching.
modifiers:
:disabled: Disabled state
markup:
<input type="search" value="" placeholder="search" class="topcoat-search-input">
<input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>
tags:
- desktop
- light
- mobile
- text
- input
- search
- form
*/
.topcoat-search-input,
.topcoat-search-input--large {
line-height: 1.313rem;
height: 1.313rem;
font-size: 12px;
border: 1px solid #333434;
background-color: #454646;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);
color: #c6c8c8;
padding: 0 0 0 1.3rem;
border-radius: 15px;
background-image: url("../img/search.svg");
background-position: 1rem center;
background-repeat: no-repeat;
background-size: 12px;
}
.topcoat-search-input:focus,
.topcoat-search-input--large:focus {
background-color: #595b5b;
color: #fff;
border: 1px solid #0036ff;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), 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;
}
/* topdoc
name: Large Search Input
description: A large text input designed for searching.
modifiers:
:disabled: Disabled state
markup:
<input type="search" value="" placeholder="search" class="topcoat-search-input--large">
<input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>
tags:
- desktop
- light
- mobile
- text
- input
- search
- form
- large
*/
.topcoat-search-input--large {
line-height: 1.688rem;
height: 1.688rem;
font-size: 0.875rem;
font-weight: 400;
padding: 0 0 0 1.8rem;
border-radius: 25px;
background-position: 1.2rem 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;
}
/* topdoc
name: Switch
description: Default skin for Topcoat switch
modifiers:
:focus: Focus state
:disabled: Disabled state
markup:
<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>
examples:
mobile switch: http://codepen.io/Topcoat/pen/upxds
tags:
- desktop
- light
- mobile
- switch
*/
.topcoat-switch {
font-size: 12px;
padding: 0 0.563rem;
border-radius: 4px;
border: 1px solid #333434;
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: #288edf;
background-color: #3f4041;
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 #333434;
margin-left: -0.6rem;
margin-bottom: -1px;
margin-top: -1px;
box-shadow: inset 0 1px #737373;
-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: #3f4041;
left: 0.8rem;
padding-left: 0.6rem;
}
.topcoat-switch__input:checked + .topcoat-switch__toggle {
margin-left: 1.85rem;
}
.topcoat-switch__input:active + .topcoat-switch__toggle {
border: 1px solid #333434;
box-shadow: inset 0 1px #737373;
}
.topcoat-switch__input:focus + .topcoat-switch__toggle {
border: 1px solid #0036ff;
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;
}
/* topdoc
name: Tab Bar
description: Component of tab buttons
modifiers:
:disabled: Disabled state
markup:
<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>
examples:
mobile tab bar: http://codepen.io/Topcoat/pen/rJICF
tags:
- desktop
- light
- dark
- mobile
- tab
- group
- bar
*/
.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 #737373;
border-top: 1px solid #333434;
}
.topcoat-tab-bar__button:active,
.topcoat-tab-bar__button--large:active,
:checked + .topcoat-tab-bar__button {
color: #288edf;
background-color: #3f4041;
box-shadow: inset 0 0 1px rgba(0,0,0,0.05);
}
.topcoat-tab-bar__button:focus,
.topcoat-tab-bar__button--large:focus {
z-index: 1;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
outline: 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.
*
*/
.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;
}
/* topdoc
name: Text input
description: Topdoc text input
modifiers:
:disabled: Disabled state
:focus: Focused
:invalid: Hover state
markup:
<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">
tags:
- desktop
- mobile
- text
- input
*/
.topcoat-text-input,
.topcoat-text-input--large {
line-height: 1.313rem;
font-size: 12px;
letter-spacing: 0;
padding: 0 0.563rem;
border: 1px solid #333434;
border-radius: 4px;
background-color: #454646;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
color: #c6c8c8;
vertical-align: top;
}
.topcoat-text-input:focus,
.topcoat-text-input--large:focus {
background-color: #595b5b;
color: #fff;
border: 1px solid #0036ff;
box-shadow: 0 0 0 2px #6fb5f1;
}
.topcoat-text-input:disabled::-webkit-input-placeholder {
color: #fff;
}
.topcoat-text-input:disabled::-moz-placeholder {
color: #fff;
}
.topcoat-text-input:disabled:-ms-input-placeholder {
color: #fff;
}
.topcoat-text-input:invalid {
border: 1px solid #ec514e;
}
/* topdoc
name: Large Text Input
description: A bigger input, still for text.
modifiers:
:disabled: Disabled state
:focus: Focused
:invalid: Hover state
markup:
<input type="text" class="topcoat-text-input--large" value="" placeholder="text">
<br>
<br>
<input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>
<br>
<br>
<input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">
tags:
- desktop
- light
- mobile
- form
- input
- large
*/
.topcoat-text-input--large {
line-height: 1.688rem;
font-size: 0.875rem;
}
.topcoat-text-input--large:disabled {
color: #fff;
}
.topcoat-text-input--large:disabled::-webkit-input-placeholder {
color: #fff;
}
.topcoat-text-input--large:disabled::-moz-placeholder {
color: #fff;
}
.topcoat-text-input--large:disabled:-ms-input-placeholder {
color: #fff;
}
.topcoat-text-input--large:invalid {
border: 1px solid #ec514e;
}
/**
*
* 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.
*
*/
.textarea {
-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;
vertical-align: top;
resize: none;
outline: none;
}
.textarea: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.
*
*/
.textarea,
.topcoat-textarea,
.topcoat-textarea--large {
-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;
vertical-align: top;
resize: none;
outline: none;
}
.textarea:disabled,
.topcoat-textarea:disabled,
.topcoat-textarea--large:disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
/* topdoc
name: Textarea
description: A whole area, just for text.
modifiers:
:disabled: Disabled state
markup:
<textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>
<br>
<br>
<textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
tags:
- desktop
- light
- mobile
- form
- input
- textarea
*/
.topcoat-textarea,
.topcoat-textarea--large {
padding: 1rem;
font-size: 1rem;
font-weight: 400;
border-radius: 4px;
line-height: 1.313rem;
border: 1px solid #333434;
background-color: #454646;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
color: #c6c8c8;
letter-spacing: 0;
}
.topcoat-textarea:focus,
.topcoat-textarea--large:focus {
background-color: #595b5b;
color: #fff;
border: 1px solid #0036ff;
box-shadow: 0 0 0 2px #6fb5f1;
}
.topcoat-textarea:disabled::-webkit-input-placeholder {
color: #fff;
}
.topcoat-textarea:disabled::-moz-placeholder {
color: #fff;
}
.topcoat-textarea:disabled:-ms-input-placeholder {
color: #fff;
}
/* topdoc
name: Large Textarea
description: A whole area, just for text; now available in large.
modifiers:
:disabled: Disabled state
markup:
<textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>
<br>
<br>
<textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
tags:
- desktop
- light
- mobile
- form
- input
- textarea
*/
.topcoat-textarea--large {
font-size: 1.3rem;
line-height: 1.688rem;
}
.topcoat-textarea--large:disabled {
color: #fff;
}
.topcoat-textarea--large:disabled::-webkit-input-placeholder {
color: #fff;
}
.topcoat-textarea--large:disabled::-moz-placeholder {
color: #fff;
}
.topcoat-textarea--large:disabled:-ms-input-placeholder {
color: #fff;
}
@font-face {
font-family: "Source Sans";
src: url("../font/SourceSansPro-Regular.otf");
}
@font-face {
font-family: "Source Sans";
src: url("../font/SourceSansPro-Light.otf");
font-weight: 200;
}
@font-face {
font-family: "Source Sans";
src: url("../font/SourceSansPro-Semibold.otf");
font-weight: 600;
}
body {
margin: 0;
padding: 0;
background: #4b4d4e;
color: #000;
font: 16px "Source Sans", helvetica, arial, sans-serif;
font-weight: 400;
}
:focus {
outline-color: transparent;
outline-style: none;
}
.topcoat-icon--menu-stack {
background: url("../img/hamburger_light.svg") no-repeat;
background-size: cover;
}
.quarter {
width: 25%;
}
.half {
width: 50%;
}
.three-quarters {
width: 75%;
}
.third {
width: 33.333%;
}
.two-thirds {
width: 66.666%;
}
.full {
width: 100%;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.reset-ui {
-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;
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;
}
/* This file should include color and image variables corresponding to the dark theme */
/* ---------- colors ---------- */
/* ---------- darken ---------- */
/* ---------- lighten ---------- */
/* ---------- alphas ---------- */
/* ---------- thickness ---------- */
/* ---------- shadows ---------- */
/* Icons */
/* Navigation Bar */
/* Text Input */
/* List */
/* Overlay */
/* Progress bar */
/* Checkbox */
/* Range input */
/* Radio Button */
/* Tab bar */
/* Switch */
/* Icon Button */
/* Navigation bar */
/* List */
/* Search Input */
/* Textarea */
/* Checkbox */
/* Radio */
/* Range input */
/* Search Input */
/* Switch */
/* This file should include color and image variables corresponding to the light theme */
/* ---------- colors ---------- */
/* ---------- darken ---------- */
/* ---------- lighten ---------- */
/* ---------- alphas ---------- */
/* ---------- thickness ---------- */
/* ---------- shadows ---------- */
/* Secondary colors (based on colors above)
Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!
*/
/* Icons */
/* Navigation Bar */
/* Text Input */
/* List */
/* Overlay */
/* Progress bar */
/* Checkbox */
/* Range input */
/* Radio Button */
/* Tab bar */
/* Switch */
/* Containers */
/* Icon Button */
/* Navigation bar */
/* List */
/* Search Input */
/* Text Area */
/* Checkbox */
/* Radio */
/* Range input */
/* Search Input */
/* Switch */
/* Call To Action */
/* Text Input */
/* Radio input */
/* Overlay */
/* Textarea */
/* Progress bar container */
/* Progress bar progress */
/* Switch */
/* Notification */
/* Search */
