Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
166 lines (142 sloc) 4.26 KB
// ------------------------------
// edX Pattern Library: Utilities - Dropdown Menu
//
// About: Contains base styling for alerts.
// ----------------------------
// #CONFIG
// #UTILITIES
// #GENERAL
// #INDIVIDUAL CASES
// ----------------------------
// #CONFIG
// ----------------------------
$dropdown-menu-title-height: 40px !default;
$dropdown-menu-button-height: calc(#{$dropdown-menu-title-height} * 0.75) !default;
$dropdown-menu-button-top-offset: 6px !default;
$dropdown-menu-image-title-spacer: 6px !default;
$dropdown-menu-list-spacing-base: spacing-vertical(x-small) !default;
$dropdown-menu-button-font-size: font-size(small) !default;
$dropdown-menu-list-font-size: font-size(base) !default;
$dropdown-menu-z-index: z-index(very-front) !default;
$dropdown-menu-list-text-align: left !default;
$dropdown-menu-width: 170px !default;
$dropdown-menu-focus-border-color: palette(primary, light) !default;
$dropdown-link-hover-color: palette(primary, light) !default;
$dropdown-menu-font-color: $black !default;
$dropdown-menu-list-font-color: $black !default;
$dropdown-menu-list-hover-color: palette(primary, base) !default;
$dropdown-menu-background-color: $white !default;
$dropdown-menu-border-color: $gray !default;
$dropdown-menu-list-border-color: palette(grayscale, dark) !default;
$dropdown-menu-list-border-bottom: 1px dotted $dropdown-menu-list-border-color !default;
// ----------------------------
// #UTILITIES
// ----------------------------
// ----------------------------
// #GENERAL
// ----------------------------
.dropdown-menu-container {
height: $dropdown-menu-title-height;
position: relative;
display: inline;
.dropdown-menu {
list-style-type: none;
}
.menu-title {
font: {
family: $font-family-sans-serif;
size: $dropdown-menu-button-font-size;
weight: font-weight(bold);
}
color: $dropdown-menu-font-color;
line-height: $dropdown-menu-title-height;
&:active,
&:hover,
&:focus {
color: $dropdown-link-hover-color;
}
}
.menu-image {
@include margin-right($dropdown-menu-image-title-spacer);
width: $dropdown-menu-title-height;
height: $dropdown-menu-title-height;
}
.menu-button {
@extend %text-center;
background: none;
width: $dropdown-menu-button-height;
height: $dropdown-menu-button-height;
padding: 0;
margin-top: $dropdown-menu-button-top-offset;
border: none;
vertical-align: top;
position: relative;
&:active,
&:hover,
&:focus {
&:after {
border-top-color: $dropdown-menu-focus-border-color;
}
}
// The down caret \/
&.default-icon:after {
content: '';
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: $dropdown-menu-font-color;
border-top-width: 6px;
position: absolute;
top: 11px;
right: 10px;
}
}
.dropdown-menu {
position: absolute;
top: $dropdown-menu-button-height;
right: 0;
background: $dropdown-menu-background-color;
z-index: $dropdown-menu-z-index;
border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0,0.3);
border: 1px solid $dropdown-menu-border-color;
margin-top: 0;
padding: $dropdown-menu-list-spacing-base;
width: $dropdown-menu-width;
// The background triangle /\ that looks like a speech bubble
&:before {
@include transform( rotate(-45deg) );
background: $dropdown-menu-background-color;
width: 12px;
height: 12px;
border: 1px solid $dropdown-menu-border-color;
border-bottom-color: transparent;
border-left-color: transparent;
content: '';
display: block;
position: absolute;
right: 7px;
top: -7px;
}
.dropdown-item {
@include text-align($dropdown-menu-list-text-align);
padding-bottom: $dropdown-menu-list-spacing-base;
margin-bottom: $dropdown-menu-list-spacing-base;
position: relative;
&:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
}
a {
color: $dropdown-menu-list-font-color;
font-size: $dropdown-menu-list-font-size;
&:hover,
&:active,
&:focus {
color: $dropdown-menu-list-hover-color;
text-decoration: underline;
}
}
}
}
}