chowa/es/tabs/style/tabs.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-tabs {
  display: flex;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #616a6e; }

.cw-tabs-tab-container {
  display: flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 42px; }

.cw-tabs-tab-next,
.cw-tabs-tab-pre {
  text-align: center;
  margin: 0;
  padding: 0 8px;
  box-sizing: border-box;
  cursor: pointer; }

.cw-tabs-tab-scroll {
  flex: auto;
  overflow: hidden;
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

.cw-tabs-tab-wrapper {
  flex-wrap: nowrap;
  flex: auto;
  transition: all 0.2s linear;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

.cw-tabs-nav {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none; }

.cw-tabs-tab,
.cw-tabs-tab-append {
  color: #616a6e;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in;
  white-space: nowrap; }
  .cw-tabs-tab:not(.cw-tabs-tab-disabled):hover,
  .cw-tabs-tab-append:not(.cw-tabs-tab-disabled):hover {
    color: #7774e7; }
    .cw-tabs-tab:not(.cw-tabs-tab-disabled):hover .cw-tabs-tab-close,
    .cw-tabs-tab-append:not(.cw-tabs-tab-disabled):hover .cw-tabs-tab-close {
      opacity: 1; }

.cw-tabs-tab-close {
  color: #888da8;
  margin: 0;
  padding: 0;
  font-size: 12px;
  transition: all 0.2s ease-in;
  border: none;
  background: transparent;
  outline: none;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 4px;
  right: 4px;
  opacity: 0;
  cursor: pointer; }

.cw-tabs-tab-close-hide {
  display: none; }

.cw-tabs-tab-active {
  color: #7774e7; }

.cw-tabs-tab-disabled {
  cursor: not-allowed;
  color: #888da8; }

.cw-tabs-tab-active-line {
  position: absolute;
  background-color: #7774e7;
  display: block;
  transition: all 0.2s ease-in-out; }

.cw-tabs-panel-container {
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  color: #616a6e; }

.cw-tabs-panel-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  transition: all 0.2s ease-in-out;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

.cw-tabs-panel {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  color: #616a6e;
  margin: 0;
  padding: 18px;
  box-sizing: border-box; }
  .cw-tabs-panel.cw-tabs-panel-active {
    opacity: 1; }
  .cw-tabs-panel.cw-tabs-panel-inactive {
    opacity: 0; }

.cw-tabs-tab-bottom,
.cw-tabs-tab-top {
  flex-direction: column; }
  .cw-tabs-tab-bottom .cw-tabs-tab-container,
  .cw-tabs-tab-bottom .cw-tabs-tab-scroll,
  .cw-tabs-tab-bottom .cw-tabs-nav,
  .cw-tabs-tab-top .cw-tabs-tab-container,
  .cw-tabs-tab-top .cw-tabs-tab-scroll,
  .cw-tabs-tab-top .cw-tabs-nav {
    flex-direction: row; }

.cw-tabs-tab-left,
.cw-tabs-tab-right {
  flex-direction: row; }
  .cw-tabs-tab-left .cw-tabs-tab-container,
  .cw-tabs-tab-left .cw-tabs-tab-scroll,
  .cw-tabs-tab-left .cw-tabs-nav,
  .cw-tabs-tab-right .cw-tabs-tab-container,
  .cw-tabs-tab-right .cw-tabs-tab-scroll,
  .cw-tabs-tab-right .cw-tabs-nav {
    flex-direction: column; }
  .cw-tabs-tab-left .cw-tabs-panel-container,
  .cw-tabs-tab-right .cw-tabs-panel-container {
    flex: auto; }

.cw-tabs-line.cw-tabs-tab-top .cw-tabs-tab-container {
  border-bottom: 1px solid #e6ecf5; }

.cw-tabs-line.cw-tabs-tab-top .cw-tabs-tab-active-line {
  bottom: 0;
  left: 0;
  height: 2px; }

.cw-tabs-line.cw-tabs-tab-bottom .cw-tabs-tab-container {
  border-top: 1px solid #e6ecf5; }

.cw-tabs-line.cw-tabs-tab-bottom .cw-tabs-tab-active-line {
  left: 0;
  top: 0;
  height: 2px; }

.cw-tabs-line.cw-tabs-tab-left .cw-tabs-tab-container {
  border-right: 1px solid #e6ecf5; }

.cw-tabs-line.cw-tabs-tab-left .cw-tabs-tab-active-line {
  right: 0;
  top: 0;
  width: 2px; }

.cw-tabs-line.cw-tabs-tab-right .cw-tabs-tab-container {
  border-left: 1px solid #e6ecf5; }

.cw-tabs-line.cw-tabs-tab-right .cw-tabs-tab-active-line {
  bottom: unset;
  top: 0;
  width: 2px; }

.cw-tabs-card .cw-tabs-tab {
  border: 1px solid #e6ecf5;
  background-color: #f8f8f8; }

.cw-tabs-card .cw-tabs-tab-active {
  background-color: #fff; }

.cw-tabs-card.cw-tabs-tab-top .cw-tabs-tab-container {
  border-bottom: 1px solid #e6ecf5; }

.cw-tabs-card.cw-tabs-tab-top .cw-tabs-tab-scroll {
  margin-bottom: -1px; }

.cw-tabs-card.cw-tabs-tab-top .cw-tabs-tab-active {
  border-bottom: none; }

.cw-tabs-card.cw-tabs-tab-top .cw-tabs-tab {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px; }
  .cw-tabs-card.cw-tabs-tab-top .cw-tabs-tab + .cw-tabs-tab {
    margin-left: 4px; }

.cw-tabs-card.cw-tabs-tab-bottom .cw-tabs-tab-container {
  border-top: 1px solid #e6ecf5; }

.cw-tabs-card.cw-tabs-tab-bottom .cw-tabs-tab-scroll {
  margin-top: -1px; }

.cw-tabs-card.cw-tabs-tab-bottom .cw-tabs-tab-active {
  border-top: none; }

.cw-tabs-card.cw-tabs-tab-bottom .cw-tabs-tab {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; }
  .cw-tabs-card.cw-tabs-tab-bottom .cw-tabs-tab + .cw-tabs-tab {
    margin-left: 4px; }

.cw-tabs-card.cw-tabs-tab-left .cw-tabs-tab-container {
  border-right: 1px solid #e6ecf5; }

.cw-tabs-card.cw-tabs-tab-left .cw-tabs-tab-scroll {
  margin-right: -1px; }

.cw-tabs-card.cw-tabs-tab-left .cw-tabs-tab-active {
  border-right: none; }

.cw-tabs-card.cw-tabs-tab-left .cw-tabs-tab {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px; }
  .cw-tabs-card.cw-tabs-tab-left .cw-tabs-tab + .cw-tabs-tab {
    margin-top: 4px; }

.cw-tabs-card.cw-tabs-tab-right .cw-tabs-tab-container {
  border-left: 1px solid #e6ecf5; }

.cw-tabs-card.cw-tabs-tab-right .cw-tabs-tab-scroll {
  margin-left: -1px; }

.cw-tabs-card.cw-tabs-tab-right .cw-tabs-tab-active {
  border-left: none; }

.cw-tabs-card.cw-tabs-tab-right .cw-tabs-tab {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px; }
  .cw-tabs-card.cw-tabs-tab-right .cw-tabs-tab + .cw-tabs-tab {
    margin-top: 4px; }

.cw-tabs-tab-justified .cw-tabs-tab {
  flex: auto;
  text-align: center; }