CSS Tabs without borders

CSS Tabs without borders

// HTML

<article class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Текст</label>
<div class="tab-content">
<div class="tab-content-text">
<div class="tab-text">
<p>Главные героини сериала Absolutely Fabulous (&ldquo;Абсолютно невероятно&rdquo;) &#8211; две подруги, которые отказываются стареть. Они курят, пьют, употребляют наркотики &#8211; морально разлагаются всеми возможными способами, как в молодости.</p>
<p>Эдина Монсун &#8211; специалист по пиару. Ее играет актриса Дженнифер Сондерс, написавшая сценарий этого сериала на основе скетча &ldquo;Современные мать и дочь&rdquo;, который Сондерс и актриса Дон Френч сняли в 1990 г.</p>
<p>Эдина дважды была замужем. Вместе с ней живет ее дочь Саффрон (Джулия Савала) &#8211; абсолютно нормальный ребенок, который хорошо учится в школе и заботится о маме. Подругу Эдины &#8211; редактора модного журнала Пэтси Стоун &#8211; играет актриса Джоанна Ламли.</p>
<p>Сериал снимался в 1992-95, 2001-04 и 2011-12 гг. В июле этого года должен выйти полнометражный фильм.</p>
</div>
<div class="tab-images">
<div class="actors">
<div class="face">
<img src="img/abfab_lumley300.jpg" alt="Joanna Lumley">
</div>
<div class="flag">
<h6>Джоанна<br>Ламли</h6>
<img src="img/ukflaground.svg" alt="British flag">
</div>
</div>
<div class="actors">
<div class="face">
<img src="img/abfab_saunders300.jpg" alt="Jennifer Saunders">
</div>
<div class="flag">
<h6>Дженнифер<br>Сондерс</h6>
<img src="img/ukflaground.svg" alt="British flag">
</div>
</div>
<div class="actors">
<div class="face">
<img src="img/abfab_sawalha300.jpg" alt="Julia Sawalha">
</div>
<div class="flag">
<h6>Джулия<br>Савала</h6>
<img src="img/ukflaground.svg" alt="British flag">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Видео</label>
<div class="tab-content video">
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/ZAfmM06pVUw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</article>


// CSS

@media #{$mq-xxsmall}

	.tabs
		display: block
		position: relative
		&::before
			content: ""
			display: table
		&::after
			content: ""
			display: table
			clear: both
	.tab
		float: none
	.tab-switch
		display: none
	.tab-label
		color: $red
		cursor: pointer
		display: block
		height: 3rem
		font-family: RobotoBold
		letter-spacing: rem(.6)
		line-height: 3rem
		margin: 0 rem(5)
		padding: 0 rem(8)
		position: relative
		top: 0
		+transition(all 200)
		&:hover
			color: $blue
			+transition(all 200)
	.tab-content
		color: $smoke
		height: 0
		left: 0
		line-height: 1.5
		opacity: 0
		overflow: hidden
		width: 100%
		z-index: 1
	.tab-switch:checked +
		.tab-label
			border-bottom: none
			z-index: 1
		label + .tab-content
			height: auto
			opacity: 1
			padding: rem(10)
			z-index: 2

@media #{$mq-xsmall}

@media #{$mq-small}

	.tabs
		padding-bottom: 18%
	.tab
		float: left
	.tab-switch:checked +
		label + .tab-content
			padding: none
	.tab-label
		margin: 0 rem(5)
	.tab-content
		left: 0
		opacity: 0
		padding: rem(10)
		position: absolute
	.tab-content-text
		+align-items(center)
		+display(flex)
		+flex-wrap(nowrap)
	.tab-text
		border-right: rem(2) $blue solid
		padding-right: rem(10)
		width: 80%
	.tab-images
		+align-items(center)
		+display(flex)
		+flex-direction(column)
		+justify-content(space-between)
		margin-left: rem(10)
		+perspective(700)
		width: 20%