Sha256: 81c1e47522a5e85d0113c92b84199055858ecbcf63c2ed51714f85a71380c252
Contents?: true
Size: 1.65 KB
Versions: 5
Compression:
Stored size: 1.65 KB
Contents
@import "../tokens/typography";
@import "../tokens/spacing";
@import "../tokens/colors";
// Another style should be borders like buttons
.vertical_nav_list {
$selector: ".vertical_nav_list";
&_title {
padding: 0 $space_xl $space_sm;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
&_border_item {
list-style: none;
border-bottom: 1px solid $sky;
&:last-child {
border-bottom: 0;
}
}
&_item,
&_border_item {
&_active,
&.active {
background-color: $p_royal_opacity_1;
#{$selector}_item_link,
#{$selector}_border_item_link {
border-color: $power_royal;
&_icon {
color: $power_royal;
}
&_text {
color: $power_royal;
}
}
}
&_link {
text-decoration: none;
display: flex;
align-items: center;
padding: $space_sm $space_xl;
border: 0 solid transparent;
border-width: 0 0 0 3px;
transition-property: color, border-color, background-color;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
&_icon {
font-size: $font_large;
margin-right: $space_sm;
color: $ink_lightest;
}
&_text {
font-size: $font_base;
font-weight: $bold;
color: $ink;
}
&:hover {
background-color: rgba($power_royal, 0.03);
#{$selector}_item_link_icon,
#{$selector}_border_item_link_icon {
color: $power_royal;
}
#{$selector}_item_link_text,
#{$selector}_border_item_link_text {
color: $power_royal;
}
}
}
}
}
Version data entries
5 entries across 5 versions & 1 rubygems