topcoat-icon-button/css/mobile-light-icon-button.css

Topcoat icon button skin

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

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

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

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Source Sans Pro",
                 "HelveticaNeue-Light",
                 "Helvetica Neue Light",
                 "Helvetica Neue",
                 Helvetica,
                 Arial,
                 "Lucida Grande",
                 sans-serif;
  font-weight: 400;
  background: hsla(180, 5%, 88%, 1);
}

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

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

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

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  box-sizing: border-box;
  background-clip: padding-box;
}

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  white-space: nowrap;
  overflow: hidden;
}

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet,
.topcoat-icon,
.topcoat-icon--large {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  text-overflow: ellipsis;
}

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

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  text-decoration: 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 .75rem;
  line-height: 3rem;
  letter-spacing: 1px;
  color: hsla(0, 0%, 27%, 1);
  text-shadow: 0 1px hsla(0, 100%, 100%, 1);
  vertical-align: baseline;
  background-color: hsla(165, 8%, 91%, 1);
  box-shadow: inset 0 1px hsla(0, 100%, 100%, 1);
  border: 1px solid hsla(168, 8%, 65%, 1);
  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: hsla(180, 7%, 94%, 1);
}

.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 hsla(227, 100%, 50%, 1);
  box-shadow: inset 0 1px hsla(0, 100%, 100%, .36), 0 0 0 2px hsla(208, 82%, 69%, 1);
  outline: 0;
}

.topcoat-icon-button:active,
.topcoat-icon-button--quiet:active,
.topcoat-icon-button--large:active,
.topcoat-icon-button--large--quiet:active,
.topcoat-icon-button--large--quiet:focus:active {
  border: 1px solid hsla(168, 8%, 65%, 1);
  background-color: hsla(180, 5%, 83%, 1);
  box-shadow: inset 0 1px hsla(0, 0%, 0%, .1);
}

/* 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:hover,
.topcoat-icon-button--large--quiet:hover {
  text-shadow: 0 1px hsla(0, 100%, 100%, 1);
  border: 1px solid hsla(168, 8%, 65%, 1);
  box-shadow: inset 0 1px hsla(0, 100%, 100%, 1);
}

.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet:focus:active,
.topcoat-icon-button--large--quiet:active,
.topcoat-icon-button--large--quiet:focus:active,
.topcoat-icon-button--large--quiet:focus:focus:active {
  color: hsla(0, 0%, 27%, 1);
  text-shadow: 0 1px hsla(0, 100%, 100%, 1);
  background-color: hsla(180, 5%, 83%, 1);
  border: 1px solid hsla(168, 8%, 65%, 1);
  box-shadow: inset 0 1px hsla(0, 0%, 0%, .1);
}

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

/* 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,
.topcoat-icon--large {
  overflow: hidden;
  width: 1.62rem;
  height: 1.62rem;
  vertical-align: middle;
  top: -1px;
}

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