Chris@0: /**
Chris@0:  * @file
Chris@0:  * Styling dropbuttons.
Chris@0:  */
Chris@0: 
Chris@0: /**
Chris@0:  * Reset styling for all elements.
Chris@0:  */
Chris@0: .js .dropbutton .dropbutton-action > input,
Chris@0: .js .dropbutton .dropbutton-action > a,
Chris@0: .js .dropbutton .dropbutton-action > button {
Chris@18:   margin: 0;
Chris@18:   padding: 0;
Chris@18:   text-align: left; /* LTR */
Chris@18:   text-decoration: none;
Chris@14:   color: #333;
Chris@0:   font-weight: 600;
Chris@0:   line-height: normal;
Chris@0:   -webkit-font-smoothing: antialiased;
Chris@0: }
Chris@0: [dir="rtl"].js .dropbutton .dropbutton-action > input,
Chris@0: [dir="rtl"].js .dropbutton .dropbutton-action > a,
Chris@0: [dir="rtl"].js .dropbutton .dropbutton-action > button {
Chris@18:   margin-left: 0; /* This is required to win over specificity of [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * */
Chris@0:   text-align: right;
Chris@0: }
Chris@0: .js .dropbutton-action.last {
Chris@0:   border-radius: 0 0 0 1em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .js .dropbutton-action.last {
Chris@0:   border-radius: 0 0 1em 0;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Overwrite Sevens button styling.
Chris@0:  */
Chris@0: .js .dropbutton-widget .button {
Chris@0:   border: 0;
Chris@0:   border-radius: 0;
Chris@18:   background: transparent;
Chris@0:   box-shadow: none;
Chris@0: }
Chris@0: .js .dropbutton-multiple .dropbutton {
Chris@0:   border-right: 0; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"].js .dropbutton-multiple .dropbutton {
Chris@0:   border-left: 0;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Show dropbutton elements as buttons when javascript is disabled
Chris@0:  */
Chris@0: .dropbutton {
Chris@0:   margin: 0;
Chris@0:   padding: 0;
Chris@0:   list-style-type: none;
Chris@0: }
Chris@0: .dropbutton li + li {
Chris@0:   margin-top: 10px;
Chris@0: }
Chris@0: .js .dropbutton li {
Chris@18:   margin-right: 0;
Chris@0:   margin-bottom: 0;
Chris@0: }
Chris@0: .js .dropbutton li + li {
Chris@0:   margin-top: 0;
Chris@0: }
Chris@0: 
Chris@0: @media screen and (min-width: 37.5625em) { /* 601px */
Chris@0:   .dropbutton li {
Chris@0:     display: inline-block;
Chris@0:   }
Chris@0:   .dropbutton li + li {
Chris@18:     margin-top: 0;
Chris@0:     margin-left: 1em;
Chris@0:   }
Chris@0:   .js .dropbutton li + li {
Chris@0:     margin-left: 0;
Chris@0:   }
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Copied styling for .button.
Chris@0:  */
Chris@0: .js .dropbutton-multiple .dropbutton-widget {
Chris@0:   border: 1px solid #a6a6a6;
Chris@0:   border-radius: 20em;
Chris@0:   background-color: #f2f1eb;
Chris@0:   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
Chris@0:   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
Chris@0:   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
Chris@0: }
Chris@0: .dropbutton-multiple.open .dropbutton-widget {
Chris@0:   border-radius: 1em;
Chris@0: }
Chris@0: .js .dropbutton-widget .dropbutton-action a,
Chris@0: .js .dropbutton-widget .dropbutton-action input,
Chris@0: .js .dropbutton-widget .dropbutton-action button {
Chris@0:   display: block;
Chris@0:   width: 100%;
Chris@18:   padding: 4px 1.5em;
Chris@18:   border-radius: 20em 0 0 20em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"].js .dropbutton-widget .dropbutton-action a,
Chris@0: [dir="rtl"].js .dropbutton-widget .dropbutton-action input,
Chris@0: [dir="rtl"].js .dropbutton-widget .dropbutton-action button {
Chris@0:   border-radius: 0 20em 20em 0;
Chris@0: }
Chris@0: .js .dropbutton-widget .dropbutton-action a:focus,
Chris@0: .js .dropbutton-widget .dropbutton-action input:focus,
Chris@0: .js .dropbutton-widget .dropbutton-action button:focus {
Chris@0:   text-decoration: underline;
Chris@0: }
Chris@0: .js .dropbutton-multiple.open .dropbutton-action a,
Chris@0: .js .dropbutton-multiple.open .dropbutton-action .button {
Chris@0:   border-radius: 0;
Chris@0: }
Chris@0: .js .dropbutton-multiple.open .dropbutton-action:first-child a,
Chris@0: .js .dropbutton-multiple.open .dropbutton-action:first-child .button {
Chris@0:   border-radius: 0.9em 0 0 0; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a,
Chris@0: [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button {
Chris@0:   border-radius: 0 0.9em 0 0;
Chris@0: }
Chris@0: .js .dropbutton-multiple.open .dropbutton-action:last-child a,
Chris@0: .js .dropbutton-multiple.open .dropbutton-action:last-child .button {
Chris@0:   border-radius: 0 0 0 0.9em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a,
Chris@0: [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button {
Chris@0:   border-radius: 0 0 0.9em 0;
Chris@0: }
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover,
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:hover,
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:hover,
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:focus,
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:focus,
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:focus {
Chris@18:   z-index: 3;
Chris@18:   color: #1a1a1a;
Chris@0:   background-color: #f9f8f6;
Chris@0:   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
Chris@0:   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
Chris@0:   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
Chris@0: }
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:active,
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:active,
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:active {
Chris@0:   text-decoration: none;
Chris@0:   background-color: #dfdfd9;
Chris@0:   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
Chris@0:   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
Chris@0:   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
Chris@0: }
Chris@0: .dropbutton .secondary-action {
Chris@0:   border-top: 1px solid #bfbfba;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Rare instances when a dropbutton is actually just a button.
Chris@0:  * Copied from Seven's buttons.css.
Chris@0:  */
Chris@0: .dropbutton-single .dropbutton-widget {
Chris@0:   position: static;
Chris@0:   display: inline-block;
Chris@18:   border: 0;
Chris@0: }
Chris@0: .dropbutton-single .dropbutton-action a {
Chris@18:   width: auto !important;
Chris@0:   padding: 4px 1.5em;
Chris@18:   -webkit-transition: all 0.1s;
Chris@18:   transition: all 0.1s;
Chris@18:   text-decoration: none;
Chris@18:   color: #333;
Chris@0:   border: 1px solid #a6a6a6;
Chris@0:   border-radius: 20em !important;
Chris@0:   background-color: #f2f1eb;
Chris@0:   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
Chris@0:   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
Chris@0:   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
Chris@0:   font-weight: 600;
Chris@0:   -webkit-font-smoothing: antialiased;
Chris@0: }
Chris@0: .dropbutton-single .dropbutton-action a:hover,
Chris@0: .dropbutton-single .dropbutton-action a:focus {
Chris@18:   text-decoration: none;
Chris@18:   color: #1a1a1a;
Chris@18:   outline: none;
Chris@0:   background-color: #f9f8f6;
Chris@0:   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
Chris@0:   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
Chris@0: }
Chris@0: .dropbutton-single .dropbutton-action a:hover,
Chris@0: .dropbutton-single .dropbutton-action a:focus {
Chris@0:   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
Chris@0: }
Chris@0: .dropbutton-single .dropbutton-action a:active {
Chris@18:   -webkit-transition: none;
Chris@18:   transition: none;
Chris@0:   background-color: #dfdfd9;
Chris@0:   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
Chris@0:   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
Chris@0:   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
Chris@0: }
Chris@14: .dropbutton .dropbutton-action .ajax-progress {
Chris@14:   position: absolute;
Chris@14:   z-index: 2;
Chris@14:   top: 0.2em;
Chris@14:   right: 0.2em;
Chris@14:   padding: 0 0 0 0.1em;
Chris@14: }
Chris@14: .dropbutton-multiple .dropbutton-action .ajax-progress {
Chris@18:   top: 0.15em;
Chris@14:   right: 2.2em;
Chris@14:   margin-right: 0;
Chris@14: }
Chris@14: .dropbutton-multiple .secondary-action .ajax-progress {
Chris@14:   top: auto;
Chris@14:   bottom: 0.3em;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * The dropdown trigger.
Chris@0:  */
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
Chris@0:   border-left: 1px solid #a6a6a6; /* LTR */
Chris@0:   outline: none;
Chris@0: }
Chris@0: [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
Chris@0:   border-right: 1px solid #a6a6a6;
Chris@0:   border-left: 0;
Chris@0: }
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
Chris@0:   border-radius: 0 20em 20em 0; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
Chris@0:   border-radius: 20em 0 0 20em;
Chris@0: }
Chris@0: .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
Chris@0:   border-radius: 0 1em 1em 0; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
Chris@0:   border-radius: 1em 0 0 1em;
Chris@0: }
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
Chris@18:   z-index: 3;
Chris@18:   text-decoration: none;
Chris@18:   color: #1a1a1a;
Chris@0:   background-color: #f9f8f6;
Chris@0:   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
Chris@0:   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
Chris@0:   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
Chris@0: }
Chris@0: .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
Chris@0:   background-color: #dfdfd9;
Chris@0:   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
Chris@0:   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
Chris@0:   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
Chris@0: }
Chris@0: .dropbutton-arrow {
Chris@18:   top: 54%;
Chris@18:   right: 35%; /* LTR */
Chris@0:   border-top-color: #333;
Chris@0: }
Chris@0: [dir="rtl"] .dropbutton-arrow {
Chris@18:   right: auto;
Chris@0:   left: 35%;
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 #333;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Form edit action theming.
Chris@0:  * Copied styling from .button--primary.
Chris@0:  */
Chris@0: .js .form-actions .dropbutton .dropbutton-action > * {
Chris@0:   color: #fff;
Chris@18:   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
Chris@0:   font-weight: 700;
Chris@0: }
Chris@0: .js .form-actions .dropbutton-widget {
Chris@18:   position: relative;
Chris@0:   border-color: #1e5c90;
Chris@0:   background-color: #0071b8;
Chris@0:   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
Chris@0:   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
Chris@0:   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
Chris@0: }
Chris@0: .form-actions .dropbutton-multiple.open .dropbutton-widget {
Chris@0:   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
Chris@0:   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
Chris@0: }
Chris@0: .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:hover,
Chris@0: .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:focus {
Chris@18:   color: #fff;
Chris@0:   background-color: #2369a6;
Chris@0:   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
Chris@0:   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
Chris@0:   box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
Chris@0: }
Chris@0: .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:active {
Chris@18:   border-color: #144b78;
Chris@0:   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
Chris@0:   background-image: linear-gradient(to bottom, #08639b, #0071b8);
Chris@0:   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
Chris@0: }
Chris@0: .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button,
Chris@0: .form-actions .dropbutton .secondary-action {
Chris@0:   border-color: #1e5c90;
Chris@0: }
Chris@0: .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
Chris@0:   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
Chris@0:   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
Chris@0: }
Chris@0: .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
Chris@0: .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
Chris@0:   background-color: #2369a6;
Chris@0:   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
Chris@0:   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
Chris@0: }
Chris@0: .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
Chris@18:   border-color: #144b78;
Chris@0:   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
Chris@0:   background-image: linear-gradient(to bottom, #08639b, #0071b8);
Chris@0:   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
Chris@0: }
Chris@0: .form-actions .dropbutton-arrow {
Chris@0:   border-top-color: #fff;
Chris@0: }
Chris@0: .form-actions .dropbutton-multiple.open .dropbutton-arrow {
Chris@0:   border-bottom: 0.3333em solid white;
Chris@0: }