Code for the littler Buttons the Computer used in the Turing Machine portion of the book.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
buttons-computer/sass/_tabs.scss

67 lines
1.1 KiB

// Tabs
.tab {
align-items: center;
border-bottom: $border-width solid $border-color;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: $unit-1 0 ($unit-1 - $border-width) 0;
.tab-item {
margin-top: 0;
a {
border-bottom: $border-width-lg solid transparent;
color: inherit;
display: block;
margin: 0 $unit-2 0 0;
padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
text-decoration: none;
&:focus,
&:hover {
color: $link-color;
}
}
&.active a,
a.active {
border-bottom-color: $primary-color;
color: $link-color;
}
&.tab-action {
flex: 1 0 auto;
text-align: right;
}
.btn-clear {
margin-top: -$unit-1;
}
}
&.tab-block {
.tab-item {
flex: 1 0 0;
text-align: center;
a {
margin: 0;
}
.badge {
&[data-badge]::after {
position: absolute;
right: $unit-h;
top: $unit-h;
transform: translate(0, 0);
}
}
}
}
&:not(.tab-block) {
.badge {
padding-right: 0;
}
}
}