Tabs

by Valeriy Brunov

HTML

<div class="tabs">
  <div class="tabs__bookmarks list list_direction_horizontal">
    <div class="tabs__bookmark list__str tabs__bookmark_current center link link_theme_bookmark">
    <span class="tabs__bookmark_line">1</span>
    </div>
    <div class="tabs__bookmark list__str center link">
      <span class="tabs__bookmark_line">1</span>
    </div>
    <div class="tabs__bookmark list__str center link">
      <span class="tabs__bookmark_line">1</span>
    </div>
    <div class="tabs__static-bookmark list__str center link">+</div>
  </div>
  <div class="tabs__contents">
    <div class="tabs__content tabs__content_current">dbddbd</div>
    <div class="tabs__content"></div>
    <div class="tabs__content"></div>
  </div>
</div>

CSS

/**
 * Заимствованые стили.
 */
div {
  border: 1px dashed green;
  --grid-gap: 16px;
}
.link {
	text-decoration: none;
	color: red;
}
.link:hover {
	color: green;
	cursor: pointer;
}
.center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.list {
	display: flex;
	flex-direction: column;
}

.list_direction_horizontal {
  flex-direction: row;
}

.list_form {}

.list__str {
	margin-top: calc(var(--grid-gap) / 2);
	margin-bottom: calc(var(--grid-gap) / 2);
}

.list__str:first-child {
	margin-top: 0;
}

.list__str:last-child {
	margin-bottom: 0;
}

.list_direction_horizontal .list__str {
  margin: 0;
  margin-left: calc(var(--grid-gap) / 2);
}
.list_direction_horizontal .list__str:first-child {
  margin-left: 0;
}


.list_form .list__str:nth-child(2) { margin-top: 0; }

.list_form .list__str {
	margin-top: var(--grid-gap);
	margin-bottom: var(--grid-gap);
}

.list_form .list__str:first-child {
	margin-top: 0;
}

.list_form .list__str:last-child {
	margin-bottom: 0;
}
/*************************************************************/

.link_theme_bookmark {
  border-bottom: 3px solid white;
}
.link_theme_bookmark:hover {
  border-bottom: 3px solid green;
}
/**
 * ->tabs
 */
.tabs__bookmarks {
  display: flex;
}
.tabs__bookmark {
  width: calc(100% / 3);
  padding: 6px;
}
.tabs__bookmark_current {
  pointer-events: none;
}
.tabs__content {
  display: none;
}
.tabs__content_current {
  display: block;
}
.tabs__bookmark_line {
  border-bottom: 3px solid white;
  padding-bottom: 5px;
}
.tabs__bookmark_current .tabs__bookmark_line {
  border-bottom: 3px solid green;
}