drupalcampbristol/web/core/misc/dialog/off-canvas.dropbutton.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;
}