chowa/es/button-group/style/button-group.css

UI component library based on React

/**
 * @license chowa v1.1.3
 *
 * Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
.cw-btn-group {
  display: inline-flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }
  .cw-btn-group .cw-btn {
    margin-left: 0;
    position: relative; }
    .cw-btn-group .cw-btn:before {
      content: '';
      display: block;
      position: absolute;
      z-index: 999;
      transition: border-color 0.2s linear; }

.cw-btn-group-horizontal {
  flex-direction: row;
  align-items: flex-start; }
  .cw-btn-group-horizontal .cw-btn:before {
    top: -1px;
    right: -1px;
    bottom: -1px;
    border-right: 1px solid transparent; }
  .cw-btn-group-horizontal .cw-btn:not(:last-child) {
    border-right-width: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0; }
    .cw-btn-group-horizontal .cw-btn:not(:last-child):not(.cw-btn-disabled):hover:before, .cw-btn-group-horizontal .cw-btn:not(:last-child).cw-btn-active:before {
      border-color: #7774e7; }
    .cw-btn-group-horizontal .cw-btn:not(:last-child):not(.cw-btn-disabled):hover.cw-btn-danger:before, .cw-btn-group-horizontal .cw-btn:not(:last-child).cw-btn-active.cw-btn-danger:before {
      border-color: #ed4014; }
    .cw-btn-group-horizontal .cw-btn:not(:last-child):not(.cw-btn-disabled):hover.cw-btn-primary:before, .cw-btn-group-horizontal .cw-btn:not(:last-child).cw-btn-active.cw-btn-primary:before {
      border-color: #7774e7; }
  .cw-btn-group-horizontal .cw-btn + .cw-btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0; }
    .cw-btn-group-horizontal .cw-btn + .cw-btn.cw-btn-danger {
      border-left-color: #bf320f; }
      .cw-btn-group-horizontal .cw-btn + .cw-btn.cw-btn-danger:not(.cw-btn-disabled):hover {
        border-left-color: #ed4014; }
    .cw-btn-group-horizontal .cw-btn + .cw-btn.cw-btn-primary {
      border-left-color: #4c49df; }
      .cw-btn-group-horizontal .cw-btn + .cw-btn.cw-btn-primary:not(.cw-btn-disabled):hover {
        border-left-color: #7774e7; }

.cw-btn-group-vertical {
  flex-direction: column;
  align-items: stretch; }
  .cw-btn-group-vertical .cw-btn:before {
    bottom: -1px;
    left: -1px;
    right: -1px;
    border-top: 1px solid transparent; }
  .cw-btn-group-vertical .cw-btn:not(:last-child) {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
    .cw-btn-group-vertical .cw-btn:not(:last-child):not(.cw-btn-disabled):hover:before, .cw-btn-group-vertical .cw-btn:not(:last-child).cw-btn-active:before {
      border-color: #7774e7; }
    .cw-btn-group-vertical .cw-btn:not(:last-child):not(.cw-btn-disabled):hover.cw-btn-danger:before, .cw-btn-group-vertical .cw-btn:not(:last-child).cw-btn-active.cw-btn-danger:before {
      border-color: #ed4014; }
    .cw-btn-group-vertical .cw-btn:not(:last-child):not(.cw-btn-disabled):hover.cw-btn-primary:before, .cw-btn-group-vertical .cw-btn:not(:last-child).cw-btn-active.cw-btn-primary:before {
      border-color: #7774e7; }
  .cw-btn-group-vertical .cw-btn + .cw-btn {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
    .cw-btn-group-vertical .cw-btn + .cw-btn.cw-btn-danger {
      border-top-color: #bf320f; }
      .cw-btn-group-vertical .cw-btn + .cw-btn.cw-btn-danger:not(.cw-btn-disabled):hover {
        border-top-color: #ed4014; }
    .cw-btn-group-vertical .cw-btn + .cw-btn.cw-btn-primary {
      border-top-color: #4c49df; }
      .cw-btn-group-vertical .cw-btn + .cw-btn.cw-btn-primary:not(.cw-btn-disabled):hover {
        border-top-color: #7774e7; }

.cw-btn-group-round .cw-btn:first-child {
  border-bottom-left-radius: 999px;
  border-top-left-radius: 999px; }

.cw-btn-group-round .cw-btn:last-child {
  border-bottom-right-radius: 999px;
  border-top-right-radius: 999px; }

.cw-btn-group-justified {
  display: flex; }
  .cw-btn-group-justified .cw-btn {
    flex: auto; }