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