@charset "utf-8"; | |
@import "choose"; | |
@import "lengths"; | |
@import "icons"; | |
/** | |
* Definitions for menu design. | |
*/ | |
ul.menu { | |
position: absolute; | |
padding: 0; | |
margin: 0; | |
text-indent: 0; | |
opacity: 0; | |
&.visible { | |
opacity: 1; | |
} | |
list-style: { | |
type: none; | |
position: outside; | |
} | |
&, | |
> span.pref:not(:empty) { | |
box-sizing: border-box; | |
text-shadow: none; | |
font-weight: normal; | |
z-index: 120; | |
} | |
> li, | |
> span.pref:not(.active) { | |
@include choose-item; | |
} | |
> li, | |
> span.pref:not(:empty) { | |
@include choose-item; | |
box-shadow: $choose-box-shadow; | |
cursor: pointer; | |
padding: $item-padding; | |
white-space: normal; | |
border: { | |
width: $border-size; | |
bottom-width: 0px; | |
top-width: 0px; | |
style: solid; | |
} | |
} | |
span.desc { | |
display: block; | |
font-size: 75%; | |
} | |
div.lengthField { | |
border: { | |
color: transparent; | |
width: $border-size; | |
} | |
padding: $item-padding; | |
padding-top: 0; | |
padding-bottom: 0; | |
span { | |
display: block !important; | |
line-height: 0; | |
color: transparent; | |
} | |
} | |
/** | |
* Ruler | |
*/ | |
> div.ruler { | |
position: absolute; | |
right: 0px; | |
margin-right: -14px; | |
background-color: transparent; | |
width: 14px; | |
height: 100%; | |
opacity: 0; | |
cursor: pointer; | |
transition: opacity .5s ease 1s; | |
> span { | |
@include choose-active; | |
position: absolute; | |
display: block; | |
right: 0; | |
width: 10px; | |
z-index: 115; | |
border: { | |
radius: 4px; | |
width: 2px; | |
style: solid; | |
} | |
} | |
&.active > span { | |
@include choose-hover; | |
} | |
> div { | |
@include choose-item; | |
box-shadow: $choose-box-shadow; | |
position: absolute; | |
right: 0; | |
width: 10px; | |
height: 100%; | |
border: { | |
radius: 4px; | |
width: 2px; | |
style: solid; | |
} | |
} | |
} | |
&:active > div.ruler, | |
&:hover > div.ruler, | |
> div.ruler.active { | |
transition: opacity .1s ease; | |
opacity: 1; | |
} | |
/** | |
* List items | |
*/ | |
> li, | |
div.lengthField { | |
padding-right: 1.6em; | |
} | |
> li { | |
&:first-of-type { | |
border-top: { | |
width: $border-size; | |
left-radius: $standard-border-radius; | |
right-radius: $standard-border-radius; | |
} | |
} | |
&:last-of-type { | |
border-bottom: { | |
width: $border-size; | |
left-radius: $standard-border-radius; | |
right-radius: $standard-border-radius; | |
} | |
} | |
mark { | |
text-decoration: underline; | |
background-color: transparent; | |
color: inherit; | |
font-weight: bold; | |
} | |
} | |
> li.active, | |
> span.pref.active { | |
@include choose-active; | |
} | |
> li:hover, | |
> span.pref:hover { | |
@include choose-hover; | |
} | |
/** | |
* Default prefix view | |
*/ | |
> span.pref:not(:empty) { | |
position: absolute; | |
min-width: 5px; | |
font-size: 80%; | |
left: 0; | |
bottom: 0; | |
display: block; | |
margin-bottom: -2.1em; | |
padding: 2px 6px; | |
border: { | |
radius: $standard-border-radius; | |
width: $border-size; | |
} | |
} | |
} | |
/** | |
* Rolling menu | |
*/ | |
ul.menu.roll { | |
> li:first-of-type { | |
&:not(.no-more):before { | |
position: absolute; | |
font-family: "FontAwesome"; | |
content: $fa-up; | |
right: .5em; | |
top: .4em; | |
} | |
} | |
> li:last-of-type { | |
&:not(.no-more):before { | |
position: absolute; | |
font-family: "FontAwesome"; | |
content: $fa-down; | |
right: .5em; | |
bottom: .4em; | |
} | |
} | |
&:not(.visible) { | |
height: 0; | |
} | |
} | |
/** | |
* Sorting menu | |
*/ | |
ul.menu.sort { | |
position: relative; | |
display: inline-block; | |
> li::before { | |
content: ''; | |
} | |
> li.active:hover { | |
@include choose-remove; | |
} | |
} | |
/** | |
* select menu | |
*/ | |
span.menu.select { | |
> span { | |
z-index: 105; | |
} | |
> ul.menu.roll { | |
display: none; | |
z-index: -100; | |
&.visible { | |
display: block; | |
z-index: 110; | |
} | |
} | |
} |