Topcoat

CSS for clean and fast web apps

Button Bar

Examples

Show code snippets

HTML

<div class="topcoat-button-bar">
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button-bar__button">One</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button-bar__button">Two</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button-bar__button">Three</button>
  </div>
</div>

CSS


.topcoat-button-bar > .topcoat-button-bar__item:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.topcoat-button-bar > .topcoat-button-bar__item:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.topcoat-button-bar__item:first-child > .topcoat-button-bar__button,
.topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {
  border-right: none;
}

.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,
.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {
  border-left: none;
}

.topcoat-button-bar__button {
  border-radius: inherit;
}

.topcoat-button-bar__button:focus,
.topcoat-button-bar__button--large:focus {
  z-index: 1;
}

Large Button Bar

Show code snippets

HTML

<div class="topcoat-button-bar">
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button-bar__button--large">One</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button-bar__button--large">Two</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button-bar__button--large">Three</button>
  </div>
</div>

CSS


.topcoat-button-bar__button--large {
  border-radius: inherit;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-button:disabled,
.topcoat-button--quiet:disabled,
.topcoat-button--large:disabled,
.topcoat-button--large--quiet:disabled,
.topcoat-button--cta:disabled,
.topcoat-button--large--cta:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Button

Examples

Show code snippets

HTML

<button class="topcoat-button">Button</button>
<button class="topcoat-button" disabled>Button</button>

CSS


.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  padding: 0 0.563rem;
  font-size: 12px;
  line-height: 1.313rem;
  letter-spacing: 0;
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  vertical-align: top;
  background-color: #595b5b;
  box-shadow: inset 0 1px #737373;
  border: 1px solid #333434;
  border-radius: 4px;
}

.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover {
  background-color: #626465;
}

.topcoat-button:focus,
.topcoat-button--quiet:focus,
.topcoat-button--quiet:hover:focus,
.topcoat-button--large:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--large--quiet:hover:focus,
.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

.topcoat-button:active,
.topcoat-button--large:active {
  border: 1px solid #333434;
  background-color: #3f4041;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
}

Quiet Button

Show code snippets

HTML

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

CSS


.topcoat-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-button--quiet:hover,
.topcoat-button--large--quiet:hover {
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  border: 1px solid #333434;
  box-shadow: inset 0 1px #737373;
}

.topcoat-button--quiet:active,
.topcoat-button--quiet:focus:active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet:focus:active {
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  background-color: #3f4041;
  border: 1px solid #333434;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
}

Large Button

Show code snippets

HTML

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

CSS


.topcoat-button--large,
.topcoat-button--large--quiet {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.688rem;
  padding: 0 0.875rem;
}

Large Quiet Button

Show code snippets

HTML

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

CSS


.topcoat-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

Call To Action Button

Show code snippets

HTML

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

CSS


.topcoat-button--cta,
.topcoat-button--large--cta {
  border: 1px solid #134f7f;
  background-color: #288edf;
  box-shadow: inset 0 1px rgba(255,255,255,0.36);
  color: #fff;
  font-weight: 500;
  text-shadow: 0 -1px rgba(0,0,0,0.36);
}

.topcoat-button--cta:hover,
.topcoat-button--large--cta:hover {
  background-color: #4ca1e4;
}

.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
  background-color: #1e7dc8;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}

Large Call To Action Button

Show code snippets

HTML

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

CSS


.topcoat-button--large--cta {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.688rem;
  padding: 0 0.875rem;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type="checkbox"] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.checkbox {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox__label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.checkbox:before,
.checkbox:after {
  content: '';
  position: absolute;
}

.checkbox:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type="checkbox"] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.checkbox,
.topcoat-checkbox__checkmark {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox__label,
.topcoat-checkbox {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox--disabled,
input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.checkbox:before,
.checkbox:after,
.topcoat-checkbox__checkmark:before,
.topcoat-checkbox__checkmark:after {
  content: '';
  position: absolute;
}

.checkbox:before,
.topcoat-checkbox__checkmark:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

Checkbox



Examples

Show code snippets

HTML

<label class="topcoat-checkbox">
  <input type="checkbox">
  <div class="topcoat-checkbox__checkmark"></div>
  Default
</label>
<br>
<br>
<label class="topcoat-checkbox">
  <input type="checkbox" disabled>
  <div class="topcoat-checkbox__checkmark"></div>
  Disabled
</label>

CSS


.topcoat-checkbox__checkmark {
  height: 1rem;
}

input[type="checkbox"] {
  height: 1rem;
  width: 1rem;
  margin-top: 0;
  margin-right: -1rem;
  margin-bottom: -1rem;
  margin-left: 0;
}

input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
  opacity: 1;
}

.topcoat-checkbox {
  line-height: 1rem;
}

.topcoat-checkbox__checkmark:before {
  width: 1rem;
  height: 1rem;
  background: #595b5b;
  border: 1px solid #333434;
  border-radius: 3px;
  box-shadow: inset 0 1px #737373;
}

.topcoat-checkbox__checkmark {
  width: 1rem;
  height: 1rem;
}

.topcoat-checkbox__checkmark:after {
  top: 2px;
  left: 1px;
  opacity: 0;
  width: 14px;
  height: 4px;
  background: transparent;
  border: 7px solid #c6c8c8;
  border-width: 3px;
  border-top: none;
  border-right: none;
  border-radius: 1px;
  -webkit-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {
  border: 1px solid #333434;
  background-color: #3f4041;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
}

input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {
  border: 1px solid #333434;
  background: #595b5b;
  box-shadow: inset 0 1px #737373;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-icon-button:disabled,
.topcoat-icon-button--quiet:disabled,
.topcoat-icon-button--large:disabled,
.topcoat-icon-button--large--quiet:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Icon Button

Show code snippets

HTML

<button class="topcoat-icon-button">
  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button" disabled>
  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>

CSS


.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  padding: 0 0.25rem;
  line-height: 1.313rem;
  letter-spacing: 0;
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  vertical-align: baseline;
  background-color: #595b5b;
  box-shadow: inset 0 1px #737373;
  border: 1px solid #333434;
  border-radius: 4px;
}

.topcoat-icon-button:hover,
.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large:hover,
.topcoat-icon-button--large--quiet:hover {
  background-color: #626465;
}

.topcoat-icon-button:focus,
.topcoat-icon-button--quiet:focus,
.topcoat-icon-button--quiet:hover:focus,
.topcoat-icon-button--large:focus,
.topcoat-icon-button--large--quiet:focus,
.topcoat-icon-button--large--quiet:hover:focus {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

.topcoat-icon-button:active,
.topcoat-icon-button--large:active {
  border: 1px solid #333434;
  background-color: #3f4041;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
}

Quiet Icon Button

Show code snippets

HTML

<button class="topcoat-icon-button--quiet">
  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--quiet" disabled>
  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>

CSS


.topcoat-icon-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large--quiet:hover {
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  border: 1px solid #333434;
  box-shadow: inset 0 1px #737373;
}

.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet:focus:active,
.topcoat-icon-button--large--quiet:active,
.topcoat-icon-button--large--quiet:focus:active {
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  background-color: #3f4041;
  border: 1px solid #333434;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
}

Large Icon Button

Show code snippets

HTML

<button class="topcoat-icon-button--large">
  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--large" disabled>
  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>

CSS


.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  width: 1.688rem;
  height: 1.688rem;
  line-height: 1.688rem;
}

Large Quiet Icon Button

Show code snippets

HTML

<button class="topcoat-icon-button--large--quiet">
  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--large--quiet" disabled>
  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>

CSS


.topcoat-icon-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-icon,
.topcoat-icon--large {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 0.81406rem;
  height: 0.81406rem;
  vertical-align: middle;
  top: -1px;
}

.topcoat-icon--large {
  width: 1.06344rem;
  height: 1.06344rem;
  top: -2px;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.input {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
}

.input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.list {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.list__header {
  margin: 0;
}

.list__container {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list__item {
  margin: 0;
  padding: 0;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.navigation-bar {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navigation-bar__item {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

.navigation-bar__title {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.notification {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.notification,
.topcoat-notification {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

Notification

1
Show code snippets

HTML

<span class="topcoat-notification">1</span>

CSS


.topcoat-notification {
  padding: 0.15em 0.5em 0.2em;
  border-radius: 2px;
  background-color: #ec514e;
  color: #fff;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type="radio"] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.radio-button {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button__label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button:before,
.radio-button:after {
  content: '';
  position: absolute;
  border-radius: 100%;
}

.radio-button:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.radio-button:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.radio-button--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type="radio"] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.radio-button,
.topcoat-radio-button__checkmark {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button__label,
.topcoat-radio-button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button:before,
.radio-button:after,
.topcoat-radio-button__checkmark:before,
.topcoat-radio-button__checkmark:after {
  content: '';
  position: absolute;
  border-radius: 100%;
}

.radio-button:after,
.topcoat-radio-button__checkmark:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.radio-button:before,
.topcoat-radio-button__checkmark:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.radio-button--disabled,
input[type="radio"]:disabled + .topcoat-radio-button__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Radio Button







Examples

Show code snippets

HTML

<!-- NO LABEL -->
<label class="topcoat-radio-button">
  <input type="radio" name="topcoat">
  <div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<br>
<!-- LEFT LABEL -->
<label class="topcoat-radio-button">
  Left label
  <input type="radio" name="topcoat">
  <div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<br>
<!-- RIGHT LABEL -->
<label class="topcoat-radio-button">
  <input type="radio" name="topcoat">
  <div class="topcoat-radio-button__checkmark"></div>
  Right label
</label>
<br>
<br>
<!-- DISABLED -->
<label class="topcoat-radio-button">
  <input type="radio" name="topcoat" Disabled>
  <div class="topcoat-radio-button__checkmark"></div>
  Disabled
</label>

CSS


input[type="radio"] {
  height: 1.063rem;
  width: 1.063rem;
  margin-top: 0;
  margin-right: -1.063rem;
  margin-bottom: -1.063rem;
  margin-left: 0;
}

input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
  opacity: 1;
}

.topcoat-radio-button {
  color: #c6c8c8;
  line-height: 1.063rem;
}

.topcoat-radio-button__checkmark:before {
  width: 1.063rem;
  height: 1.063rem;
  background: #595b5b;
  border: 1px solid #333434;
  box-shadow: inset 0 1px #737373;
}

.topcoat-radio-button__checkmark {
  position: relative;
  width: 1.063rem;
  height: 1.063rem;
}

.topcoat-radio-button__checkmark:after {
  opacity: 0;
  width: 0.313rem;
  height: 0.313rem;
  background: #c6c8c8;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 1px rgba(255,255,255,0.1);
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  top: 0.313rem;
  left: 0.313rem;
}

input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

input[type="radio"]:active + .topcoat-radio-button__checkmark:before {
  border: 1px solid #333434;
  background-color: #3f4041;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
}

input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {
  border: 1px solid #333434;
  background: #595b5b;
  box-shadow: inset 0 1px #737373;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.range {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

.range__thumb {
  cursor: pointer;
}

.range__thumb--webkit {
  cursor: pointer;
  -webkit-appearance: none;
}

.range:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.range,
.topcoat-range {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

.range__thumb,
.topcoat-range::-moz-range-thumb {
  cursor: pointer;
}

.range__thumb--webkit,
.topcoat-range::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
}

.range:disabled,
.topcoat-range:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Range

Examples

Show code snippets

HTML

<input type="range" class="topcoat-range">
<input type="range" class="topcoat-range" disabled>

CSS


.topcoat-range {
  border-radius: 4px;
  border: 1px solid #333434;
  background-color: #454646;
  height: 0.5rem;
  border-radius: 15px;
}

.topcoat-range::-moz-range-track {
  border-radius: 4px;
  border: 1px solid #333434;
  background-color: #454646;
  height: 0.5rem;
  border-radius: 15px;
}

.topcoat-range::-webkit-slider-thumb {
  height: 1.313rem;
  width: 0.75rem;
  background-color: #595b5b;
  border: 1px solid #333434;
  border-radius: 4px;
  box-shadow: inset 0 1px #737373;
}

.topcoat-range::-moz-range-thumb {
  height: 1.313rem;
  width: 0.75rem;
  background-color: #595b5b;
  border: 1px solid #333434;
  border-radius: 4px;
  box-shadow: inset 0 1px #737373;
}

.topcoat-range:focus::-webkit-slider-thumb {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

.topcoat-range:focus::-moz-range-thumb {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

.topcoat-range:active::-webkit-slider-thumb {
  border: 1px solid #333434;
  box-shadow: inset 0 1px #737373;
}

.topcoat-range:active::-moz-range-thumb {
  border: 1px solid #333434;
  box-shadow: inset 0 1px #737373;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.search-input {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.search-input,
.topcoat-search-input,
.topcoat-search-input--large {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-input:disabled,
.topcoat-search-input:disabled,
.topcoat-search-input--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Search Input

Show code snippets

HTML

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

CSS


.topcoat-search-input,
.topcoat-search-input--large {
  line-height: 1.313rem;
  height: 1.313rem;
  font-size: 12px;
  border: 1px solid #333434;
  background-color: #454646;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);
  color: #c6c8c8;
  padding: 0 0 0 1.3rem;
  border-radius: 15px;
  background-image: url("../img/search.svg");
  background-position: 1rem center;
  background-repeat: no-repeat;
  background-size: 12px;
}

.topcoat-search-input:focus,
.topcoat-search-input--large:focus {
  background-color: #595b5b;
  color: #fff;
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), 0 0 0 2px #6fb5f1;
}

.topcoat-search-input::-webkit-search-cancel-button,
.topcoat-search-input::-webkit-search-decoration,
.topcoat-search-input--large::-webkit-search-cancel-button,
.topcoat-search-input--large::-webkit-search-decoration {
  margin-right: 5px;
}

.topcoat-search-input:focus::-webkit-input-placeholder,
.topcoat-search-input:focus::-webkit-input-placeholder {
  color: #c6c8c8;
}

.topcoat-search-input:disabled::-webkit-input-placeholder {
  color: #fff;
}

.topcoat-search-input:disabled::-moz-placeholder {
  color: #fff;
}

.topcoat-search-input:disabled:-ms-input-placeholder {
  color: #fff;
}

Large Search Input

Show code snippets

HTML

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

CSS


.topcoat-search-input--large {
  line-height: 1.688rem;
  height: 1.688rem;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0 0 0 1.8rem;
  border-radius: 25px;
  background-position: 1.2rem center;
  background-size: 0.875rem;
}

.topcoat-search-input--large:disabled {
  color: #fff;
}

.topcoat-search-input--large:disabled::-webkit-input-placeholder {
  color: #fff;
}

.topcoat-search-input--large:disabled::-moz-placeholder {
  color: #fff;
}

.topcoat-search-input--large:disabled:-ms-input-placeholder {
  color: #fff;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch__input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.switch__toggle {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch__toggle:before,
.switch__toggle:after {
  content: '';
  position: absolute;
  z-index: -1;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.switch,
.topcoat-switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch__input,
.topcoat-switch__input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.switch__toggle,
.topcoat-switch__toggle {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch__toggle:before,
.switch__toggle:after,
.topcoat-switch__toggle:before,
.topcoat-switch__toggle:after {
  content: '';
  position: absolute;
  z-index: -1;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch--disabled,
.topcoat-switch__input:disabled + .topcoat-switch__toggle {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Switch





Examples

Show code snippets

HTML

<label class="topcoat-switch">
  <input type="checkbox" class="topcoat-switch__input">
  <div class="topcoat-switch__toggle"></div>
</label>
<br>
<br>
<label class="topcoat-switch">
  <input type="checkbox" class="topcoat-switch__input" checked>
  <div class="topcoat-switch__toggle"></div>
</label>
<br>
<br>
<label class="topcoat-switch">
  <input type="checkbox" class="topcoat-switch__input" disabled>
  <div class="topcoat-switch__toggle"></div>
</label>

CSS


.topcoat-switch {
  font-size: 12px;
  padding: 0 0.563rem;
  border-radius: 4px;
  border: 1px solid #333434;
  overflow: hidden;
  width: 3.5rem;
}

.topcoat-switch__toggle:before,
.topcoat-switch__toggle:after {
  top: -1px;
  width: 2.6rem;
}

.topcoat-switch__toggle:before {
  content: 'ON';
  color: #288edf;
  background-color: #3f4041;
  right: 0.8rem;
  padding-left: 0.75rem;
}

.topcoat-switch__toggle {
  line-height: 1.313rem;
  height: 1.313rem;
  width: 1rem;
  border-radius: 4px;
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  background-color: #595b5b;
  border: 1px solid #333434;
  margin-left: -0.6rem;
  margin-bottom: -1px;
  margin-top: -1px;
  box-shadow: inset 0 1px #737373;
  -webkit-transition: margin-left 0.05s ease-in-out;
  transition: margin-left 0.05s ease-in-out;
}

.topcoat-switch__toggle:after {
  content: 'OFF';
  background-color: #3f4041;
  left: 0.8rem;
  padding-left: 0.6rem;
}

.topcoat-switch__input:checked + .topcoat-switch__toggle {
  margin-left: 1.85rem;
}

.topcoat-switch__input:active + .topcoat-switch__toggle {
  border: 1px solid #333434;
  box-shadow: inset 0 1px #737373;
}

.topcoat-switch__input:focus + .topcoat-switch__toggle {
  border: 1px solid #0036ff;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
  background: transparent;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-tab-bar__button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-tab-bar__button:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.button-bar,
.topcoat-tab-bar {
  display: table;
  table-layout: fixed;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.button-bar__item,
.topcoat-tab-bar__item {
  display: table-cell;
  width: auto;
  border-radius: 0;
}

.button-bar__item > input,
.topcoat-tab-bar__item > input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.button-bar__button {
  border-radius: inherit;
}

.button-bar__item:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Tab Bar

Examples

Show code snippets

HTML

<div class="topcoat-tab-bar">
  <label class="topcoat-tab-bar__item">
    <input type="radio" name="tab-bar">
    <button class="topcoat-tab-bar__button">One</button>
  </label>
  <label class="topcoat-tab-bar__item">
    <input type="radio" name="tab-bar">
    <button class="topcoat-tab-bar__button">Two</button>
  </label>
  <label class="topcoat-tab-bar__item">
    <input type="radio" name="tab-bar">
    <button class="topcoat-tab-bar__button">Three</button>
  </label>
</div>

CSS


.topcoat-tab-bar__button {
  padding: 0 0.563rem;
  height: 1.313rem;
  line-height: 1.313rem;
  letter-spacing: 0;
  color: #c6c8c8;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  vertical-align: top;
  background-color: #595b5b;
  box-shadow: inset 0 1px #737373;
  border-top: 1px solid #333434;
}

.topcoat-tab-bar__button:active,
.topcoat-tab-bar__button--large:active,
:checked + .topcoat-tab-bar__button {
  color: #288edf;
  background-color: #3f4041;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.05);
}

.topcoat-tab-bar__button:focus,
.topcoat-tab-bar__button--large:focus {
  z-index: 1;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.input,
.topcoat-text-input,
.topcoat-text-input--large {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
}

.input:disabled,
.topcoat-text-input:disabled,
.topcoat-text-input--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Text input





Show code snippets

HTML

<input type="text" class="topcoat-text-input" placeholder="text" value="">
<br>
<br>
<input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>
<br>
<br>
<input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">

CSS


.topcoat-text-input,
.topcoat-text-input--large {
  line-height: 1.313rem;
  font-size: 12px;
  letter-spacing: 0;
  padding: 0 0.563rem;
  border: 1px solid #333434;
  border-radius: 4px;
  background-color: #454646;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
  color: #c6c8c8;
  vertical-align: top;
}

.topcoat-text-input:focus,
.topcoat-text-input--large:focus {
  background-color: #595b5b;
  color: #fff;
  border: 1px solid #0036ff;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-text-input:disabled::-webkit-input-placeholder {
  color: #fff;
}

.topcoat-text-input:disabled::-moz-placeholder {
  color: #fff;
}

.topcoat-text-input:disabled:-ms-input-placeholder {
  color: #fff;
}

.topcoat-text-input:invalid {
  border: 1px solid #ec514e;
}

Large Text Input





Show code snippets

HTML

<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">

CSS


.topcoat-text-input--large {
  line-height: 1.688rem;
  font-size: 0.875rem;
}

.topcoat-text-input--large:disabled {
  color: #fff;
}

.topcoat-text-input--large:disabled::-webkit-input-placeholder {
  color: #fff;
}

.topcoat-text-input--large:disabled::-moz-placeholder {
  color: #fff;
}

.topcoat-text-input--large:disabled:-ms-input-placeholder {
  color: #fff;
}

.topcoat-text-input--large:invalid {
  border: 1px solid #ec514e;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.textarea {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  resize: none;
  outline: none;
}

.textarea:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.textarea,
.topcoat-textarea,
.topcoat-textarea--large {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  resize: none;
  outline: none;
}

.textarea:disabled,
.topcoat-textarea:disabled,
.topcoat-textarea--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

Textarea



Show code snippets

HTML

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

CSS


.topcoat-textarea,
.topcoat-textarea--large {
  padding: 1rem;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 4px;
  line-height: 1.313rem;
  border: 1px solid #333434;
  background-color: #454646;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
  color: #c6c8c8;
  letter-spacing: 0;
}

.topcoat-textarea:focus,
.topcoat-textarea--large:focus {
  background-color: #595b5b;
  color: #fff;
  border: 1px solid #0036ff;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-textarea:disabled::-webkit-input-placeholder {
  color: #fff;
}

.topcoat-textarea:disabled::-moz-placeholder {
  color: #fff;
}

.topcoat-textarea:disabled:-ms-input-placeholder {
  color: #fff;
}

Large Textarea



Show code snippets

HTML

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

CSS


.topcoat-textarea--large {
  font-size: 1.3rem;
  line-height: 1.688rem;
}

.topcoat-textarea--large:disabled {
  color: #fff;
}

.topcoat-textarea--large:disabled::-webkit-input-placeholder {
  color: #fff;
}

.topcoat-textarea--large:disabled::-moz-placeholder {
  color: #fff;
}

.topcoat-textarea--large:disabled:-ms-input-placeholder {
  color: #fff;
}

@font-face {
  font-family: "Source Sans";
  src: url("../font/SourceSansPro-Regular.otf");
}

@font-face {
  font-family: "Source Sans";
  src: url("../font/SourceSansPro-Light.otf");
  font-weight: 200;
}

@font-face {
  font-family: "Source Sans";
  src: url("../font/SourceSansPro-Semibold.otf");
  font-weight: 600;
}

body {
  margin: 0;
  padding: 0;
  background: #4b4d4e;
  color: #000;
  font: 16px "Source Sans", helvetica, arial, sans-serif;
  font-weight: 400;
}

:focus {
  outline-color: transparent;
  outline-style: none;
}

.topcoat-icon--menu-stack {
  background: url("../img/hamburger_light.svg") no-repeat;
  background-size: cover;
}

.quarter {
  width: 25%;
}

.half {
  width: 50%;
}

.three-quarters {
  width: 75%;
}

.third {
  width: 33.333%;
}

.two-thirds {
  width: 66.666%;
}

.full {
  width: 100%;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.reset-ui {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* This file should include color and image variables corresponding to the dark theme */

/* ---------- colors ---------- */

/* ---------- darken ---------- */

/* ---------- lighten ---------- */

/* ---------- alphas ---------- */

/* ---------- thickness ---------- */

/* ---------- shadows ---------- */

/* Icons */

/* Navigation Bar */

/* Text Input */

/* List */

/* Overlay */

/* Progress bar */

/* Checkbox */

/* Range input */

/* Radio Button */

/* Tab bar */

/* Switch */

/* Icon Button */

/* Navigation bar */

/* List */

/* Search Input */

/* Textarea */

/* Checkbox */

/* Radio */

/* Range input */

/* Search Input */

/* Switch */

/* This file should include color and image variables corresponding to the light theme */

/* ---------- colors ---------- */

/* ---------- darken ---------- */

/* ---------- lighten ---------- */

/* ---------- alphas ---------- */

/* ---------- thickness ---------- */

/* ---------- shadows ---------- */

/* Secondary colors (based on colors above)

Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!

*/

/* Icons */

/* Navigation Bar */

/* Text Input */

/* List */

/* Overlay */

/* Progress bar */

/* Checkbox */

/* Range input */

/* Radio Button */

/* Tab bar */

/* Switch */

/* Containers */

/* Icon Button */

/* Navigation bar */

/* List */

/* Search Input */

/* Text Area */

/* Checkbox */

/* Radio */

/* Range input */

/* Search Input */

/* Switch */

/* Call To Action */

/* Text Input */

/* Radio input */

/* Overlay */

/* Textarea */

/* Progress bar container */

/* Progress bar progress */

/* Switch */

/* Notification */

/* Search */