SCSS BEM Tabs system
How do I make an scss bem tabs system?
What is a scss bem tabs system? How do you make a scss bem tabs system? This script and codes were developed by Jimmy Van Der Sleen on 15 January 2023, Sunday.
SCSS BEM Tabs system - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SCSS BEM Tabs system</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div class="inline-tabs"> <input type="radio" name="tabs" id="tab1" class="inline-tabs__input--hidden" checked > <label class="inline-tabs__label inline-tabs__label--first" for="tab1">Tab 1</label> <input type="radio" name="tabs" id="tab2" class="inline-tabs__input--hidden"> <label class="inline-tabs__label" for="tab2">Tab 2</label> <input type="radio" name="tabs" id="tab3" class="inline-tabs__input--hidden"> <label class="inline-tabs__label" for="tab3">Tab 3</label> <input type="radio" name="tabs" id="tab4" class="inline-tabs__input--hidden"> <label class="inline-tabs__label" for="tab4">Tab 4</label> <div class="inline-tabs__content" id="tab-content1"> <p class="inline-tabs__content--text">Lorizzle ipsum for sure sizzle izzle, break it down adipiscing elit. Nullam sapien velizzle, fo shizzle volutpizzle, things quis, gravida vizzle, arcu. Pellentesque izzle tortor. Sed erizzle. You son of a bizzle izzle gangsta dapibus turpizzle tempus tempizzle.</p> </div> <div class="inline-tabs__content" id="tab-content2"> <p class="inline-tabs__content--text"> Sed erizzle. You son of a bizzle izzle gangsta dapibus turpizzle tempus tempizzle.</p> </div> <div class="inline-tabs__content" id="tab-content3"> <p class="inline-tabs__content--text">break it down adipiscing elit. Nullam sapien velizzle, fo shizzle volutpizzle, things quis, gravida vizzle, arcu. Pellentesque izzle tortor. Sed erizzle. You son of a bizzle izzle gangsta dapibus turpizzle tempus tempizzle.</p> </div> <div class="inline-tabs__content" id="tab-content4"> <p class="inline-tabs__content--text">nummer 4</p> </div> </div>
</div>
</body>
</html>
SCSS BEM Tabs system - Script Codes CSS Codes
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { background-color: #e4e4e4;
}
#wrapper { width: 50%; margin: 100px auto;
}
.inline-tabs { width: 100%; display: flex; flex-wrap: wrap; position: relative; font-family: 'Open Sans'; font-weight: 300; margin-bottom: 20px; align-items: flex-end;
}
.inline-tabs__input { margin: 0; padding: 0;
}
.inline-tabs__input--hidden { display: none;
}
.inline-tabs__label { font-size: 18px; border: 1px solid #ccc; margin: 0; padding: 8px 22px 8px 22px; display: block; cursor: pointer; flex: 1; text-align: left; transition: all 0.25s; border-left: none; background-color: #eee; align-items: flex-end;
}
.inline-tabs__label--first { border-left: 1px solid #ccc;
}
.inline-tabs__label:after { content: '+'; display: block; float: right;
}
.inline-tabs__content { position: relative; top: 0px; left: 0px; display: none; overflow: hidden; padding: 0; opacity: 0; flex: 1 1 100%; width: 100%; max-height: 0; border: 1px solid #ccc; background-color: #fff; border-top: none; transition: all 0.25s; border-radius: 0 0 10px 10px;
}
.inline-tabs__content--text { font-size: 18px;
}
#tab1:checked ~ #tab-content1 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab1:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab1:checked + label:after { content: '-'; display: block; float: right;
}
#tab2:checked ~ #tab-content2 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab2:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab2:checked + label:after { content: '-'; display: block; float: right;
}
#tab3:checked ~ #tab-content3 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab3:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab3:checked + label:after { content: '-'; display: block; float: right;
}
#tab4:checked ~ #tab-content4 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab4:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab4:checked + label:after { content: '-'; display: block; float: right;
}
#tab5:checked ~ #tab-content5 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab5:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab5:checked + label:after { content: '-'; display: block; float: right;
}
#tab6:checked ~ #tab-content6 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab6:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab6:checked + label:after { content: '-'; display: block; float: right;
}
#tab7:checked ~ #tab-content7 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab7:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab7:checked + label:after { content: '-'; display: block; float: right;
}
#tab8:checked ~ #tab-content8 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab8:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab8:checked + label:after { content: '-'; display: block; float: right;
}
#tab9:checked ~ #tab-content9 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab9:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab9:checked + label:after { content: '-'; display: block; float: right;
}
#tab10:checked ~ #tab-content10 { opacity: 1; display: block; max-height: 200px; padding: 15px;
}
#tab10:checked + label { flex: 2; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; background-color: #fff; padding: 15px 22px 8px 22px;
}
#tab10:checked + label:after { content: '-'; display: block; float: right;
}
Developer | Jimmy Van Der Sleen |
Username | sjimster |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 3,252 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
PreLoad page | 2,365 Kb |
Custom GoogleMaps | 2,357 Kb |
CountingLikes | 2,654 Kb |
Flexbox vertical slide menu | 2,995 Kb |
Svg loading circle | 2,271 Kb |
Checkbox menu, pure CSS | 2,816 Kb |
Css 3D Cube try-out | 2,404 Kb |
SVG Handwriting test | 3,148 Kb |
Simple image slider | 3,446 Kb |
Toggle Hamburger Menu | 2,892 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Zip Button test | Lje7462 | 1,932 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Font stack | Adrianjacob | 1,868 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!