Tabs SASS

Tabs SASS

// HTML //

<article class="text">
<div 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">
<img src="img/album6.jpg" alt="альбом By the Way">
<p>Альбом By the Way был выпущен в июле 2002 г. Он вышел на первое место в хит-парадах Британии, Швейцарии, Австрии, Швеции и Новой Зеландии, на второе &#8211; в США и во Франции.</p>
<p>Для поддержки альбома группа отправилась в международное турне, которое началось в июне 2002 г. в Лондоне и закончилось в ноябре 2003 г. в Лос-Анджелесе.</p>
<p>В Лондоне Red Hot Chili Peppers дали три концерта в Гайд-парке. Более 240 тысяч билетов были проданы за несколько часов. &ldquo;Перцы&rdquo; установили рекорд: это были самые прибыльные концерты в истории музыки. Доход от них составил 17 млн долларов.</p>
</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">
<img src="img/flea-frusciante.jpg" alt="Майкл Бэлзари и Джон Фрушанте">
<p>Большинство гитарных партий в альбоме By the Way написал Джон Фрушанте. Это отразилось на стиле композиций: они были более мелодичными, в них содержалось меньше элементов фанка и панка. Сказался интерес Джона к творчеству групп The Beatles и The Beach Boys. Период работы над диском Фрушанте назвал одним из самых счастливых в своей жизни.</p>
<p>Из-за того, что роль &ldquo;первой скрипки&rdquo; в создании By the Way играл Фрушанте, возник конфликт между ним и Майклом Бэлзари. &ldquo;Блохе&rdquo; казалось, что его отодвинули на второй план. Он настаивал на том, что группе следует придерживаться стилей фанк и панк. Фрушанте считал, что &ldquo;Перцы&rdquo; должны открывать для себя новые горизонты.</p>
<p>Творческие разногласия были настолько сильными, что Бэлзари всерьез подумывал о том, чтобы уйти из группы.</p>
</div>
</div>
</div>
</article>

// SASS //

.tabs
	background: transparentize($blue, .1)
	border: 3px solid $orange
	border-radius: 10px
	display: block
	position: relative
	&::before
		content: ""
		display: table
	&::after
		content: ""
		display: table
		clear: both
	
.tab
	float: none

.tab-switch
	display: none

.tab-label
	border-bottom: 1px solid $orange
	cursor: pointer
	display: block
	font-family: RobotoBold
	letter-spacing: 1px
	line-height: 2em
	padding: em(10) em(10)
	position: relative
	transition: all 0.25s
	&:hover
		color: red

.tab-content
	color: white
	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
		border-bottom: 1px solid $orange
		height: auto
		opacity: 1
		padding: 10px
		z-index: 2
+media($bp-small)
	.tabs
		background: none
		border: none
		border-radius: none
		display: block
		line-height: 1.5
		position: relative
		&::before
			content: ""
			display: table
		&::after
			content: ""
			display: table
			clear: both

	.tab
		float: left

	.tab-switch
		display: none

	.tab-label
		background: transparentize($blue, .1)
		border-bottom: none
		border-top-left-radius: 10px
		border-top-right-radius: 10px
		cursor: pointer
		display: block
		height: 3em
		font-family: RobotoBold
		letter-spacing: .6px
		line-height: 3em
		margin: 0 5px 0 0
		padding: 0 em(8)
		position: relative
		top: 0
		transition: all 0.25s
		&:hover
			color: red
			transition: all 0.25s

	.tab-content
		background: transparentize($blue, .1)
		border: 3px solid $orange
		border-bottom-right-radius: 10px
		border-bottom-left-radius: 10px
		border-top-right-radius: 10px
		color: white
		left: 0
		line-height: 1.5
		opacity: 0
		padding: 10px
		position: absolute
		top: 3.1em
		width: 100%
		z-index: 1

	.tab-switch:checked +
		.tab-label
			border: 0.2rem solid $orange
			border-bottom: none
			z-index: 1
		label + .tab-content
			border: 3px solid $orange
			opacity: 1
			padding: none
			z-index: 2