Skip to content

Instantly share code, notes, and snippets.

@ha10id
Forked from alexvas123/Tabs SASS
Created September 11, 2023 11:12
Show Gist options
  • Save ha10id/8ece0c7fedb5e8ead61cddccf64081b6 to your computer and use it in GitHub Desktop.
Save ha10id/8ece0c7fedb5e8ead61cddccf64081b6 to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment