papercss/src/components/_tabs.scss

39 lines
715 B
SCSS
Raw Permalink Normal View History

2017-12-19 17:52:33 +01:00
.tabs {
.content {
display: none;
flex-basis: 100%;
2017-12-19 17:52:33 +01:00
padding: 0.75rem 0 0;
}
input {
display: none;
2017-12-23 09:43:23 +01:00
2020-06-01 23:02:51 +02:00
&:checked + label {
@include color(color, 'primary');
2020-08-10 01:21:02 +02:00
@include color('border-bottom-color', 'secondary');
border-bottom-style: solid;
border-bottom-width: 3px;
2017-12-23 09:43:23 +01:00
}
@for $num from 1 through 5 {
Support multiple tab components Hi, first of all thank you for your cool framework. I really have fun working with it :) I'm building an app for building flashcard sets in which I decided to use tabs component for switching between different languages. However I've noticed that current version assumes that there'll only be a single tab component on the page. I overcame it in my project by changing `=` (attribute equals) selector to `$=` (attribute ends with) selector. This allows me to generate different tab IDs for different flashcards, like this: ```ruby <% tab_name = "tabs_#{word.id}" %> <% tab1_id = "#{tab_name}_tab1" %> <% tab2_id = "#{tab_name}_tab2" %> <div class="xs-12 sm-6 md-4 lg-3 col align-top flashcard-column"> <div class="card"> <div class="card-body"> <div class="row tabs"> <input id="<%= tab1_id %>" type="radio" name="<%= tab_name %>" checked> <label for="<%= tab1_id %>">Question</label> <input id="<%= tab2_id %>" type="radio" name="<%= tab_name %>"> <label for="<%= tab2_id %>">Answer</label> <div id="<%= tab_name %>_content1" class="content"> <h4 class="card-title flashcard-title"><%= word.question %></h4> <% if word.question_example %> <p class="card-text flashcard-example"><%= word.question_example %></p> <% end %> </div> <div id="<%= tab_name %>_content2" class="content"> <h4 class="card-title flashcard-title"><%= word.answer %></h4> <% if word.answer_example %> <p class="card-text flashcard-example"><%= word.answer_example %></p> <% end %> </div> </div> </div> </div> </div> ``` Here's a video to present how it works after the change: https://www.loom.com/share/6de1e443314f44f49c7b91e9b5875c93 Hope someone finds it useful
2020-07-30 21:43:39 +02:00
&[id$='tab#{$num}']:checked~div[id$='content#{$num}'] {
2017-12-23 09:43:23 +01:00
display: block;
}
}
2017-12-19 17:52:33 +01:00
}
label {
2020-06-01 23:02:51 +02:00
@include color('color', primary-light);
2017-12-19 17:52:33 +01:00
display: inline-block;
font-weight: 600;
2018-05-24 14:13:53 +02:00
margin: 0 0 -1px;
padding: 0.75rem;
2017-12-19 17:52:33 +01:00
text-align: center;
2017-12-23 09:43:23 +01:00
2017-12-19 17:52:33 +01:00
&:hover {
2020-06-01 23:02:51 +02:00
@include color('color', muted);
2017-12-19 17:52:33 +01:00
cursor: pointer;
}
}
}