Topcoat

CSS for clean and fast web apps

Button

Button Button Button

HTML

<a class="topcoat-button">Button</a>
<a class="topcoat-button is-active">Button</a>
<a class="topcoat-button is-disabled">Button</a>

CSS

.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;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  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;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 1.16rem;
  font-size: 12px;
  line-height: 2rem;
  letter-spacing: 1px;
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  vertical-align: top;
  background-color: #595b5b;
  -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.12);
  box-shadow: inset 0 1px rgba(255,255,255,0.12);
  border: 1px solid rgba(0,0,0,0.36);
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.topcoat-button:active,
.topcoat-button.is-active,
.topcoat-button--large:active,
.topcoat-button--large.is-active {
  background-color: #404141;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
  box-shadow: inset 0 1px rgba(0,0,0,0.18);
}
.topcoat-button:disabled,
.topcoat-button.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Quiet Button

Button Button Button

HTML

<a class="topcoat-button--quiet">Button</a>
<a class="topcoat-button--quiet is-active">Button</a>
<a class="topcoat-button--quiet is-disabled">Button</a>

CSS

.topcoat-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topcoat-button--quiet:active,
.topcoat-button--quiet.is-active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet.is-active {
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  background-color: #404141;
  border: 1px solid rgba(0,0,0,0.36);
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
  box-shadow: inset 0 1px rgba(0,0,0,0.18);
}
.topcoat-button--quiet:disabled,
.topcoat-button--quiet.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Large Button

Button Button Button

HTML

<a class="topcoat-button--large" >Button</a>
<a class="topcoat-button--large is-active" >Button</a>
<a class="topcoat-button--large is-disabled" >Button</a>

CSS

.topcoat-button--large,
.topcoat-button--large--quiet {
  font-size: 1.167rem;
  line-height: 2.6rem;
}
.topcoat-button--large:disabled,
.topcoat-button--large.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Large Quiet Button

Button Button Button

HTML

<a class="topcoat-button--large--quiet" >Button</a>
<a class="topcoat-button--large--quiet is-active" >Button</a>
<a class="topcoat-button--large--quiet is-disabled" >Button</a>

CSS

.topcoat-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topcoat-button--large--quiet:disabled,
.topcoat-button--large--quiet.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Call To Action Button

Button Button Button

HTML

<a class="topcoat-button--cta" >Button</a>
<a class="topcoat-button--cta is-active" >Button</a>
<a class="topcoat-button--cta is-disabled" >Button</a>

CSS

.topcoat-button--cta,
.topcoat-button--large--cta {
  border: 1px solid #143250;
  background-color: #288edf;
  -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.36);
  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:active,
.topcoat-button--cta.is-active,
.topcoat-button--large--cta:active,
.topcoat-button--large--cta.is-active {
  background-color: #1976c3;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-button--cta:disabled,
.topcoat-button--cta.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Large Call To Action Button

Button Button Button

HTML

<a class="topcoat-button--large--cta" >Button</a>
<a class="topcoat-button--large--cta is-active" >Button</a>
<a class="topcoat-button--large--cta is-disabled" >Button</a>

CSS

.topcoat-button--large--cta {
  font-size: 1.167rem;
  line-height: 2.6rem;
}
.topcoat-button--large-cta:disabled,
.topcoat-button--large--cta.is-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.
*/

Icon Button

HTML

<a class="topcoat-icon-button">
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
</a>

<a class="topcoat-icon-button is-active">
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
</a>

<a class="topcoat-icon-button is-disabled">
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
</a>

CSS

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  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;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 0.5rem;
  line-height: 2rem;
  letter-spacing: 1px;
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  vertical-align: baseline;
  background-color: #595b5b;
  -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.12);
  box-shadow: inset 0 1px rgba(255,255,255,0.12);
  border: 1px solid rgba(0,0,0,0.36);
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.topcoat-icon-button:active,
.topcoat-icon-button.is-active {
  background-color: #404141;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
  box-shadow: inset 0 1px rgba(0,0,0,0.18);
}
.topcoat-icon-button:disabled,
.topcoat-icon-button.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Quiet Icon Button

HTML

<a class="topcoat-icon-button--quiet">
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
</a>

<a class="topcoat-icon-button--quiet is-active">
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
</a>

<a class="topcoat-icon-button--quiet is-disabled">
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
</a>

CSS

.topcoat-icon-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet.is-active,
.topcoat-icon-button--large--quiet:active,
.topcoat-icon-button--large--quiet.is-active {
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  background-color: #404141;
  border: 1px solid rgba(0,0,0,0.36);
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
  box-shadow: inset 0 1px rgba(0,0,0,0.18);
}
.topcoat-icon-button--quiet:disabled,
.topcoat-icon-button--quiet.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Large Icon Button

HTML

<a class="topcoat-icon-button--large">
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
</a>

<a class="topcoat-icon-button--large is-active">
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
</a>

<a class="topcoat-icon-button--large is-disabled">
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
</a>

CSS

.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
}
.topcoat-icon-button--large:active,
.topcoat-icon-button--large.is-active {
  background-color: #404141;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
  box-shadow: inset 0 1px rgba(0,0,0,0.18);
}
.topcoat-icon-button--large:disabled,
.topcoat-icon-button--large.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Large Quiet Icon Button

HTML

<a class="topcoat-icon-button--large--quiet">
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
</a>

<a class="topcoat-icon-button--large--quiet is-active">
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
</a>

<a class="topcoat-icon-button--large--quiet is-disabled">
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
</a>

CSS

.topcoat-icon-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topcoat-icon-button--large--quiet:disabled,
.topcoat-icon-button--large--quiet.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.topcoat-icon,
.topcoat-icon--large {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}
.topcoat-icon--large {
  width: 1.3rem;
  height: 1.3rem;
}

/*
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

Category

  • Item
  • Item
  • Item

HTML

<div class="topcoat-list__container">
<h3 class="topcoat-list__header">Category</h3>
<ul class="topcoat-list">
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
</ul>
</div>

CSS

.topcoat-list__container {
  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;
  border-top: 1px solid #2f3234;
  border-bottom: 1px solid #eff1f1;
  background-color: #444849;
}
.topcoat-list__header {
  margin: 0;
  padding: 0.3rem 1.6rem;
  font-size: 0.9em;
  font-weight: 400;
  background-color: #3b3e40;
  color: #868888;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  border-top: solid 1px rgba(255,255,255,0.1);
  border-bottom: solid 1px rgba(255,255,255,0.05);
}
.topcoat-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  border-top: 1px solid #2f3234;
  color: #c6c8c8;
}
.topcoat-list__item {
  margin: 0;
  padding: 0;
  padding: 1.16rem;
  border-top: 1px solid #5e6061;
  border-bottom: 1px solid #2f3234;
}
.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.
*/

Search Input

HTML

<input type="search" value="" placeholder="search" class="topcoat-search-input">
<input type="search is-disabled" value="" placeholder="search" class="topcoat-search-input">

CSS

.topcoat-search-input,
.topcoat-search-input--large {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.25rem;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin: 5px;
  height: 3rem;
  font: inherit;
  font-weight: 200;
  outline: none;
  border: 1px solid rgba(0,0,0,0.36);
  background-color: #595b5b;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
  box-shadow: inset 0 1px rgba(0,0,0,0.18);
  color: #c6c8c8;
  -webkit-appearance: none;
  padding: 0 0 0 2.7em;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-image: url("../img/search_light.svg");
  background-position: 1em center;
  background-repeat: no-repeat;
  -webkit-background-size: 12px;
  -moz-background-size: 12px;
  background-size: 12px;
}
.topcoat-search-input:focus,
.topcoat-search-input--large:focus {
  background-color: #fff;
  color: var-color-focus;
}
.topcoat-search-input::-webkit-search-cancel-button,
.topcoat-search-input::-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,
.topcoat-search-input.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Large Search Input

HTML

<input type="search"value="" placeholder="search" class="topcoat-search-input--large">
<input type="search"value="" placeholder="search" class="topcoat-search-input--large .is-disabled">

CSS

.topcoat-search-input--large {
  height: 2.6rem;
  font-size: 1.167rem;
  font-weight: 200;
  padding-left: 2.8em;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  background-position: 1.2em center;
  -webkit-background-size: 1.167rem;
  -moz-background-size: 1.167rem;
  background-size: 1.167rem;
}
.topcoat-search-input--large:disabled,
.topcoat-search-input--large.is-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.
*/

Text Input

HTML

<input type="text" class="topcoat-text-input" value="" placeholder="text">
<input type="text" class="topcoat-text-input is-disabled" value="" placeholder="text">

CSS

.topcoat-text-input,
.topcoat-text-input--large {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.25rem;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin: 5px;
  height: 3rem;
  font: inherit;
  font-weight: 200;
  outline: none;
  border: 1px solid rgba(0,0,0,0.36);
  background-color: #595b5b;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
  box-shadow: inset 0 1px rgba(0,0,0,0.18);
  color: #c6c8c8;
}
.topcoat-text-input:focus {
  background-color: #fff;
  color: #000;
}
.topcoat-text-input:disabled,
.topcoat-text-input.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Large Text Input

HTML

<input type="text" class="topcoat-text-input--large" value="" placeholder="text">
<input type="text" class="topcoat-text-input--large is-disabled" value="" placeholder="text">

CSS

.topcoat-text-input--large {
  height: 2.6rem;
  font-size: 1.167rem;
}
.topcoat-text-input--large:focus {
  background-color: #fff;
  color: #000;
}
.topcoat-text-input--large.is-disabled,
.topcoat-text-input--large: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.
*/

TopCoat Textarea

HTML

<textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>

CSS

.topcoat-textarea,
.topcoat-textarea--large {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.16rem;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: var-margin;
  font: var-font;
  font-weight: 200;
  line-height: 2rem;
  resize: none;
  outline: none;
  border: 1px solid rgba(0,0,0,0.36);
  background-color: #595b5b;
  -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.12);
  box-shadow: inset 0 1px rgba(255,255,255,0.12);
  color: #c6c8c8;
}
.topcoat-textarea:focus,
.topcoat-textarea--large:focus {
  background-color: var-background--focus;
  color: #000;
}

Topcoat Large Textarea

HTML

CSS

.topcoat-textarea--large {
  font: var-font--large;
  font-weight: 200;
  line-height: 2.6rem;
}