Base styles for dropbuttons.
/** * @file * Base styles for dropbuttons. */ /** * When a dropbutton has only one option, it is a button. */ .dropbutton-wrapper, .dropbutton-wrapper div { box-sizing: border-box; } .js .dropbutton-wrapper { min-height: 2em; position: relative; width: auto; } @media screen and (max-width:600px) { .js .dropbutton-wrapper { width: 100%; } } .js .dropbutton-widget { position: absolute; top: 0; left: 0; /* LTR */ } [dir="rtl"].js .dropbutton-widget { right: 0; left: 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; text-align: right; /* LTR */ } [dir="rtl"].js .dropbutton li, [dir="rtl"].js .dropbutton a { text-align: left; } /** * 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-widget { border-radius: 5px; } .js .dropbutton-multiple .dropbutton-widget { padding-right: 2em; /* LTR */ } [dir="rtl"].js .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 a { border-radius: 5px; } .dropbutton-multiple .dropbutton a { /* LTR */ border-radius: 5px 0 0 5px; } [dir="rtl"] .dropbutton-multiple .dropbutton a { border-radius: 0 5px 5px 0; } .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 { /* LTR */ border-top-right-radius: 5px; border-bottom-right-radius: 5px; background: none; border: 0; cursor: pointer; display: block; height: 100%; margin: 0; padding: 0; width: 100%; } [dir="rtl"] .dropbutton-toggle button { border-radius: 5px 0 0 5px; } .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; }