_feather-component-button.scss

/*! Copyright 2021 Twitter Inc. All rights reserved. */
/* @generated */
/* Button groups */
.ButtonGroup {
  display: inline-block;
  vertical-align: middle;
}
.ButtonGroup > .Button {
  position: relative;
  float: left;
  text-align: center;
}
.ButtonGroup > .Button:focus {
  outline: none;
}
.ButtonGroup > .Button {
  z-index: 1;
  transition-property: background-color, border-color;
}
.ButtonGroup > .Button:hover {
  z-index: 2;
}
.ButtonGroup > .Button.is-selected {
  z-index: 3;
}
.ButtonGroup > .Button.is-selected,
.ButtonGroup > .Button.is-selected:visited {
  background-color: #1DA1F2;
  border: 1px solid #1DA1F2;
  color: white;
}
.ButtonGroup > .Button.is-selected:focus,
.ButtonGroup > .Button.is-selected.is-focus {
  background: #1DA1F2;
  border-color: #1DA1F2;
  color: white;
}
.ButtonGroup > .Button.is-selected:focus:not(.is-mouseFocus),
.ButtonGroup > .Button.is-selected.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #74CAFE;
}
.u-featherBackgroundDark .ButtonGroup > .Button.is-selected:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup > .Button.is-selected.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #74CAFE;
}
.ButtonGroup > .Button.is-selected:hover,
.ButtonGroup > .Button.is-selected.is-hover {
  background-color: #0c85d0;
  border-color: #0c85d0;
  color: white;
}
.ButtonGroup > .Button.is-selected:active,
.ButtonGroup > .Button.is-selected.is-active {
  background-color: #0967a0;
  border-color: #0967a0;
  color: white;
}
.ButtonGroup > .Button.is-selected:active:focus:not(.is-mouseFocus),
.ButtonGroup > .Button.is-selected.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #0967a0;
}
.u-featherBackgroundDark .ButtonGroup > .Button.is-selected:active:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup > .Button.is-selected.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #0967a0;
}
.ButtonGroup > .Button.is-selected[disabled],
.ButtonGroup > .Button.is-selected.is-disabled,
fieldset[disabled] .ButtonGroup > .Button.is-selected {
  background-color: #1DA1F2;
  border-color: #1DA1F2;
  box-shadow: none;
}
.ButtonGroup > .Button:focus,
.ButtonGroup > .Button:active {
  z-index: 4;
}
.ButtonGroup > .Button + .Button {
  margin-left: -1px;
}
.ButtonGroup > .Button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.ButtonGroup > .Button:first-child:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.ButtonGroup > .Button:last-child:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
/* Sizing */
/* Variants */
.ButtonGroup--primary > .Button + .Button {
  margin-left: 1px;
}
.ButtonGroup--tertiary > .Button.is-selected,
.ButtonGroup--tertiary > .Button.is-selected:visited {
  background-color: #5B7083;
  border: 1px solid #5B7083;
  color: white;
}
.ButtonGroup--tertiary > .Button.is-selected:focus,
.ButtonGroup--tertiary > .Button.is-selected.is-focus {
  background: #5B7083;
  border-color: #5B7083;
  color: white;
}
.ButtonGroup--tertiary > .Button.is-selected:focus:not(.is-mouseFocus),
.ButtonGroup--tertiary > .Button.is-selected.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #C4CFD6;
}
.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-selected:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-selected.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #C4CFD6;
}
.ButtonGroup--tertiary > .Button.is-selected:hover,
.ButtonGroup--tertiary > .Button.is-selected.is-hover {
  background-color: #465665;
  border-color: #465665;
  color: white;
}
.ButtonGroup--tertiary > .Button.is-selected:active,
.ButtonGroup--tertiary > .Button.is-selected.is-active {
  background-color: #313d47;
  border-color: #313d47;
  color: white;
}
.ButtonGroup--tertiary > .Button.is-selected:active:focus:not(.is-mouseFocus),
.ButtonGroup--tertiary > .Button.is-selected.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #313d47;
}
.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-selected:active:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-selected.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #313d47;
}
.ButtonGroup--tertiary > .Button.is-selected[disabled],
.ButtonGroup--tertiary > .Button.is-selected.is-disabled,
fieldset[disabled] .ButtonGroup--tertiary > .Button.is-selected {
  background-color: #5B7083;
  border-color: #5B7083;
  box-shadow: none;
}
.ButtonGroup--justified {
  display: flex;
  width: 100%;
}
.ButtonGroup--justified > .Button {
  flex: 1;
}
.Button .Icon {
  line-height: 1;
  vertical-align: -1px;
}
.Button--large .Icon {
  vertical-align: -2px;
}
.ButtonGroup .Icon {
  line-height: 1;
  vertical-align: -1px;
}
.ButtonGroup--large .Icon {
  vertical-align: -2px;
}
.Button > .Icon--caretDown {
  margin: 0 0.3rem;
}
.Button--xsmall > .Icon--caretDown {
  margin: 0 0.2rem;
}
.Button--small > .Icon--caretDown {
  margin: 0 0.2rem;
}
.Button--large > .Icon--caretDown {
  margin: 0 0.4rem;
}
.Button > .Icon--caretDown {
  float: right;
  margin-right: 0;
  line-height: inherit;
}
.Button-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Button-adornment {
  margin: 0 0.3rem;
  flex: 0 0 auto;
}
.Button--xsmall .Button-adornment,
.ButtonGroup--xsmall .Button-adornment {
  margin: 0 0.2rem;
}
.Button--small .Button-adornment,
.ButtonGroup--small .Button-adornment {
  margin: 0 0.2rem;
}
.Button--large .Button-adornment,
.ButtonGroup--large .Button-adornment {
  margin: 0 0.4rem;
}
.Button-adornment:only-child {
  margin-right: 0;
  margin-left: 0;
}
html:not([dir='rtl']) .Button:not([dir='rtl']) .Button-adornment:first-child,
.Button[dir='ltr'] .Button-adornment:first-child {
  margin-left: 0;
}
html[dir='rtl'] .Button:not([dir='ltr']) .Button-adornment:first-child,
.Button[dir='rtl'] .Button-adornment:first-child {
  margin-right: 0;
}
html:not([dir='rtl']) .Button:not([dir='rtl']) .Button-adornment:last-child,
.Button[dir='ltr'] .Button-adornment:last-child {
  margin-right: 0;
}
html[dir='rtl'] .Button:not([dir='ltr']) .Button-adornment:last-child,
.Button[dir='rtl'] .Button-adornment:last-child {
  margin-left: 0;
}
/* Category labels */
.Button--withCategoryLabel .Button-label {
  font-weight: 400;
}
.Button-categoryLabel {
  font-weight: 700;
}
/* Buttons */
.Button {
  transition: box-shadow 0.15s ease-in-out;
  transition-property: box-shadow, background-color, border-color;
  text-align: center;
}
.Button:focus {
  outline: none;
}
.Button:-moz-focusring,
.Button[type='button']:-moz-focusring,
.Button[type='reset']:-moz-focusring,
.Button[type='submit']:-moz-focusring {
  outline: none;
}
.Button,
.Button:visited,
.Button.is-visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-weight: 700;
}
.Button:focus,
.Button.is-focus {
  text-decoration: none;
}
.Button:focus:not(.is-mouseFocus),
.Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #74CAFE;
}
.Button:hover,
.Button.is-hover {
  text-decoration: none;
}
.Button:active:focus:not(.is-mouseFocus),
.Button.is-active.is-focus {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #1DA1F2;
}
.Button[disabled],
.Button.is-disabled,
fieldset[disabled] .Button {
  cursor: default;
  opacity: 0.5;
  box-shadow: none;
}
a.Button.is-disabled,
fieldset[disabled] a.Button {
  pointer-events: none;
}
.Button[type='button'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
/* Variants */
.Button,
.Button:visited {
  background-color: white;
  border: 1px solid #1DA1F2;
  color: #1DA1F2;
}
.Button:focus,
.Button.is-focus {
  background: white;
  border-color: #1DA1F2;
  color: #1DA1F2;
}
.Button:focus:not(.is-mouseFocus),
.Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #74CAFE;
}
.u-featherBackgroundDark .Button:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #74CAFE;
}
.Button:hover,
.Button.is-hover {
  background-color: #e8f6fe;
  border-color: #1DA1F2;
  color: #1DA1F2;
}
.Button:active,
.Button.is-active {
  background-color: #d2ecfc;
  border-color: #1DA1F2;
  color: #1DA1F2;
}
.Button:active:focus:not(.is-mouseFocus),
.Button.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #1DA1F2;
}
.u-featherBackgroundDark .Button:active:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #1DA1F2;
}
.Button[disabled],
.Button.is-disabled,
fieldset[disabled] .Button {
  background-color: white;
  border-color: #1DA1F2;
  box-shadow: none;
}
.Button.Button--primary,
.Button.Button--primary:visited,
.ButtonGroup--primary > .Button,
.ButtonGroup--primary > .Button:visited {
  background-color: #1DA1F2;
  border: 1px solid #1DA1F2;
  color: white;
}
.Button.Button--primary:focus,
.Button.Button--primary.is-focus,
.ButtonGroup--primary > .Button:focus,
.ButtonGroup--primary > .Button.is-focus {
  background: #1DA1F2;
  border-color: #1DA1F2;
  color: white;
}
.Button.Button--primary:focus:not(.is-mouseFocus),
.Button.Button--primary.is-focus:not(.is-mouseFocus),
.ButtonGroup--primary > .Button:focus:not(.is-mouseFocus),
.ButtonGroup--primary > .Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #74CAFE;
}
.u-featherBackgroundDark .Button.Button--primary:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--primary.is-focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--primary > .Button:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--primary > .Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #74CAFE;
}
.Button.Button--primary:hover,
.Button.Button--primary.is-hover,
.ButtonGroup--primary > .Button:hover,
.ButtonGroup--primary > .Button.is-hover {
  background-color: #1a91da;
  border-color: #1a91da;
  color: white;
}
.Button.Button--primary:active,
.Button.Button--primary.is-active,
.ButtonGroup--primary > .Button:active,
.ButtonGroup--primary > .Button.is-active {
  background-color: #1781c2;
  border-color: #1781c2;
  color: white;
}
.Button.Button--primary:active:focus:not(.is-mouseFocus),
.Button.Button--primary.is-active.is-focus:not(.is-mouseFocus),
.ButtonGroup--primary > .Button:active:focus:not(.is-mouseFocus),
.ButtonGroup--primary > .Button.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #1781c2;
}
.u-featherBackgroundDark .Button.Button--primary:active:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--primary.is-active.is-focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--primary > .Button:active:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--primary > .Button.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #1781c2;
}
.Button.Button--primary[disabled],
.Button.Button--primary.is-disabled,
fieldset[disabled] .Button.Button--primary,
.ButtonGroup--primary > .Button[disabled],
.ButtonGroup--primary > .Button.is-disabled,
fieldset[disabled] .ButtonGroup--primary > .Button {
  background-color: #1DA1F2;
  border-color: #1DA1F2;
  box-shadow: none;
}
.Button.Button--tertiary,
.Button.Button--tertiary:visited,
.ButtonGroup--tertiary > .Button,
.ButtonGroup--tertiary > .Button:visited {
  background-color: white;
  border: 1px solid #5B7083;
  color: #5B7083;
}
.Button.Button--tertiary:focus,
.Button.Button--tertiary.is-focus,
.ButtonGroup--tertiary > .Button:focus,
.ButtonGroup--tertiary > .Button.is-focus {
  background: white;
  border-color: #5B7083;
  color: #5B7083;
}
.Button.Button--tertiary:focus:not(.is-mouseFocus),
.Button.Button--tertiary.is-focus:not(.is-mouseFocus),
.ButtonGroup--tertiary > .Button:focus:not(.is-mouseFocus),
.ButtonGroup--tertiary > .Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #C4CFD6;
}
.u-featherBackgroundDark .Button.Button--tertiary:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--tertiary.is-focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--tertiary > .Button:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #C4CFD6;
}
.Button.Button--tertiary:hover,
.Button.Button--tertiary.is-hover,
.ButtonGroup--tertiary > .Button:hover,
.ButtonGroup--tertiary > .Button.is-hover {
  background-color: #eff1f3;
  border-color: #5B7083;
  color: #5B7083;
}
.Button.Button--tertiary:active,
.Button.Button--tertiary.is-active,
.ButtonGroup--tertiary > .Button:active,
.ButtonGroup--tertiary > .Button.is-active {
  background-color: #dee2e6;
  border-color: #5B7083;
  color: #5B7083;
}
.Button.Button--tertiary:active:focus:not(.is-mouseFocus),
.Button.Button--tertiary.is-active.is-focus:not(.is-mouseFocus),
.ButtonGroup--tertiary > .Button:active:focus:not(.is-mouseFocus),
.ButtonGroup--tertiary > .Button.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #5B7083;
}
.u-featherBackgroundDark .Button.Button--tertiary:active:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--tertiary.is-active.is-focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--tertiary > .Button:active:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--tertiary > .Button.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #5B7083;
}
.Button.Button--tertiary[disabled],
.Button.Button--tertiary.is-disabled,
fieldset[disabled] .Button.Button--tertiary,
.ButtonGroup--tertiary > .Button[disabled],
.ButtonGroup--tertiary > .Button.is-disabled,
fieldset[disabled] .ButtonGroup--tertiary > .Button {
  background-color: white;
  border-color: #5B7083;
  box-shadow: none;
}
.Button.Button--danger,
.Button.Button--danger:visited {
  background-color: #E0245E;
  border: 1px solid #E0245E;
  color: white;
}
.Button.Button--danger:focus,
.Button.Button--danger.is-focus {
  background: #E0245E;
  border-color: #E0245E;
  color: white;
}
.Button.Button--danger:focus:not(.is-mouseFocus),
.Button.Button--danger.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #F37695;
}
.u-featherBackgroundDark .Button.Button--danger:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--danger.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #F37695;
}
.Button.Button--danger:hover,
.Button.Button--danger.is-hover {
  background-color: #ca2055;
  border-color: #ca2055;
  color: white;
}
.Button.Button--danger:active,
.Button.Button--danger.is-active {
  background-color: #b31d4b;
  border-color: #b31d4b;
  color: white;
}
.Button.Button--danger:active:focus:not(.is-mouseFocus),
.Button.Button--danger.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #b31d4b;
}
.u-featherBackgroundDark .Button.Button--danger:active:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--danger.is-active.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 2px black, 0 0 0 4px #b31d4b;
}
.Button.Button--danger[disabled],
.Button.Button--danger.is-disabled,
fieldset[disabled] .Button.Button--danger {
  background-color: #E0245E;
  border-color: #E0245E;
  box-shadow: none;
}
.Button.Button--link {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #1b95e0;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-weight: 400;
}
.Button.Button--link:hover,
.Button.Button--link.is-hover,
.Button.Button--link:focus,
.Button.Button--link.is-focus,
.Button.Button--link:active,
.Button.Button--link.is-active,
.Button.Button--link.is-focus.is-active,
.Button.Button--link:focus:active:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--link:hover,
.u-featherBackgroundDark .Button.Button--link.is-hover,
.u-featherBackgroundDark .Button.Button--link:focus,
.u-featherBackgroundDark .Button.Button--link.is-focus,
.u-featherBackgroundDark .Button.Button--link:active,
.u-featherBackgroundDark .Button.Button--link.is-active,
.u-featherBackgroundDark .Button.Button--link.is-focus.is-active,
.u-featherBackgroundDark .Button.Button--link:focus:active:not(.is-mouseFocus) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
  color: #1b95e0;
}
.Button.Button--link[disabled],
.Button.Button--link.is-disabled,
fieldset[disabled] .Button.Button--link {
  opacity: 0.5;
  text-decoration: none;
  cursor: default;
}
.Button.Button--dangerLink {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #E0245E;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-weight: 400;
}
.Button.Button--dangerLink:hover,
.Button.Button--dangerLink.is-hover,
.Button.Button--dangerLink:focus,
.Button.Button--dangerLink.is-focus,
.Button.Button--dangerLink:active,
.Button.Button--dangerLink.is-active,
.Button.Button--dangerLink.is-focus.is-active,
.Button.Button--dangerLink:focus:active:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--dangerLink:hover,
.u-featherBackgroundDark .Button.Button--dangerLink.is-hover,
.u-featherBackgroundDark .Button.Button--dangerLink:focus,
.u-featherBackgroundDark .Button.Button--dangerLink.is-focus,
.u-featherBackgroundDark .Button.Button--dangerLink:active,
.u-featherBackgroundDark .Button.Button--dangerLink.is-active,
.u-featherBackgroundDark .Button.Button--dangerLink.is-focus.is-active,
.u-featherBackgroundDark .Button.Button--dangerLink:focus:active:not(.is-mouseFocus) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
  color: #E0245E;
}
.Button.Button--dangerLink[disabled],
.Button.Button--dangerLink.is-disabled,
fieldset[disabled] .Button.Button--dangerLink {
  opacity: 0.5;
  text-decoration: none;
  cursor: default;
}
/* Sizes */
.Button {
  padding: 0 0.8rem;
  border-radius: 1.6rem;
  font-size: 0.7rem;
  height: 1.6rem;
  line-height: calc(1.6rem - (1px * 2));
}
.Button--xsmall,
.ButtonGroup--xsmall > .Button {
  padding: 0 0.6rem;
  border-radius: 1rem;
  font-size: 0.6rem;
  height: 1rem;
  line-height: calc(1rem - (1px * 2));
}
.Button--small,
.ButtonGroup--small > .Button {
  padding: 0 0.7rem;
  border-radius: 1.2rem;
  font-size: 0.6rem;
  height: 1.2rem;
  line-height: calc(1.2rem - (1px * 2));
}
.Button--large,
.ButtonGroup--large > .Button {
  padding: 0 0.9rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  height: 2rem;
  line-height: calc(2rem - (1px * 2));
}