diff options
Diffstat (limited to 'dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/css/topcoat-desktop-light.css')
| -rw-r--r-- | dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/css/topcoat-desktop-light.css | 3700 |
1 files changed, 3700 insertions, 0 deletions
diff --git a/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/css/topcoat-desktop-light.css b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/css/topcoat-desktop-light.css new file mode 100644 index 0000000..6735055 --- /dev/null +++ b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/css/topcoat-desktop-light.css @@ -0,0 +1,3700 @@ +/** +* +* 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 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; + 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: 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; +} + +/** +* +* 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; +} + +/** +* +* 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; + 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: 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 { + 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: 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; +} + +/* 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: 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; +} + +/** +* +* 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 */ + +/* Call To Action */ + +/* Icons */ + +/* Navigation Bar */ + +/* Text Input */ + +/* Search Input */ + +/* List */ + +/* Checkbox */ + +/* Overlay */ + +/* Progress bar */ + +/* Checkbox */ + +/* 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 */ + +/* Call To Action */ + +/* 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 */ + +/* Text Input */ + +/* Radio input */ + +/* Overlay */ + +/* Textarea */ + +/* Progress bar container */ + +/* Progress bar progress */ + +/* Search input */ + +/* Switch */ + +/* Notification */
\ No newline at end of file |