63 lines
1.2 KiB
SCSS
63 lines
1.2 KiB
SCSS
|
@import "../variables/mixins";
|
||
|
|
@import "../variables/colors";
|
||
|
|
@import "../variables/sizes";
|
||
|
|
|
||
|
|
// Append a standard dropdown triangle icon next to the right of the text of the link, like "foobar v".
|
||
|
|
// Usage is as simple as:
|
||
|
|
// <a href="#" class="DropdownLink">My text</a>
|
||
|
|
//
|
||
|
|
// To adapt color (e.g. to use on a dark background) you can use the white icon like:
|
||
|
|
// <a href="#" class="DropdownLink DropdownLink--white">My text</a>
|
||
|
|
|
||
|
|
.DropdownLink {
|
||
|
|
position: relative;
|
||
|
|
padding-right: $sMargin-elementInline;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
right: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-top: 4px solid $cIcons-default;
|
||
|
|
border-right: 4px solid transparent;
|
||
|
|
border-left: 4px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
&::after {
|
||
|
|
border-top-color: $cIcons-active;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.Dropdownlink--secondary {
|
||
|
|
&::after {
|
||
|
|
border-top-color: $cTypography-secondary;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-top-color: $cTypography-secondary;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
border-top-color: $cTypography-secondary;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.DropdownLink--white {
|
||
|
|
&::after {
|
||
|
|
border-top-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-top-color: white;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
border-top-color: white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|