app/assets/stylesheets/modules/_tabs.scss
.Tabs {
margin-top: 2em;
margin-bottom: 0;
padding-left: 0;
@include clear-links;
a { outline: 0 }
.Tab:not(.active) {
@include color-links($blue, lighten($blue, 10%));
a {
i {
position: relative;
top: -1px;
}
&:active i {
top: 0;
}
}
}
i.Tab_icon {
font-size: 1.5em;
display:block;
text-align: center;
}
.Tab {
display: inline-block;
padding: 0.7em 0.9em;
position: relative;
top: 1px;
font-weight: 600;
min-width: 3em;
text-align: center;
}
.active.Tab {
background-color: $even-lighter-gray;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
border-top: 1px solid $lighter-gray;
border-left: 1px solid $lighter-gray;
border-right: 1px solid $lighter-gray;
a {
color: $gray;
text-shadow: 0px 1px 0px white; // letterpress effect
cursor: default;
}
}
@include at-breakpoint($bp-mobile-horizontal) {
.Tab { padding: 1em 1.5em; }
}
@include at-breakpoint($bp-tablet) {
i.tab_icon{ font-size: 2em; }
.Tab { padding: 1em 1.5em; }
}
@include at-breakpoint($bp-tablet-horizontal) {
.Tab { padding: 1em 1.7em; }
}
@include at-breakpoint($bp-desktop) {
.Tab { padding: 1em 2.5em; }
}
}
@include till-breakpoint($bp-tablet) {
.Title-next-to-tab { padding: 0.5em; }
}
@include at-breakpoint($bp-tablet) {
.Tabs { float:right; min-width: 50%; }
.Title-next-to-tab { float: left; margin-right: 2em; }
}