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