2015-08-17 17:00:26 -07:00
/ * *
* @ file
* Base styles for dropbuttons .
* /
/ * *
* When a dropbutton has only one option , it is simply a button .
* /
. dropbutton-wrapper ,
. dropbutton-wrapper div {
box-sizing : border-box ;
}
. js . dropbutton-wrapper ,
. js . dropbutton-widget {
display : block ;
position : relative ;
}
2018-11-23 12:29:20 +00:00
@ media screen and ( max-width : 600px ) {
2015-08-17 17:00:26 -07:00
. js . dropbutton-wrapper {
width : 100 % ;
}
}
/* Splitbuttons */
2018-11-23 12:29:20 +00:00
@ media screen and ( min-width : 600px ) {
2015-08-17 17:00:26 -07:00
. form-actions . dropbutton-wrapper {
float : left ; /* LTR */
}
[ dir = "rtl" ] . form-actions . dropbutton-wrapper {
float : right ;
}
}
. js . form-actions . dropbutton-widget {
position : static ;
}
. js td . dropbutton-widget {
position : absolute ;
}
. js td . dropbutton-wrapper {
min-height : 2em ;
}
. js td . dropbutton-multiple {
padding-right : 10em ; /* LTR */
margin-right : 2em ; /* LTR */
max-width : 100 % ;
}
[ dir = "rtl" ] . js td . dropbutton-multiple {
padding-right : 0 ;
margin-right : 0 ;
padding-left : 10em ;
margin-left : 2em ;
}
. js td . dropbutton-multiple . dropbutton-action a ,
. js td . dropbutton-multiple . dropbutton-action input ,
. js td . dropbutton-multiple . dropbutton-action button {
width : auto ;
}
/* UL styles are over-scoped in core, so this selector needs weight parity. */
. js . dropbutton-widget . dropbutton {
list-style-image : none ;
list-style-type : none ;
margin : 0 ;
overflow : hidden ;
padding : 0 ;
}
. js . dropbutton li ,
. js . dropbutton a {
display : block ;
outline : none ;
}
. js . dropbutton li : hover ,
. js . dropbutton li : focus ,
. js . dropbutton a : hover ,
. js . dropbutton a : focus {
outline : initial ;
}
/ * *
* The dropbutton styling .
*
* A dropbutton is a widget that displays a list of action links as a button
* with a primary action . Secondary actions are hidden behind a click on a
* twisty arrow .
*
* The arrow is created using border on a zero-width , zero-height span .
* The arrow inherits the link color , but can be overridden with border colors .
* /
. js . dropbutton-multiple . dropbutton-widget {
padding-right : 2em ; /* LTR */
}
. js [ dir = "rtl" ] . dropbutton-multiple . dropbutton-widget {
padding-left : 2em ;
padding-right : 0 ;
}
. dropbutton-multiple . open ,
. dropbutton-multiple . open . dropbutton-widget {
max-width : none ;
}
. dropbutton-multiple . open {
z-index : 100 ;
}
. dropbutton-multiple . dropbutton . secondary-action {
display : none ;
}
. dropbutton-multiple . open . dropbutton . secondary-action {
display : block ;
}
. dropbutton-toggle {
bottom : 0 ;
display : block ;
position : absolute ;
right : 0 ; /* LTR */
text-indent : 110 % ;
top : 0 ;
white-space : nowrap ;
width : 2em ;
}
[ dir = "rtl" ] . dropbutton-toggle {
left : 0 ;
right : auto ;
}
. dropbutton-toggle button {
background : none ;
border : 0 ;
cursor : pointer ;
display : block ;
height : 100 % ;
margin : 0 ;
padding : 0 ;
width : 100 % ;
}
. dropbutton-toggle button : hover ,
. dropbutton-toggle button : focus {
outline : initial ;
}
. dropbutton-arrow {
border-bottom-color : transparent ;
border-left-color : transparent ;
border-right-color : transparent ;
border-style : solid ;
border-width : 0 . 3333em 0 . 3333em 0 ;
display : block ;
height : 0 ;
line-height : 0 ;
position : absolute ;
right : 40 % ; /* 0.6667em; */ /* LTR */
top : 50 % ;
margin-top : -0 . 1666em ;
width : 0 ;
overflow : hidden ;
}
[ dir = "rtl" ] . dropbutton-arrow {
left : 0 . 6667em ;
right : auto ;
}
. dropbutton-multiple . open . dropbutton-arrow {
border-bottom : 0 . 3333em solid ;
border-top-color : transparent ;
top : 0 . 6667em ;
}