292 lines
7 KiB
CSS
292 lines
7 KiB
CSS
/**
|
|
* @file
|
|
* Styles for dropbuttons in the off-canvas dialog.
|
|
*/
|
|
|
|
#drupal-off-canvas .dropbutton-wrapper,
|
|
#drupal-off-canvas .dropbutton-widget {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
display: block;
|
|
position: static;
|
|
transition: none;
|
|
}
|
|
#drupal-off-canvas .dropbutton-widget {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: #277abd;
|
|
border-radius: 1em;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
text-transform: none;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
line-height: normal;
|
|
cursor: pointer;
|
|
transition: background 0.5s ease;
|
|
}
|
|
#drupal-off-canvas .dropbutton-widget:hover {
|
|
background: #2b8bd8;
|
|
}
|
|
|
|
/*
|
|
* Style dropbutton single.
|
|
*/
|
|
|
|
#drupal-off-canvas .dropbutton-single .dropbutton-action a {
|
|
padding: 0;
|
|
/* Overlap icon for trigger. */
|
|
margin-top: -2em;
|
|
height: 2.2em;
|
|
cursor: pointer;
|
|
}
|
|
#drupal-off-canvas .dropbutton-single .dropbutton-action:hover,
|
|
#drupal-off-canvas .dropbutton-single .dropbutton-action:focus,
|
|
#drupal-off-canvas .dropbutton-single .dropbutton-action a:hover,
|
|
#drupal-off-canvas .dropbutton-single .dropbutton-action a:focus {
|
|
text-decoration: none;
|
|
outline: none;
|
|
}
|
|
#drupal-off-canvas .dropbutton-widget .dropbutton {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
#drupal-off-canvas .dropbutton li,
|
|
#drupal-off-canvas .dropbutton a {
|
|
display: block;
|
|
width: auto;
|
|
padding: 4px 0;
|
|
text-align: left;
|
|
color: #555;
|
|
outline: none;
|
|
}
|
|
#drupal-off-canvas .dropbutton li:hover,
|
|
#drupal-off-canvas .dropbutton li:focus,
|
|
#drupal-off-canvas .dropbutton a:hover,
|
|
#drupal-off-canvas .dropbutton a:focus {
|
|
background: transparent;
|
|
color: #333;
|
|
outline: none;
|
|
}
|
|
|
|
/*
|
|
* Style dropbutton multiple.
|
|
*/
|
|
|
|
#drupal-off-canvas .dropbutton-multiple .dropbutton-widget {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
#drupal-off-canvas .dropbutton-multiple .dropbutton-widget:hover {
|
|
background-color: #2b8bd8;
|
|
}
|
|
|
|
/* Hide the other actions until the dropbutton is triggered. */
|
|
#drupal-off-canvas .dropbutton-multiple .dropbutton .secondary-action {
|
|
display: none;
|
|
}
|
|
|
|
/* The toggle to expand the button. */
|
|
#drupal-off-canvas .dropbutton-toggle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0; /* LTR */
|
|
bottom: 0;
|
|
display: block;
|
|
width: 2em;
|
|
color: #fff;
|
|
text-indent: 110%;
|
|
white-space: nowrap;
|
|
}
|
|
#drupal-off-canvas .dropbutton-toggle button {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0 solid transparent;
|
|
border-bottom-right-radius: 1em; /* LTR */
|
|
border-top-right-radius: 1em; /* LTR */
|
|
cursor: pointer;
|
|
}
|
|
#drupal-off-canvas .dropbutton-toggle button:hover,
|
|
#drupal-off-canvas .dropbutton-toggle button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* The toggle arrow. */
|
|
#drupal-off-canvas .dropbutton-arrow {
|
|
position: absolute;
|
|
display: block;
|
|
height: 0;
|
|
width: 0;
|
|
margin-top: 0;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
border-style: solid;
|
|
border-width: 0.3333em 0.3333em 0;
|
|
color: #fff;
|
|
line-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
#drupal-off-canvas span.dropbutton-arrow {
|
|
top: 7px;
|
|
right: 7px; /* LTR */
|
|
background: transparent;
|
|
}
|
|
#drupal-off-canvas span.dropbutton-arrow:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
#drupal-off-canvas .dropbutton-action > .js-form-submit.form-submit,
|
|
#drupal-off-canvas .dropbutton-toggle button {
|
|
position: relative;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/*
|
|
* Dropbuttons when in a table cell.
|
|
*/
|
|
|
|
/* Make sure table cell doesn't collapse around absolute positioned dropbutton. */
|
|
#drupal-off-canvas td .dropbutton-single {
|
|
min-width: 2em;
|
|
}
|
|
#drupal-off-canvas td .dropbutton-multiple {
|
|
min-width: 2em;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
border: 0;
|
|
}
|
|
#drupal-off-canvas td .dropbutton-multiple .dropbutton-action a,
|
|
#drupal-off-canvas td .dropbutton-multiple .dropbutton-action input,
|
|
#drupal-off-canvas td .dropbutton-multiple .dropbutton-action button {
|
|
width: auto;
|
|
padding: 0;
|
|
font-size: inherit;
|
|
}
|
|
#drupal-off-canvas td .dropbutton-wrapper {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Push the widget to the right so text expands left. */
|
|
#drupal-off-canvas td .dropbutton-widget {
|
|
position: absolute;
|
|
right: 12px; /* LTR */
|
|
padding: 0;
|
|
background: #277abd none;
|
|
}
|
|
|
|
/* Push the wrapper to the right edge of the td. */
|
|
#drupal-off-canvas td .dropbutton-single,
|
|
#drupal-off-canvas td .dropbutton-multiple {
|
|
float: right; /* LTR */
|
|
padding-right: 0;
|
|
margin-right: 0;
|
|
max-width: initial;
|
|
min-width: initial;
|
|
position: relative;
|
|
}
|
|
#drupal-off-canvas td .dropbutton-widget .dropbutton {
|
|
margin: 0;
|
|
width: 2em;
|
|
height: 2em;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Push text out of the way. */
|
|
#drupal-off-canvas td .dropbutton-multiple li,
|
|
#drupal-off-canvas td .dropbutton-multiple a {
|
|
margin-left: -9999px;
|
|
background: transparent;
|
|
}
|
|
#drupal-off-canvas td .dropbutton-multiple.open .dropbutton li,
|
|
#drupal-off-canvas td .dropbutton-multiple.open .dropbutton a {
|
|
margin-left: 0;
|
|
width: auto;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Collapse the button to a circle. */
|
|
#drupal-off-canvas td .dropbutton-toggle {
|
|
width: 2em;
|
|
height: 2em;
|
|
border-radius: 1em;
|
|
}
|
|
#drupal-off-canvas td .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Prevent list item from expanding its container. */
|
|
#drupal-off-canvas td ul.dropbutton li.edit {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
/* Make li text transparent above icon so it's clickable. */
|
|
#drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a {
|
|
color: transparent;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Put pencil icon in place of hidden 'edit' text on single buttons. */
|
|
#drupal-off-canvas td .dropbutton-single .edit:before {
|
|
content: '.';
|
|
display: block;
|
|
color: transparent;
|
|
background: transparent url(../icons/ffffff/pencil.svg) no-repeat center;
|
|
background-size: 14px;
|
|
}
|
|
|
|
/* Dropbutton when triggered expands to show secondary items. */
|
|
#drupal-off-canvas .dropbutton-multiple.open {
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Create visual separation if there is an adjacent button. */
|
|
#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
|
|
box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Triggered dropbutton expands to show secondary items. */
|
|
#drupal-off-canvas .dropbutton-multiple.open,
|
|
#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
|
|
display: block;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: none;
|
|
min-width: 0;
|
|
padding: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Triggered dropbutton in td expands to show secondary items. */
|
|
#drupal-off-canvas td .dropbutton-multiple.open .dropbutton,
|
|
#drupal-off-canvas .dropbutton-multiple.open .dropbutton .secondary-action {
|
|
display: block;
|
|
width: auto;
|
|
height: auto;
|
|
padding-right: 1em; /* LTR */
|
|
}
|
|
[dir="rtl"] #drupal-off-canvas td .dropbutton-multiple.open .dropbutton {
|
|
padding-left: 1em;
|
|
padding-right: inherit;
|
|
}
|
|
#drupal-off-canvas .dropbutton-multiple.open .dropbutton li a {
|
|
padding: 2px 1em;
|
|
}
|
|
|
|
/* When open, the toggle arrow points upward. */
|
|
#drupal-off-canvas .dropbutton-multiple.open span.dropbutton-arrow {
|
|
border-bottom: 0.3333em solid;
|
|
border-top-color: transparent;
|
|
top: 2px;
|
|
}
|