photon-ant/src/buttons.less

Mozilla Photon styles for the Ant Design UI library

// Buttons

.ant-btn-group {
  display: inline-flex;
}

// Default colors
.ant-btn {
  align-items: center;
  background: #E1E1E2;
  border: none;
  color: #0C0C0D;
  display: inline-flex;
  flex-direction: row-reverse;
  font-size: 13px;
  font-weight: 300;
  height: 32px;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1em;
  padding: 0 8px;
  text-transform: capitalize;

  &:hover,
  &:focus {
    background: #C9C9CA;
    color: #0C0C0D;
  }

  &:active {
    background: #B1B1B2;
  }

  &.ant-btn-loading {
    padding-left: 8px !important;

    .anticon {
      margin: 0 1px 0 3px !important;
    }
  }

  & > .anticon + span {
    margin-left: 0;
    margin-right: 0.5em;
  }

  &.ant-btn-dashed {
    background: #FFF;
    border: 1px dashed #E1E1E2;

    &:not([disabled]) {
      &:hover,
      &:focus {
        background: #E1E1E2;
      }
    }
  }

  &.ant-btn-danger:not([disabled]) {
    background: @red-6;
    border: none;
    color: #FFF;

    &:hover,
    &:focus {
      background: @red-7;
    }
  }

  // Primary button states are various blues.
  &.ant-btn-primary:not([disabled]) {
    background-color: @blue-60;
    border-color: @blue-60;
    color: #FFF;

    &:hover,
    &:focus {
      background-color: @blue-70;
      border-color: @blue-70;
      color: #FFF;
    }

    &:active {
      background-color: @blue-80;
      border-color: @blue-80;
      color: #FFF;
    }
  }
}

.ant-btn-group > .ant-btn:last-child:not(:first-child) {
  border-color: fade(@black, 15%);
  border-left-style: solid;
  border-left-width: 1px;
}

// Default size
.ant-btn-group > .ant-btn:first-child:not(:last-child),
.ant-btn-group > .ant-btn:last-child:not(:first-child) {
  font-size: 13px;
  height: 32px;
  padding: 0 8px;
}

.ant-btn-circle {
  width: 32px;
}

// Ghost styles
.ant-btn.ant-btn-background-ghost:not([disabled]) {
  color: #0C0C0D;

  &,
  &.ant-btn-dashed {
    &:hover,
    &:focus {
      background-color: #E1E1E2 !important;
      color: #0C0C0D;
    }
  }

  &.ant-btn-danger {
    &:hover,
    &:focus {
      background-color: @error-color !important;
      color: #FFF;
    }
  }

  &.ant-btn-primary {
    color: #0C0C0D;

    &:hover,
    &:focus {
      background-color: @primary-color !important;
      color: #FFF;
    }
  }
}


// Large buttons/groups should be "puffy."
.ant-btn-group-lg,
.ant-btn-lg {
  border-radius: 4px;
}

.ant-btn-group-lg > .ant-btn:first-child:not(:last-child) {
  border-radius: 4px 0 0 4px;
}

.ant-btn-group-lg > .ant-btn:last-child:not(:first-child) {
  border-radius: 0 4px 4px 0;
}


// "Micro" sizes
.ant-btn.ant-btn-sm,
.ant-btn-group.ant-btn-group-sm > .ant-btn:first-child:not(:last-child),
.ant-btn-group.ant-btn-group-sm > .ant-btn:last-child:not(:first-child) {
  font-size: 11px;
  height: 24px;
  padding: 0 8px;
}

.ant-btn-circle.ant-btn-sm {
  width: 24px;

  .anticon {
    margin-left: -2px;
  }
}

// "Puffy" size
.ant-btn.ant-btn-lg,
.ant-btn-group.ant-btn-group-lg > .ant-btn:first-child:not(:last-child),
.ant-btn-group.ant-btn-group-lg > .ant-btn:last-child:not(:first-child) {
  font-size: 15px;
  height: 48px;
  padding: 0 16px;
}

.ant-btn-circle.ant-btn-lg {
  width: 48px;
}