snap.js/dist/css/topcoat-desktop-light.css

3700 lines
84 KiB
CSS
Raw Normal View History

2013-09-02 04:26:51 +00:00
/**
*
* 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;
2013-09-02 04:26:51 +00:00
margin: 0;
padding: 0;
}
.button-bar__item {
display: table-cell;
width: auto;
border-radius: 0;
}
.button-bar__item > input {
2013-09-02 04:26:51 +00:00
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 1.25rem;
font-size: 16px;
line-height: 3rem;
letter-spacing: 1px;
color: #454545;
text-shadow: 0 1px #fff;
vertical-align: top;
background-color: #e5e9e8;
box-shadow: inset 0 1px #fff;
border: 1px solid #a5a8a8;
border-radius: 6px;
}
.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: #edf1f1;
}
.topcoat-button:active,
.topcoat-button--large:active,
.topcoat-button-bar__button:active,
.topcoat-button-bar__button--large:active,
:checked + .topcoat-button-bar__button {
background-color: #d3d7d7;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.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,
.topcoat-button-bar__button:focus,
.topcoat-button-bar__button--large:focus {
border: 1px solid #0940fd;
box-shadow: 0 0 0 2px #6fb5f1;
outline: 0;
}
.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 #fff;
border: 1px solid #a5a8a8;
box-shadow: inset 0 1px #fff;
}
.topcoat-button--quiet:active,
.topcoat-button--large--quiet:active {
color: #454545;
text-shadow: 0 1px #fff;
background-color: #d3d7d7;
border: 1px solid #a5a8a8;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button-bar__button--large {
font-size: 1.3rem;
font-weight: 400;
line-height: 4.375rem;
padding: 0 1.25rem;
}
.topcoat-button--large--quiet {
background: transparent;
border: 1px solid transparent;
box-shadow: none;
}
.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: #0380e8;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-button--large--cta {
font-size: 1.3rem;
font-weight: 400;
line-height: 4.375rem;
padding: 0 1.25rem;
}
.button-bar,
.topcoat-button-bar {
display: table;
table-layout: fixed;
white-space: nowrap;
2013-09-02 04:26:51 +00:00
margin: 0;
padding: 0;
}
.button-bar__item,
.topcoat-button-bar__item {
display: table-cell;
width: auto;
border-radius: 0;
}
.button-bar__item > input,
2013-09-02 04:26:51 +00:00
.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: 6px;
border-bottom-left-radius: 6px;
}
.topcoat-button-bar > .topcoat-button-bar__item:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.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 1.25rem;
font-size: 16px;
line-height: 3rem;
letter-spacing: 1px;
color: #454545;
text-shadow: 0 1px #fff;
vertical-align: top;
background-color: #e5e9e8;
box-shadow: inset 0 1px #fff;
border: 1px solid #a5a8a8;
border-radius: 6px;
}
.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover {
background-color: #edf1f1;
}
.topcoat-button:active,
.topcoat-button--large:active {
background-color: #d3d7d7;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.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;
}
/* 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 #fff;
border: 1px solid #a5a8a8;
box-shadow: inset 0 1px #fff;
}
.topcoat-button--quiet:active,
.topcoat-button--large--quiet:active {
color: #454545;
text-shadow: 0 1px #fff;
background-color: #d3d7d7;
border: 1px solid #a5a8a8;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
/* 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: 1.3rem;
font-weight: 400;
line-height: 4.375rem;
padding: 0 1.25rem;
}
/* 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 #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: #0380e8;
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: 1.3rem;
font-weight: 400;
line-height: 4.375rem;
padding: 0 1.25rem;
}
/**
*
* 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: 2rem;
}
input[type="checkbox"] {
height: 2rem;
width: 2rem;
margin-top: 0;
margin-right: -2rem;
margin-bottom: -2rem;
margin-left: 0;
}
input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
opacity: 1;
}
.topcoat-checkbox {
line-height: 2rem;
}
.topcoat-checkbox__checkmark:before {
width: 2rem;
height: 2rem;
background: #e5e9e8;
border: 1px solid #a5a8a8;
border-radius: 3px;
box-shadow: inset 0 1px #fff;
}
.topcoat-checkbox__checkmark {
width: 2rem;
height: 2rem;
}
.topcoat-checkbox__checkmark:after {
top: 1px;
left: 2px;
opacity: 0;
width: 28px;
height: 11px;
background: transparent;
border: 7px solid #666;
border-width: 7px;
border-top: none;
border-right: none;
border-radius: 2px;
-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;
}
/* 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.75rem;
line-height: 3rem;
letter-spacing: 1px;
color: #454545;
text-shadow: 0 1px #fff;
vertical-align: baseline;
background-color: #e5e9e8;
box-shadow: inset 0 1px #fff;
border: 1px solid #a5a8a8;
border-radius: 6px;
}
.topcoat-icon-button:hover,
.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large:hover,
.topcoat-icon-button--large--quiet:hover {
background-color: #edf1f1;
}
.topcoat-icon-button:active {
background-color: #d3d7d7;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.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;
}
/* 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 #fff;
border: 1px solid #a5a8a8;
box-shadow: inset 0 1px #fff;
}
.topcoat-icon-button--quiet:active,
.topcoat-icon-button--large--quiet:active {
color: #454545;
text-shadow: 0 1px #fff;
background-color: #d3d7d7;
border: 1px solid #a5a8a8;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
/* 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: 4.375rem;
height: 4.375rem;
line-height: 4.375rem;
}
.topcoat-icon-button--large:active {
background-color: #d3d7d7;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
/* 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: 1.62rem;
height: 1.62rem;
vertical-align: middle;
top: -1px;
}
.topcoat-icon--large {
width: 2.499999998125rem;
height: 2.499999998125rem;
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.
*
*/
.list,
.topcoat-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,
.topcoat-list__header {
margin: 0;
}
.list__container,
.topcoat-list__container {
padding: 0;
margin: 0;
list-style-type: none;
}
.list__item,
.topcoat-list__item {
margin: 0;
padding: 0;
}
/* topdoc
name: List
description: Topcoat default list skin
markup:
<div class="topcoat-list">
<h3 class="topcoat-list__header">Category</h3>
<ul class="topcoat-list__container">
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
</ul>
</div>
tags:
- mobile
- list
*/
.topcoat-list {
border-top: 1px solid #bcbfbf;
border-bottom: 1px solid #eff1f1;
background-color: #dfe2e2;
}
.topcoat-list__header {
padding: 4px 20px;
font-size: 0.9em;
font-weight: 400;
background-color: #cccfcf;
color: #656565;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(255,255,255,0.23);
}
.topcoat-list__container {
border-top: 1px solid #bcbfbf;
color: #454545;
}
.topcoat-list__item {
padding: 1.25rem;
border-top: 1px solid #eff1f1;
border-bottom: 1px solid #bcbfbf;
}
.topcoat-list__item:first-child {
border-top: 1px solid rgba(0,0,0,0.05);
}
/**
*
* 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.
*
*/
.navigation-bar,
.topcoat-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,
.topcoat-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,
.topcoat-navigation-bar__title {
padding: 0;
margin: 0;
font: inherit;
color: inherit;
background: transparent;
border: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* topdoc
name: Navigation Bar
description: A place where navigation goes to drink
markup:
<div class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">Header</h1>
</div>
</div>
tags:
- desktop
- light
- mobile
- navigation
- bar
*/
.topcoat-navigation-bar {
height: 4.375rem;
padding-left: 1rem;
padding-right: 1rem;
background: #e5e9e8;
color: #000;
box-shadow: inset 0 -1px #b9bcbc, 0 1px #d4d6d6;
}
.topcoat-navigation-bar__item {
margin: 0;
line-height: 4.375rem;
vertical-align: top;
}
.topcoat-navigation-bar__title {
font-size: 1.3rem;
font-weight: 400;
color: #000;
}
/*
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;
}
2013-09-02 04:26:51 +00:00
/**
*
* 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.875rem;
width: 1.875rem;
margin-top: 0;
margin-right: -1.875rem;
margin-bottom: -1.875rem;
margin-left: 0;
}
input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
opacity: 1;
}
.topcoat-radio-button {
color: #454545;
line-height: 1.875rem;
}
.topcoat-radio-button__checkmark:before {
width: 1.875rem;
height: 1.875rem;
background: #e5e9e8;
border: 1px solid #a5a8a8;
box-shadow: inset 0 1px #fff;
}
.topcoat-radio-button__checkmark {
position: relative;
width: 1.875rem;
height: 1.875rem;
}
.topcoat-radio-button__checkmark:after {
opacity: 0;
width: 0.875rem;
height: 0.875rem;
background: #666;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 1px rgba(255,255,255,0.5);
-webkit-transform: none;
-ms-transform: none;
transform: none;
top: 7px;
left: 7px;
}
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;
}
/* 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: 6px;
border: 1px solid #a5a8a8;
background-color: #d3d7d7;
height: 1rem;
border-radius: 30px;
}
.topcoat-range::-moz-range-track {
border-radius: 6px;
border: 1px solid #a5a8a8;
background-color: #d3d7d7;
height: 1rem;
border-radius: 30px;
}
.topcoat-range::-webkit-slider-thumb {
height: 3rem;
width: 2rem;
background-color: #e5e9e8;
border: 1px solid #a5a8a8;
border-radius: 6px;
box-shadow: inset 0 1px #fff;
}
.topcoat-range::-moz-range-thumb {
height: 3rem;
width: 2rem;
background-color: #e5e9e8;
border: 1px solid #a5a8a8;
border-radius: 6px;
box-shadow: inset 0 1px #fff;
}
.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;
}
2013-09-02 04:26:51 +00:00
/**
*
* 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: 3rem;
font-size: 16px;
border: 1px solid #a5a8a8;
background-color: #d3d7d7;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
color: #454545;
padding: 0 0 0 2rem;
border-radius: 30px;
background-image: url("../img/search.svg");
background-position: 1em center;
background-repeat: no-repeat;
background-size: 16px;
}
.topcoat-search-input:focus,
.topcoat-search-input--large:focus {
background-image: url("../img/search_dark.svg");
background-color: #edf1f1;
color: #000;
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: #000;
}
.topcoat-search-input:disabled::-moz-placeholder {
color: #000;
}
.topcoat-search-input:disabled:-ms-input-placeholder {
color: #000;
}
/* 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: 4.375rem;
font-size: 1.3rem;
font-weight: 200;
padding: 0 0 0 2.9rem;
border-radius: 40px;
background-position: 1.2em center;
background-size: 1.3rem;
}
.topcoat-search-input--large:disabled {
color: #000;
}
.topcoat-search-input--large:disabled::-webkit-input-placeholder {
color: #000;
}
.topcoat-search-input--large:disabled::-moz-placeholder {
color: #000;
}
.topcoat-search-input--large:disabled:-ms-input-placeholder {
color: #000;
}
/**
*
* 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;
2013-09-02 04:26:51 +00:00
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;
2013-09-02 04:26:51 +00:00
-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: 16px;
padding: 0 1.25rem;
border-radius: 6px;
border: 1px solid #a5a8a8;
overflow: hidden;
width: 6rem;
}
.topcoat-switch__toggle:before,
.topcoat-switch__toggle:after {
top: -1px;
width: 5rem;
}
.topcoat-switch__toggle:before {
content: 'ON';
color: #0083e8;
background-color: #e0f0fa;
right: 1rem;
padding-left: 1.5rem;
}
.topcoat-switch__toggle {
line-height: 3rem;
height: 3rem;
width: 2rem;
border-radius: 6px;
color: #454545;
text-shadow: 0 1px #fff;
background-color: #e5e9e8;
border: 1px solid #a5a8a8;
margin-left: -1.3rem;
margin-bottom: -1px;
margin-top: -1px;
box-shadow: inset 0 1px #fff;
-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: #d3d7d7;
left: 1rem;
padding-left: 2rem;
}
.topcoat-switch__input:checked + .topcoat-switch__toggle {
margin-left: 2.7rem;
}
.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;
}
/* 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 1.25rem;
height: 3rem;
line-height: 3rem;
letter-spacing: 1px;
color: #454545;
text-shadow: 0 1px #fff;
vertical-align: top;
background-color: #e5e9e8;
box-shadow: inset 0 1px #fff;
border-top: 1px solid #a5a8a8;
}
.topcoat-tab-bar__button:active,
.topcoat-tab-bar__button--large:active,
:checked + .topcoat-tab-bar__button {
color: #0083e8;
background-color: #e0f0fa;
box-shadow: inset 0 0 2px #c0ced8;
}
.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 {
2013-09-02 04:26:51 +00:00
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
2013-09-02 04:26:51 +00:00
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">
2013-09-02 04:26:51 +00:00
tags:
- desktop
- mobile
- text
- input
*/
.topcoat-text-input,
.topcoat-text-input--large {
line-height: 3rem;
font-size: 16px;
letter-spacing: 1px;
padding: 0 1.25rem;
border: 1px solid #a5a8a8;
border-radius: 6px;
background-color: #d3d7d7;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
color: #454545;
vertical-align: top;
}
.topcoat-text-input:focus,
.topcoat-text-input--large:focus {
background-color: #edf1f1;
color: #000;
border: 1px solid #0940fd;
box-shadow: 0 0 0 2px #6fb5f1;
}
.topcoat-text-input:disabled::-webkit-input-placeholder {
color: #000;
}
.topcoat-text-input:disabled::-moz-placeholder {
color: #000;
}
.topcoat-text-input:disabled:-ms-input-placeholder {
color: #000;
}
.topcoat-text-input:invalid {
border: 1px solid #d83b75;
}
2013-09-02 04:26:51 +00:00
/* topdoc
name: Large Text Input
description: A bigger input, still for text.
modifiers:
:disabled: Disabled state
:focus: Focused
:invalid: Hover state
2013-09-02 04:26:51 +00:00
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">
2013-09-02 04:26:51 +00:00
tags:
- desktop
- light
- mobile
- form
- input
- large
*/
.topcoat-text-input--large {
line-height: 4.375rem;
font-size: 1.3rem;
}
.topcoat-text-input--large:disabled {
color: #000;
}
.topcoat-text-input--large:disabled::-webkit-input-placeholder {
color: #000;
}
.topcoat-text-input--large:disabled::-moz-placeholder {
color: #000;
}
.topcoat-text-input--large:disabled:-ms-input-placeholder {
color: #000;
}
.topcoat-text-input--large:invalid {
border: 1px solid #d83b75;
}
2013-09-02 04:26:51 +00:00
/**
*
* 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: 2rem;
font-size: 2.5rem;
font-weight: 200;
border-radius: 6px;
line-height: 3rem;
border: 1px solid #a5a8a8;
background-color: #d3d7d7;
box-shadow: inset 0 1px rgba(0,0,0,0.12);
color: #454545;
letter-spacing: 1px;
}
.topcoat-textarea:focus,
.topcoat-textarea--large:focus {
background-color: #edf1f1;
color: #000;
border: 1px solid #0940fd;
box-shadow: 0 0 0 2px #6fb5f1;
}
.topcoat-textarea:disabled::-webkit-input-placeholder {
color: #000;
}
.topcoat-textarea:disabled::-moz-placeholder {
color: #000;
}
.topcoat-textarea:disabled:-ms-input-placeholder {
color: #000;
}
/* 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: 3rem;
line-height: 4.375rem;
}
.topcoat-textarea--large:disabled {
color: #000;
}
.topcoat-textarea--large:disabled::-webkit-input-placeholder {
color: #000;
}
.topcoat-textarea--large:disabled::-moz-placeholder {
color: #000;
}
.topcoat-textarea--large:disabled:-ms-input-placeholder {
color: #000;
}
@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: #dfe2e2;
color: #000;
font: 16px "Source Sans", helvetica, arial, sans-serif;
font-weight: 200;
}
:focus {
outline-color: transparent;
outline-style: none;
}
.topcoat-icon--menu-stack {
background: url("../img/hamburger_dark.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 */
2013-09-02 04:26:51 +00:00
/* Call To Action */
/* Icons */
/* Navigation Bar */
/* Text Input */
/* Search Input */
/* List */
/* Checkbox */
/* Overlay */
/* Progress bar */
/* Checkbox */
/* Radio Button */
/* Tab bar */
/* Switch */
2013-09-02 04:26:51 +00:00
/* Icon Button */
/* Navigation bar */
/* List */
/* Search Input */
/* Textarea */
/* Checkbox */
/* Radio */
/* Range input */
2013-09-02 04:26:51 +00:00
/* Search Input */
/* Switch */
/* This file should include color and image variables corresponding to the light theme */
2013-09-02 04:26:51 +00:00
/* Call To Action */
/* Icons */
/* Navigation Bar */
/* Text Input */
/* List */
/* Overlay */
2013-09-02 04:26:51 +00:00
/* Progress bar */
/* Checkbox */
/* Range input */
/* Radio Button */
/* Tab bar */
/* Switch */
2013-09-02 04:26:51 +00:00
/* Containers */
/* Icon Button */
/* Navigation bar */
/* List */
/* Search Input */
/* Text Area */
/* Checkbox */
/* Radio */
/* Range input */
/* Search Input */
/* Switch */
2013-09-02 04:26:51 +00:00
/* Text Input */
/* Radio input */
/* Overlay */
/* Textarea */
/* Progress bar container */
/* Progress bar progress */
/* Search input */
/* Switch */
/* Notification */