249 lines
6.3 KiB
CSS
249 lines
6.3 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: #333;
|
|
text-decoration: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
line-height: 12px;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-align: left; /* LTR */
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
[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 > * */
|
|
}
|
|
|
|
/**
|
|
* Overwrite Mediterans 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;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.js .dropbutton-widget .dropbutton-action a,
|
|
.js .dropbutton-widget .dropbutton-action input,
|
|
.js .dropbutton-widget .dropbutton-action button {
|
|
padding: 7px 20px;
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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: white;
|
|
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: white;
|
|
}
|
|
.dropbutton .secondary-action {
|
|
border-top: 1px solid #bfbfba;
|
|
}
|
|
|
|
/**
|
|
* Rare instances when a dropbutton is actually just a button.
|
|
*/
|
|
.dropbutton-single .dropbutton-widget,
|
|
.js td .dropbutton-single .dropbutton-widget {
|
|
border: 0;
|
|
position: static;
|
|
display: inline-block;
|
|
}
|
|
.js td .dropbutton-single {
|
|
display: inline-block;
|
|
}
|
|
.dropbutton-single .dropbutton-action a {
|
|
padding: 4px 1.5em;
|
|
border: 1px solid #a6a6a6;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
-webkit-transition: all 0.1s;
|
|
transition: all 0.1s;
|
|
-webkit-font-smoothing: antialiased;
|
|
width: auto;
|
|
}
|
|
.dropbutton-single .dropbutton-action a:hover,
|
|
.dropbutton-single .dropbutton-action a:focus {
|
|
background-color: white;
|
|
color: #1a1a1a;
|
|
text-decoration: none;
|
|
outline: transparent;
|
|
}
|
|
|
|
.dropbutton-single .dropbutton-action a:active {
|
|
background-color: white;
|
|
-webkit-transition: none;
|
|
transition: none;
|
|
}
|
|
.dropbutton .dropbutton-action .ajax-progress {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
right: -34px;
|
|
justify-content: flex-end;
|
|
}
|
|
.dropbutton .dropbutton-action .ajax-progress-throbber .throbber {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-top: 3px solid rgba(0,128,255, 0.3);
|
|
border-right: 3px solid rgba(0,128,255, 0.3);
|
|
border-bottom: 3px solid rgba(0,128,255, 0.3);
|
|
border-left: 3px solid #0678be;
|
|
}
|
|
.dropbutton-multiple .dropbutton-action .ajax-progress {
|
|
margin-right: 0;
|
|
}
|
|
.dropbutton-multiple .secondary-action .ajax-progress {
|
|
bottom: 0;
|
|
}
|
|
|
|
/**
|
|
* The dropdown trigger.
|
|
*/
|
|
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
|
|
border-left: 1px solid #a6a6a6; /* LTR */
|
|
}
|
|
[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:hover,
|
|
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
|
|
background-color: white;
|
|
color: #1a1a1a;
|
|
text-decoration: none;
|
|
z-index: 3;
|
|
outline: transparent;
|
|
}
|
|
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.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;
|
|
}
|
|
.js .form-actions .dropbutton-widget {
|
|
border-color: #1e5c90;
|
|
background-color: #0071b8;
|
|
position: relative;
|
|
}
|
|
|
|
.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;
|
|
color: #fff;
|
|
}
|
|
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:active {
|
|
border-color: #144b78;
|
|
}
|
|
.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:hover,
|
|
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
|
|
background-color: #2369a6;
|
|
}
|
|
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
|
|
border-color: #144b78;
|
|
}
|
|
.form-actions .dropbutton-arrow {
|
|
border-top-color: #fff;
|
|
}
|
|
.form-actions .dropbutton-multiple.open .dropbutton-arrow {
|
|
border-bottom: 0.3333em solid white;
|
|
}
|