You are here

form.css in AT Tools 8.2

@charset "UTF-8";
/**
 * Form Base
 * Set base styles for form elements.
 ============================================================================ */
input,
select,
button,
textarea {
  font-size: 1rem;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  max-width: 100%;
  width: 99.999%;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid;
  transition: all, 225ms, ease-in-out;
}

textarea:focus,
select:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus {
  outline: 0;
  outline: thin dotted \9;
}

textarea[disabled],
select[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled] {
  cursor: not-allowed;
}

input {
  line-height: 1;
  vertical-align: middle;
  height: 2rem;
  padding: 0 0.5rem;
}

input[type="checkbox"], input[type="radio"] {
  min-width: 13px;
  display: inline-block;
  position: relative;
  bottom: 0.0625rem;
  margin-left: 0.1875rem;
  width: auto;
  height: auto;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

textarea,
button,
.button,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="submit"],
input[type="tel"],
input[type="text"],
input[type="url"] {
  -webkit-appearance: none;
}

input[type="time"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"] {
  background-clip: padding-box;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

select {
  height: 2rem;
}

textarea {
  padding: 0.5rem;
}

textarea,
select[size],
select[multiple] {
  height: auto;
}

label {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  display: block;
}

label.option {
  font-weight: normal;
  display: inline-block;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

details {
  border: 1px solid;
  border-radius: 2px;
  display: block;
  margin: 1rem 0;
  max-height: 3.125rem;
  overflow-y: hidden;
  transition: all 450ms ease-in-out;
}

details:focus {
  outline: none !important;
}

details .details-wrapper {
  transition: all 650ms ease-in-out;
}

details > summary:before {
  font-family: FontAwesome, sans-serif;
  float: left;
  margin: -1px 0 0;
  height: 1rem;
  width: 1rem;
  display: none;
}

.fa-loaded details > summary:before {
  display: block;
}

[dir="rtl"] details > summary:before {
  float: right;
}

details[open] > summary:before {
  content: "";
}

details:not([open]) > summary:before {
  content: "";
}

[dir="rtl"] details:not([open]) > summary:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.js details:not([open]) .details-wrapper {
  display: block;
  visibility: hidden;
  opacity: 0.1;
}

.js details:not([open]) > summary:before {
  content: "";
}

[dir="rtl"] .js details:not([open]) > summary:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.js details[open] {
  max-height: 2500px;
  overflow: scroll;
}

.js details[open] .details-wrapper {
  opacity: 1;
  visibility: visible;
}

.js details[open] > summary:before {
  content: "";
}

summary {
  cursor: pointer;
  display: block;
  padding: 0.625rem;
  outline: 0;
}

details summary::-webkit-details-marker {
  display: none;
}

button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled],
a.button_disabled {
  box-shadow: none;
  opacity: 0.7;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}

input:invalid,
button:invalid,
.button:invalid,
select:invalid,
textarea:invalid {
  box-shadow: none;
}

input:focus::-webkit-input-placeholder {
  opacity: 0.2;
}

input:focus:-moz-placeholder {
  opacity: 0.2;
}

input:focus::-moz-placeholder {
  opacity: 0.2;
}

input:focus:-ms-input-placeholder {
  opacity: 0.2;
}

/**
 * Form Component
 *  - common styles for form elements and classes.
 ============================================================================ */
.form-text {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.form-text[name="subject[0][value]"] {
  width: 50%;
}

@media screen and (max-width: 45em) {
  .form-text[name="subject[0][value]"] {
    width: 100%;
  }
}

.form-type-select__select-wrapper:not(.is-multiple) {
  position: relative;
  display: inline-block;
  width: 100%;
}

.form-type-select__select-wrapper:not(.is-multiple):after {
  font-family: FontAwesome, sans-serif;
  content: "\f0dc";
  position: absolute;
  top: 0.25rem;
  right: 0.75rem;
  pointer-events: none;
  display: none;
}

.form-type-select__select-wrapper.is-multiple {
  display: block;
}

.form-select {
  min-width: 50%;
  margin: 0;
  font-size: 16px;
}

@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) or ((-moz-appearance: none) and (mask-type: alpha)) {
  .fa-loaded .form-type-select__select-wrapper:not(.is-multiple):after {
    display: block;
  }
  .form-type-select__select-wrapper:not(.is-multiple) .form-select {
    text-indent: 0.1875rem;
    padding-right: 1.5rem;
    margin-right: 0.5rem;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
}

.form-item,
.form-radios,
.form-checkboxes {
  margin: 0 0 1rem;
}

.form-type-radio .option,
.form-type-checkbox .option {
  padding: 0.3125rem 0.5rem;
  border-radius: 2px;
}

.form-type-radio .option:focus, .form-type-radio .option:hover,
.form-type-checkbox .option:focus,
.form-type-checkbox .option:hover {
  cursor: pointer;
}

.form-actions {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 1rem 0;
}

.form-actions .button {
  margin-right: 0.25rem;
}

.field-type-text-long textarea {
  border-radius: 2px 2px 0 0;
}

.form-textarea-wrapper textarea {
  display: block;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.text-format-wrapper .text-full {
  width: 100%;
}

.filter-wrapper {
  border: 1px solid;
  border-top: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.filter-wrapper .form-type-select__select-wrapper,
.filter-wrapper .form-type-select__select-wrapper select {
  width: auto !important;
}

.filter-guidelines {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

.filter-guidelines .filter-guidelines-item {
  margin: 0.75rem 0;
}

.filter-help {
  float: none;
  margin-right: auto;
  font-size: 0.875rem;
}

.tips {
  padding-left: 0;
  font-size: 0.875rem;
}

.tips li {
  list-style: none;
}

.description {
  font-size: 0.75rem;
}

h4.label,
.form-composite > legend {
  font-size: inherit;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.form-required:after {
  font-family: sans-serif;
  content: " \002A ";
  line-height: 1;
}

abbr.form-required, abbr.ajax-changed {
  border-bottom: none;
}

abbr.tabledrag-changed {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  word-wrap: normal;
  font: 0/0 a;
}

.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 1px solid;
}

.container-inline {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.container-inline div,
.container-inline label {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 0.375rem;
}

.container-inline label:after {
  content: ':';
}

.container-inline .form-actions, .container-inline.form-actions {
  margin-top: 0;
  margin-bottom: 0;
}

.container-inline .yamlform-flex--container > .form-item {
  margin-right: 0.375rem;
}

.form-type-radios .container-inline label:after {
  content: none;
}

.form-type-radios .container-inline .form-type-radio {
  margin: 0 1rem;
}

.form-composite--inline legend {
  float: left;
  margin-right: 0.5em;
  margin-top: 1px;
}

@media screen and (min-width: 321px) {
  .form-composite--inline legend {
    margin-right: 1em;
  }
}

.form-composite--inline .fieldset-legend:after {
  content: ':';
}

.form-composite--inline input[type="radio"],
.form-composite--inline label {
  vertical-align: middle;
}

.form-composite--inline label:after {
  content: none;
}

@media screen and (min-width: 480px) {
  .form-composite--inline .form-item {
    margin-right: 1.25em;
  }
}

.ui-autocomplete li.ui-menu-item a.ui-state-focus,
.autocomplete li.ui-menu-item a.ui-state-hover {
  background-color: #0072b9;
  color: #fff;
  margin: 0;
}

details > .details-wrapper {
  margin: 1rem;
}

.collapse-processed > summary {
  padding: 0.625rem;
}

.collapse-processed > summary:before {
  font-family: FontAwesome, sans-serif;
  content: "";
  float: left;
  margin: -1px 0 0;
  height: 1rem;
  width: 1rem;
  display: none;
}

.fa-loaded .collapse-processed > summary:before {
  display: block;
}

[dir="rtl"] .collapse-processed > summary:before {
  float: right;
}

.collapse-processed:not([open]) > summary:before {
  content: "";
}

[dir="rtl"] .collapse-processed:not([open]) > summary:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-tabs {
  background-color: #ffffff;
}

.block-list-secondary {
  border-bottom-width: 1px;
  box-sizing: border-box;
  padding: 0 0.75rem;
}

.reset-appearance {
  transition: none;
  box-shadow: none;
  border-radius: 0;
}

.reset-appearance:hover, .reset-appearance:focus {
  background: none;
  color: inherit;
}

.cke_editable {
  padding: 5px 10px;
}

.field-storage-config-edit-form .container-inline {
  display: block;
}

.field-storage-config-edit-form .form-select {
  min-width: unset;
}

/**
 * Buttons
 * We include button styling separate (from _forms.scss, Form Base/Theme in base.css)
 * mainly because the form styles are quite long already and we often want to add
 * unique button variants.
 *
 *  - applies to elements with class "button", includes styles for:
 *  - input buttons
 *  - anchor links styled as buttons
 *  - drop buttons
 *  - action link buttons
 ============================================================================ */
button,
.button {
  width: auto;
  position: relative;
  box-sizing: border-box;
  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  transition: background-color, .15s, ease-in-out;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-weight: 400;
  white-space: nowrap;
  height: 2rem;
  padding: 0 0.625rem;
}

button:hover, button:focus,
.button:hover,
.button:focus {
  text-decoration: none;
}

a.button {
  display: inline-block;
  text-align: center;
  line-height: 2rem;
}

.un-button,
.un-button:hover,
.un-button:focus,
.un-button:active {
  border: none;
  box-shadow: none;
  background-color: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  opacity: 1;
  height: auto;
}

.button--danger {
  border: 0;
  box-shadow: none;
}

.button-action {
  display: inline-block;
}

.button-action:before {
  font-family: FontAwesome, sans-serif;
  content: "";
  vertical-align: middle;
  font-size: 0.75rem;
  padding-right: 0.25rem;
  line-height: 2rem;
  display: none;
}

.fa-loaded .button-action:before {
  display: inline-block;
}

.button-action[data-drupal-link-system-path="user/login"]:before {
  content: "";
  vertical-align: baseline;
  font-size: 1rem;
  padding-right: 0.4375rem;
}

.action-links__button {
  padding: 0;
  margin: 1rem 0;
}

@media screen and (max-width: 45em) {
  .action-links__button a {
    display: block;
  }
}

li[class*="action--"] {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

/* Drop buttons */
.dropbutton-widget {
  border: 1px solid;
  border-radius: 2px;
}

.dropbutton-wrapper {
  display: block;
  position: relative;
  min-height: 2rem;
  margin-right: 0.25rem;
  margin-bottom: 1rem;
}

.dropbutton input {
  text-align: left;
  height: 1.875rem;
}

.dropbutton .dropbutton-action > * {
  white-space: nowrap;
  line-height: normal;
}

.dropbutton .dropbutton-action a {
  padding: 0.125rem 0.625rem;
}

.dropbutton .secondary-action {
  border-top: 1px solid;
  border-radius: 0 0 0 2px;
}

.dropbutton .secondary-action .button {
  border: 0;
  width: 100%;
}

.dropbutton .secondary-action .button:hover, .dropbutton .secondary-action .button:focus {
  border-radius: 0 0 0 2px;
}

.dropbutton .dropbutton-toggle button {
  background: none;
  box-shadow: none;
}

.dropbutton .dropbutton-toggle button:hover, .dropbutton .dropbutton-toggle button:focus, .dropbutton .dropbutton-toggle button:active {
  background: none;
  box-shadow: none;
}

[dir="rtl"] .dropbutton {
  margin: 0 3px 0 0;
}

[dir="rtl"] .dropbutton input {
  text-align: right;
}

.dropbutton-multiple .dropbutton {
  border-right: 1px solid;
}

.dropbutton-multiple .dropbutton .dropbutton-action > * {
  margin-right: 0;
  border: 0;
}

.dropbutton-multiple .dropbutton .dropbutton-action .button {
  border-radius: 2px 0 0 2px;
  width: 100%;
  border: 0;
  margin: 0;
}

[dir="rtl"] .dropbutton-multiple .dropbutton {
  border-left: 1px solid;
  border-right: 0;
}

[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
  margin-left: 0;
}

.dropbutton-multiple.open .dropbutton-action .button {
  border-radius: 2px 0 0 0;
}

.dropbutton-multiple .dropbutton .secondary-action .button {
  border-radius: 0 0 0 2px;
}

.dropbutton-multiple .dropbutton .secondary-action .button:hover, .dropbutton-multiple .dropbutton .secondary-action .button:focus {
  border-radius: 0 0 0 2px;
}

button.link, button.link:hover, button.link:focus {
  color: #0066cc;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

button.tableresponsive-toggle {
  float: right;
  overflow: hidden;
}

label button.link {
  font-weight: 700;
}

.ui-button-text-only .ui-button-text {
  padding: 0;
}

.ui-button-text-only button:hover, .ui-button-text-only button:focus,
.ui-button-text-only .button:hover,
.ui-button-text-only .button:focus {
  background: inherit !important;
  color: #292929 !important;
}

.tabledrag-toggle-weight {
  font-size: 0.75rem;
}

/**
 * Inline form styles.
 ============================================================================ */
.form--inline .form-item {
  float: left;
  margin-right: 0.75rem;
}

.form--inline .form-item-separator {
  margin-top: 1.25rem;
  margin-right: 1rem;
  margin-left: 0.75rem;
}

.form--inline .form-actions {
  clear: left;
}

/**
 * Progress bar.
 *  - unlike Drupal core we don't include all the vendor prefixes, instead
 *    we just rely on autoprefixer doing it's thing.
 * @see progress.js
 ============================================================================ */
.progress {
  margin: 1.25rem 0;
}

.progress__track {
  border-color: #b3b3b3;
  border-radius: 10em;
  background-color: #f2f1eb;
  background-image: linear-gradient(#e7e7df, #f0f0f0);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16);
}

.progress__bar {
  border: 1px #07629a solid;
  background-color: #057ec9;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15)), linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
  background-size: 40px 40px;
  margin-top: -1px;
  margin-left: -1px;
  padding: 0 1px;
  height: 16px;
  border-radius: 10em;
  -webkit-animation: animate-stripes 3s linear infinite;
          animation: animate-stripes 3s linear infinite;
  transition: width 0.5s ease-out;
}

@-webkit-keyframes animate-stripes {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 0 0, -80px 0;
  }
}

@keyframes animate-stripes {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 0 0, -80px 0;
  }
}

/**
 * Form Tables
 * Table select and table drag are form elements.
 ============================================================================ */
tr.drag {
  background-color: #fffff1;
}

tr.drag-previous {
  background-color: #ffd;
}

a.tabledrag-handle .handle {
  height: auto;
  margin: -0.2em 0.5em 0;
  width: auto;
}

body div.tabledrag-changed-warning {
  margin-bottom: 0.5em;
}

tr.selected td {
  background-color: #ffc;
}

td.checkbox,
th.checkbox {
  text-align: center;
}

[dir="rtl"] td.checkbox,
[dir="rtl"] th.checkbox {
  /* This is required to win over specificity of [dir="rtl"] td */
  text-align: center;
}

tr .form-item {
  margin-top: 0;
  margin-bottom: 0;
}

.js .field--widget-entity-reference-paragraphs td {
  padding: 1rem;
}

.js .field--widget-entity-reference-paragraphs td.field-multiple-drag {
  padding: 1rem 0.375rem;
}

.js .field--widget-entity-reference-paragraphs a.tabledrag-handle .handle {
  margin: -0.4em 0.5em 0 0;
}

/**
 * Vertical tabs.
 ============================================================================ */
.vertical-tabs {
  border: 1px solid;
}

.vertical-tabs__menu {
  border-top: 1px solid;
}

.vertical-tabs__menu-item {
  border: 1px solid;
  border-top: 0;
}

/**
 * Exposed Filters.
 ============================================================================ */
.exposed-filters .filters,
.exposed-filters .additional-filters {
  float: left;
  margin-right: 1rem;
}

.exposed-filters .form-item {
  margin: 0 0 0.1em 0;
  padding: 0;
}

.exposed-filters .form-item label {
  float: left;
  font-weight: 400;
  width: 10em;
}

.exposed-filters .form-select {
  width: 14em;
}

.exposed-filters .current-filters {
  margin-bottom: 1rem;
}

.exposed-filters .current-filters .placeholder {
  font-style: normal;
  font-weight: 700;
}

/**
 * Field widgets.
 ============================================================================ */
form .field-edit-link {
  margin: 0 0.3em;
}

form .field-multiple-table {
  margin: 0;
}

form .field-multiple-table .field-multiple-drag {
  width: 30px;
  padding-right: 0;
}

form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: .5em;
}

[dir="rtl"] form .field-multiple-table .field-multiple-drag {
  padding-left: 0;
}

[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-left: .5em;
}

form .field-add-more-submit {
  margin: .5em 0 0;
}

.field--widget-image-image {
  padding: 0.625em;
  border: 1px solid;
  border-radius: 2px;
  margin-bottom: 1rem;
}

.field--widget-image-image .form-file {
  padding: 0;
}

.field--widget-image-image .form-type-managed-file {
  margin-bottom: 0;
}

.field--widget-image-image .image-preview {
  padding: 0 0 1rem;
}

.field--widget-image-image .image-widget-data > div:first-child {
  margin-top: 0;
}

.field--widget-image-image .image-widget-data .form-submit {
  float: right;
  margin: 0;
}

.field--widget-image-image details {
  margin: -0.625em;
  border: 0;
}

.field--widget-image-image details table .button {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}

div[class*="field--widget-entity-reference"] .responsive-table {
  margin: 0;
}

div[class*="field--widget-entity-reference"] div.clearfix:last-child {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: 1rem;
}

div[class*="field--widget-entity-reference"] div.clearfix:last-child .dropbutton-wrapper {
  margin: 0 0.25rem 0 0;
}

div[class*="field--widget-entity-reference"] div.clearfix:last-child .placeholder {
  padding: 0 0.25rem;
}
/*# sourceMappingURL=form.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/form.css
View source
  1. @charset "UTF-8";
  2. /**
  3. * Form Base
  4. * Set base styles for form elements.
  5. ============================================================================ */
  6. input,
  7. select,
  8. button,
  9. textarea {
  10. font-size: 1rem;
  11. }
  12. textarea,
  13. select,
  14. input[type="date"],
  15. input[type="datetime"],
  16. input[type="datetime-local"],
  17. input[type="email"],
  18. input[type="month"],
  19. input[type="number"],
  20. input[type="password"],
  21. input[type="search"],
  22. input[type="tel"],
  23. input[type="text"],
  24. input[type="time"],
  25. input[type="url"],
  26. input[type="week"] {
  27. max-width: 100%;
  28. width: 99.999%;
  29. box-sizing: border-box;
  30. border-radius: 2px;
  31. border: 1px solid;
  32. transition: all, 225ms, ease-in-out;
  33. }
  34. textarea:focus,
  35. select:focus,
  36. input[type="date"]:focus,
  37. input[type="datetime"]:focus,
  38. input[type="datetime-local"]:focus,
  39. input[type="email"]:focus,
  40. input[type="month"]:focus,
  41. input[type="number"]:focus,
  42. input[type="password"]:focus,
  43. input[type="search"]:focus,
  44. input[type="tel"]:focus,
  45. input[type="text"]:focus,
  46. input[type="time"]:focus,
  47. input[type="url"]:focus,
  48. input[type="week"]:focus {
  49. outline: 0;
  50. outline: thin dotted \9;
  51. }
  52. textarea[disabled],
  53. select[disabled],
  54. input[type="date"][disabled],
  55. input[type="datetime"][disabled],
  56. input[type="datetime-local"][disabled],
  57. input[type="email"][disabled],
  58. input[type="month"][disabled],
  59. input[type="number"][disabled],
  60. input[type="password"][disabled],
  61. input[type="search"][disabled],
  62. input[type="tel"][disabled],
  63. input[type="text"][disabled],
  64. input[type="time"][disabled],
  65. input[type="url"][disabled],
  66. input[type="week"][disabled] {
  67. cursor: not-allowed;
  68. }
  69. input {
  70. line-height: 1;
  71. vertical-align: middle;
  72. height: 2rem;
  73. padding: 0 0.5rem;
  74. }
  75. input[type="checkbox"], input[type="radio"] {
  76. min-width: 13px;
  77. display: inline-block;
  78. position: relative;
  79. bottom: 0.0625rem;
  80. margin-left: 0.1875rem;
  81. width: auto;
  82. height: auto;
  83. -webkit-transform: scale(1);
  84. -ms-transform: scale(1);
  85. transform: scale(1);
  86. }
  87. textarea,
  88. button,
  89. .button,
  90. input[type="email"],
  91. input[type="number"],
  92. input[type="password"],
  93. input[type="search"],
  94. input[type="submit"],
  95. input[type="tel"],
  96. input[type="text"],
  97. input[type="url"] {
  98. -webkit-appearance: none;
  99. }
  100. input[type="time"],
  101. input[type="date"],
  102. input[type="datetime"],
  103. input[type="datetime-local"],
  104. input[type="month"] {
  105. background-clip: padding-box;
  106. }
  107. input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  108. -webkit-appearance: none;
  109. }
  110. select {
  111. height: 2rem;
  112. }
  113. textarea {
  114. padding: 0.5rem;
  115. }
  116. textarea,
  117. select[size],
  118. select[multiple] {
  119. height: auto;
  120. }
  121. label {
  122. font-weight: 600;
  123. text-decoration: none;
  124. white-space: nowrap;
  125. display: block;
  126. }
  127. label.option {
  128. font-weight: normal;
  129. display: inline-block;
  130. }
  131. fieldset {
  132. border: 0;
  133. margin: 0;
  134. padding: 0;
  135. }
  136. details {
  137. border: 1px solid;
  138. border-radius: 2px;
  139. display: block;
  140. margin: 1rem 0;
  141. max-height: 3.125rem;
  142. overflow-y: hidden;
  143. transition: all 450ms ease-in-out;
  144. }
  145. details:focus {
  146. outline: none !important;
  147. }
  148. details .details-wrapper {
  149. transition: all 650ms ease-in-out;
  150. }
  151. details > summary:before {
  152. font-family: FontAwesome, sans-serif;
  153. float: left;
  154. margin: -1px 0 0;
  155. height: 1rem;
  156. width: 1rem;
  157. display: none;
  158. }
  159. .fa-loaded details > summary:before {
  160. display: block;
  161. }
  162. [dir="rtl"] details > summary:before {
  163. float: right;
  164. }
  165. details[open] > summary:before {
  166. content: "";
  167. }
  168. details:not([open]) > summary:before {
  169. content: "";
  170. }
  171. [dir="rtl"] details:not([open]) > summary:before {
  172. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  173. -webkit-transform: scale(-1, 1);
  174. -ms-transform: scale(-1, 1);
  175. transform: scale(-1, 1);
  176. }
  177. .js details:not([open]) .details-wrapper {
  178. display: block;
  179. visibility: hidden;
  180. opacity: 0.1;
  181. }
  182. .js details:not([open]) > summary:before {
  183. content: "";
  184. }
  185. [dir="rtl"] .js details:not([open]) > summary:before {
  186. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  187. -webkit-transform: scale(-1, 1);
  188. -ms-transform: scale(-1, 1);
  189. transform: scale(-1, 1);
  190. }
  191. .js details[open] {
  192. max-height: 2500px;
  193. overflow: scroll;
  194. }
  195. .js details[open] .details-wrapper {
  196. opacity: 1;
  197. visibility: visible;
  198. }
  199. .js details[open] > summary:before {
  200. content: "";
  201. }
  202. summary {
  203. cursor: pointer;
  204. display: block;
  205. padding: 0.625rem;
  206. outline: 0;
  207. }
  208. details summary::-webkit-details-marker {
  209. display: none;
  210. }
  211. button[disabled],
  212. input[disabled],
  213. select[disabled],
  214. select[disabled] option,
  215. select[disabled] optgroup,
  216. textarea[disabled],
  217. a.button_disabled {
  218. box-shadow: none;
  219. opacity: 0.7;
  220. -webkit-user-select: none;
  221. -moz-user-select: none;
  222. -ms-user-select: none;
  223. user-select: none;
  224. cursor: default;
  225. }
  226. input:invalid,
  227. button:invalid,
  228. .button:invalid,
  229. select:invalid,
  230. textarea:invalid {
  231. box-shadow: none;
  232. }
  233. input:focus::-webkit-input-placeholder {
  234. opacity: 0.2;
  235. }
  236. input:focus:-moz-placeholder {
  237. opacity: 0.2;
  238. }
  239. input:focus::-moz-placeholder {
  240. opacity: 0.2;
  241. }
  242. input:focus:-ms-input-placeholder {
  243. opacity: 0.2;
  244. }
  245. /**
  246. * Form Component
  247. * - common styles for form elements and classes.
  248. ============================================================================ */
  249. .form-text {
  250. -webkit-appearance: none;
  251. -moz-appearance: none;
  252. appearance: none;
  253. }
  254. .form-text[name="subject[0][value]"] {
  255. width: 50%;
  256. }
  257. @media screen and (max-width: 45em) {
  258. .form-text[name="subject[0][value]"] {
  259. width: 100%;
  260. }
  261. }
  262. .form-type-select__select-wrapper:not(.is-multiple) {
  263. position: relative;
  264. display: inline-block;
  265. width: 100%;
  266. }
  267. .form-type-select__select-wrapper:not(.is-multiple):after {
  268. font-family: FontAwesome, sans-serif;
  269. content: "\f0dc";
  270. position: absolute;
  271. top: 0.25rem;
  272. right: 0.75rem;
  273. pointer-events: none;
  274. display: none;
  275. }
  276. .form-type-select__select-wrapper.is-multiple {
  277. display: block;
  278. }
  279. .form-select {
  280. min-width: 50%;
  281. margin: 0;
  282. font-size: 16px;
  283. }
  284. @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) or ((-moz-appearance: none) and (mask-type: alpha)) {
  285. .fa-loaded .form-type-select__select-wrapper:not(.is-multiple):after {
  286. display: block;
  287. }
  288. .form-type-select__select-wrapper:not(.is-multiple) .form-select {
  289. text-indent: 0.1875rem;
  290. padding-right: 1.5rem;
  291. margin-right: 0.5rem;
  292. border-width: 1px;
  293. border-style: solid;
  294. -webkit-appearance: none;
  295. -moz-appearance: none;
  296. appearance: none;
  297. }
  298. }
  299. .form-item,
  300. .form-radios,
  301. .form-checkboxes {
  302. margin: 0 0 1rem;
  303. }
  304. .form-type-radio .option,
  305. .form-type-checkbox .option {
  306. padding: 0.3125rem 0.5rem;
  307. border-radius: 2px;
  308. }
  309. .form-type-radio .option:focus, .form-type-radio .option:hover,
  310. .form-type-checkbox .option:focus,
  311. .form-type-checkbox .option:hover {
  312. cursor: pointer;
  313. }
  314. .form-actions {
  315. display: -webkit-flex;
  316. display: -ms-flexbox;
  317. display: flex;
  318. -webkit-align-items: flex-start;
  319. -ms-flex-align: start;
  320. align-items: flex-start;
  321. -webkit-justify-content: flex-start;
  322. -ms-flex-pack: start;
  323. justify-content: flex-start;
  324. margin: 1rem 0;
  325. }
  326. .form-actions .button {
  327. margin-right: 0.25rem;
  328. }
  329. .field-type-text-long textarea {
  330. border-radius: 2px 2px 0 0;
  331. }
  332. .form-textarea-wrapper textarea {
  333. display: block;
  334. margin: 0;
  335. width: 100%;
  336. box-sizing: border-box;
  337. }
  338. .text-format-wrapper .text-full {
  339. width: 100%;
  340. }
  341. .filter-wrapper {
  342. border: 1px solid;
  343. border-top: 0;
  344. display: -webkit-flex;
  345. display: -ms-flexbox;
  346. display: flex;
  347. -webkit-flex-wrap: wrap;
  348. -ms-flex-wrap: wrap;
  349. flex-wrap: wrap;
  350. -webkit-align-items: center;
  351. -ms-flex-align: center;
  352. align-items: center;
  353. -webkit-justify-content: flex-start;
  354. -ms-flex-pack: start;
  355. justify-content: flex-start;
  356. }
  357. .filter-wrapper .form-type-select__select-wrapper,
  358. .filter-wrapper .form-type-select__select-wrapper select {
  359. width: auto !important;
  360. }
  361. .filter-guidelines {
  362. -webkit-flex: 0 0 100%;
  363. -ms-flex: 0 0 100%;
  364. flex: 0 0 100%;
  365. }
  366. .filter-guidelines .filter-guidelines-item {
  367. margin: 0.75rem 0;
  368. }
  369. .filter-help {
  370. float: none;
  371. margin-right: auto;
  372. font-size: 0.875rem;
  373. }
  374. .tips {
  375. padding-left: 0;
  376. font-size: 0.875rem;
  377. }
  378. .tips li {
  379. list-style: none;
  380. }
  381. .description {
  382. font-size: 0.75rem;
  383. }
  384. h4.label,
  385. .form-composite > legend {
  386. font-size: inherit;
  387. font-weight: 600;
  388. margin: 0;
  389. padding: 0;
  390. }
  391. .form-required:after {
  392. font-family: sans-serif;
  393. content: " \002A ";
  394. line-height: 1;
  395. }
  396. abbr.form-required, abbr.ajax-changed {
  397. border-bottom: none;
  398. }
  399. abbr.tabledrag-changed {
  400. position: absolute !important;
  401. clip: rect(1px, 1px, 1px, 1px);
  402. overflow: hidden;
  403. height: 1px;
  404. width: 1px;
  405. padding: 0;
  406. word-wrap: normal;
  407. font: 0/0 a;
  408. }
  409. .form-item input.error,
  410. .form-item textarea.error,
  411. .form-item select.error {
  412. border: 1px solid;
  413. }
  414. .container-inline {
  415. display: -webkit-flex;
  416. display: -ms-flexbox;
  417. display: flex;
  418. }
  419. .container-inline div,
  420. .container-inline label {
  421. display: -webkit-flex;
  422. display: -ms-flexbox;
  423. display: flex;
  424. margin-right: 0.375rem;
  425. }
  426. .container-inline label:after {
  427. content: ':';
  428. }
  429. .container-inline .form-actions, .container-inline.form-actions {
  430. margin-top: 0;
  431. margin-bottom: 0;
  432. }
  433. .container-inline .yamlform-flex--container > .form-item {
  434. margin-right: 0.375rem;
  435. }
  436. .form-type-radios .container-inline label:after {
  437. content: none;
  438. }
  439. .form-type-radios .container-inline .form-type-radio {
  440. margin: 0 1rem;
  441. }
  442. .form-composite--inline legend {
  443. float: left;
  444. margin-right: 0.5em;
  445. margin-top: 1px;
  446. }
  447. @media screen and (min-width: 321px) {
  448. .form-composite--inline legend {
  449. margin-right: 1em;
  450. }
  451. }
  452. .form-composite--inline .fieldset-legend:after {
  453. content: ':';
  454. }
  455. .form-composite--inline input[type="radio"],
  456. .form-composite--inline label {
  457. vertical-align: middle;
  458. }
  459. .form-composite--inline label:after {
  460. content: none;
  461. }
  462. @media screen and (min-width: 480px) {
  463. .form-composite--inline .form-item {
  464. margin-right: 1.25em;
  465. }
  466. }
  467. .ui-autocomplete li.ui-menu-item a.ui-state-focus,
  468. .autocomplete li.ui-menu-item a.ui-state-hover {
  469. background-color: #0072b9;
  470. color: #fff;
  471. margin: 0;
  472. }
  473. details > .details-wrapper {
  474. margin: 1rem;
  475. }
  476. .collapse-processed > summary {
  477. padding: 0.625rem;
  478. }
  479. .collapse-processed > summary:before {
  480. font-family: FontAwesome, sans-serif;
  481. content: "";
  482. float: left;
  483. margin: -1px 0 0;
  484. height: 1rem;
  485. width: 1rem;
  486. display: none;
  487. }
  488. .fa-loaded .collapse-processed > summary:before {
  489. display: block;
  490. }
  491. [dir="rtl"] .collapse-processed > summary:before {
  492. float: right;
  493. }
  494. .collapse-processed:not([open]) > summary:before {
  495. content: "";
  496. }
  497. [dir="rtl"] .collapse-processed:not([open]) > summary:before {
  498. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  499. -webkit-transform: scale(-1, 1);
  500. -ms-transform: scale(-1, 1);
  501. transform: scale(-1, 1);
  502. }
  503. .vertical-tabs {
  504. background-color: #ffffff;
  505. }
  506. .block-list-secondary {
  507. border-bottom-width: 1px;
  508. box-sizing: border-box;
  509. padding: 0 0.75rem;
  510. }
  511. .reset-appearance {
  512. transition: none;
  513. box-shadow: none;
  514. border-radius: 0;
  515. }
  516. .reset-appearance:hover, .reset-appearance:focus {
  517. background: none;
  518. color: inherit;
  519. }
  520. .cke_editable {
  521. padding: 5px 10px;
  522. }
  523. .field-storage-config-edit-form .container-inline {
  524. display: block;
  525. }
  526. .field-storage-config-edit-form .form-select {
  527. min-width: unset;
  528. }
  529. /**
  530. * Buttons
  531. * We include button styling separate (from _forms.scss, Form Base/Theme in base.css)
  532. * mainly because the form styles are quite long already and we often want to add
  533. * unique button variants.
  534. *
  535. * - applies to elements with class "button", includes styles for:
  536. * - input buttons
  537. * - anchor links styled as buttons
  538. * - drop buttons
  539. * - action link buttons
  540. ============================================================================ */
  541. button,
  542. .button {
  543. width: auto;
  544. position: relative;
  545. box-sizing: border-box;
  546. border-radius: 2px;
  547. border-width: 1px;
  548. border-style: solid;
  549. transition: background-color, .15s, ease-in-out;
  550. cursor: pointer;
  551. text-decoration: none;
  552. text-align: center;
  553. font-weight: 400;
  554. white-space: nowrap;
  555. height: 2rem;
  556. padding: 0 0.625rem;
  557. }
  558. button:hover, button:focus,
  559. .button:hover,
  560. .button:focus {
  561. text-decoration: none;
  562. }
  563. a.button {
  564. display: inline-block;
  565. text-align: center;
  566. line-height: 2rem;
  567. }
  568. .un-button,
  569. .un-button:hover,
  570. .un-button:focus,
  571. .un-button:active {
  572. border: none;
  573. box-shadow: none;
  574. background-color: inherit;
  575. color: inherit;
  576. padding: 0;
  577. margin: 0;
  578. opacity: 1;
  579. height: auto;
  580. }
  581. .button--danger {
  582. border: 0;
  583. box-shadow: none;
  584. }
  585. .button-action {
  586. display: inline-block;
  587. }
  588. .button-action:before {
  589. font-family: FontAwesome, sans-serif;
  590. content: "";
  591. vertical-align: middle;
  592. font-size: 0.75rem;
  593. padding-right: 0.25rem;
  594. line-height: 2rem;
  595. display: none;
  596. }
  597. .fa-loaded .button-action:before {
  598. display: inline-block;
  599. }
  600. .button-action[data-drupal-link-system-path="user/login"]:before {
  601. content: "";
  602. vertical-align: baseline;
  603. font-size: 1rem;
  604. padding-right: 0.4375rem;
  605. }
  606. .action-links__button {
  607. padding: 0;
  608. margin: 1rem 0;
  609. }
  610. @media screen and (max-width: 45em) {
  611. .action-links__button a {
  612. display: block;
  613. }
  614. }
  615. li[class*="action--"] {
  616. list-style: none;
  617. padding: 0;
  618. margin: 1rem 0;
  619. }
  620. /* Drop buttons */
  621. .dropbutton-widget {
  622. border: 1px solid;
  623. border-radius: 2px;
  624. }
  625. .dropbutton-wrapper {
  626. display: block;
  627. position: relative;
  628. min-height: 2rem;
  629. margin-right: 0.25rem;
  630. margin-bottom: 1rem;
  631. }
  632. .dropbutton input {
  633. text-align: left;
  634. height: 1.875rem;
  635. }
  636. .dropbutton .dropbutton-action > * {
  637. white-space: nowrap;
  638. line-height: normal;
  639. }
  640. .dropbutton .dropbutton-action a {
  641. padding: 0.125rem 0.625rem;
  642. }
  643. .dropbutton .secondary-action {
  644. border-top: 1px solid;
  645. border-radius: 0 0 0 2px;
  646. }
  647. .dropbutton .secondary-action .button {
  648. border: 0;
  649. width: 100%;
  650. }
  651. .dropbutton .secondary-action .button:hover, .dropbutton .secondary-action .button:focus {
  652. border-radius: 0 0 0 2px;
  653. }
  654. .dropbutton .dropbutton-toggle button {
  655. background: none;
  656. box-shadow: none;
  657. }
  658. .dropbutton .dropbutton-toggle button:hover, .dropbutton .dropbutton-toggle button:focus, .dropbutton .dropbutton-toggle button:active {
  659. background: none;
  660. box-shadow: none;
  661. }
  662. [dir="rtl"] .dropbutton {
  663. margin: 0 3px 0 0;
  664. }
  665. [dir="rtl"] .dropbutton input {
  666. text-align: right;
  667. }
  668. .dropbutton-multiple .dropbutton {
  669. border-right: 1px solid;
  670. }
  671. .dropbutton-multiple .dropbutton .dropbutton-action > * {
  672. margin-right: 0;
  673. border: 0;
  674. }
  675. .dropbutton-multiple .dropbutton .dropbutton-action .button {
  676. border-radius: 2px 0 0 2px;
  677. width: 100%;
  678. border: 0;
  679. margin: 0;
  680. }
  681. [dir="rtl"] .dropbutton-multiple .dropbutton {
  682. border-left: 1px solid;
  683. border-right: 0;
  684. }
  685. [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
  686. margin-left: 0;
  687. }
  688. .dropbutton-multiple.open .dropbutton-action .button {
  689. border-radius: 2px 0 0 0;
  690. }
  691. .dropbutton-multiple .dropbutton .secondary-action .button {
  692. border-radius: 0 0 0 2px;
  693. }
  694. .dropbutton-multiple .dropbutton .secondary-action .button:hover, .dropbutton-multiple .dropbutton .secondary-action .button:focus {
  695. border-radius: 0 0 0 2px;
  696. }
  697. button.link, button.link:hover, button.link:focus {
  698. color: #0066cc;
  699. background-color: transparent;
  700. border: 0;
  701. box-shadow: none;
  702. opacity: 1;
  703. margin: 0;
  704. padding: 0;
  705. cursor: pointer;
  706. }
  707. button.tableresponsive-toggle {
  708. float: right;
  709. overflow: hidden;
  710. }
  711. label button.link {
  712. font-weight: 700;
  713. }
  714. .ui-button-text-only .ui-button-text {
  715. padding: 0;
  716. }
  717. .ui-button-text-only button:hover, .ui-button-text-only button:focus,
  718. .ui-button-text-only .button:hover,
  719. .ui-button-text-only .button:focus {
  720. background: inherit !important;
  721. color: #292929 !important;
  722. }
  723. .tabledrag-toggle-weight {
  724. font-size: 0.75rem;
  725. }
  726. /**
  727. * Inline form styles.
  728. ============================================================================ */
  729. .form--inline .form-item {
  730. float: left;
  731. margin-right: 0.75rem;
  732. }
  733. .form--inline .form-item-separator {
  734. margin-top: 1.25rem;
  735. margin-right: 1rem;
  736. margin-left: 0.75rem;
  737. }
  738. .form--inline .form-actions {
  739. clear: left;
  740. }
  741. /**
  742. * Progress bar.
  743. * - unlike Drupal core we don't include all the vendor prefixes, instead
  744. * we just rely on autoprefixer doing it's thing.
  745. * @see progress.js
  746. ============================================================================ */
  747. .progress {
  748. margin: 1.25rem 0;
  749. }
  750. .progress__track {
  751. border-color: #b3b3b3;
  752. border-radius: 10em;
  753. background-color: #f2f1eb;
  754. background-image: linear-gradient(#e7e7df, #f0f0f0);
  755. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16);
  756. }
  757. .progress__bar {
  758. border: 1px #07629a solid;
  759. background-color: #057ec9;
  760. background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15)), linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
  761. background-size: 40px 40px;
  762. margin-top: -1px;
  763. margin-left: -1px;
  764. padding: 0 1px;
  765. height: 16px;
  766. border-radius: 10em;
  767. -webkit-animation: animate-stripes 3s linear infinite;
  768. animation: animate-stripes 3s linear infinite;
  769. transition: width 0.5s ease-out;
  770. }
  771. @-webkit-keyframes animate-stripes {
  772. 0% {
  773. background-position: 0 0, 0 0;
  774. }
  775. 100% {
  776. background-position: 0 0, -80px 0;
  777. }
  778. }
  779. @keyframes animate-stripes {
  780. 0% {
  781. background-position: 0 0, 0 0;
  782. }
  783. 100% {
  784. background-position: 0 0, -80px 0;
  785. }
  786. }
  787. /**
  788. * Form Tables
  789. * Table select and table drag are form elements.
  790. ============================================================================ */
  791. tr.drag {
  792. background-color: #fffff1;
  793. }
  794. tr.drag-previous {
  795. background-color: #ffd;
  796. }
  797. a.tabledrag-handle .handle {
  798. height: auto;
  799. margin: -0.2em 0.5em 0;
  800. width: auto;
  801. }
  802. body div.tabledrag-changed-warning {
  803. margin-bottom: 0.5em;
  804. }
  805. tr.selected td {
  806. background-color: #ffc;
  807. }
  808. td.checkbox,
  809. th.checkbox {
  810. text-align: center;
  811. }
  812. [dir="rtl"] td.checkbox,
  813. [dir="rtl"] th.checkbox {
  814. /* This is required to win over specificity of [dir="rtl"] td */
  815. text-align: center;
  816. }
  817. tr .form-item {
  818. margin-top: 0;
  819. margin-bottom: 0;
  820. }
  821. .js .field--widget-entity-reference-paragraphs td {
  822. padding: 1rem;
  823. }
  824. .js .field--widget-entity-reference-paragraphs td.field-multiple-drag {
  825. padding: 1rem 0.375rem;
  826. }
  827. .js .field--widget-entity-reference-paragraphs a.tabledrag-handle .handle {
  828. margin: -0.4em 0.5em 0 0;
  829. }
  830. /**
  831. * Vertical tabs.
  832. ============================================================================ */
  833. .vertical-tabs {
  834. border: 1px solid;
  835. }
  836. .vertical-tabs__menu {
  837. border-top: 1px solid;
  838. }
  839. .vertical-tabs__menu-item {
  840. border: 1px solid;
  841. border-top: 0;
  842. }
  843. /**
  844. * Exposed Filters.
  845. ============================================================================ */
  846. .exposed-filters .filters,
  847. .exposed-filters .additional-filters {
  848. float: left;
  849. margin-right: 1rem;
  850. }
  851. .exposed-filters .form-item {
  852. margin: 0 0 0.1em 0;
  853. padding: 0;
  854. }
  855. .exposed-filters .form-item label {
  856. float: left;
  857. font-weight: 400;
  858. width: 10em;
  859. }
  860. .exposed-filters .form-select {
  861. width: 14em;
  862. }
  863. .exposed-filters .current-filters {
  864. margin-bottom: 1rem;
  865. }
  866. .exposed-filters .current-filters .placeholder {
  867. font-style: normal;
  868. font-weight: 700;
  869. }
  870. /**
  871. * Field widgets.
  872. ============================================================================ */
  873. form .field-edit-link {
  874. margin: 0 0.3em;
  875. }
  876. form .field-multiple-table {
  877. margin: 0;
  878. }
  879. form .field-multiple-table .field-multiple-drag {
  880. width: 30px;
  881. padding-right: 0;
  882. }
  883. form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  884. padding-right: .5em;
  885. }
  886. [dir="rtl"] form .field-multiple-table .field-multiple-drag {
  887. padding-left: 0;
  888. }
  889. [dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  890. padding-left: .5em;
  891. }
  892. form .field-add-more-submit {
  893. margin: .5em 0 0;
  894. }
  895. .field--widget-image-image {
  896. padding: 0.625em;
  897. border: 1px solid;
  898. border-radius: 2px;
  899. margin-bottom: 1rem;
  900. }
  901. .field--widget-image-image .form-file {
  902. padding: 0;
  903. }
  904. .field--widget-image-image .form-type-managed-file {
  905. margin-bottom: 0;
  906. }
  907. .field--widget-image-image .image-preview {
  908. padding: 0 0 1rem;
  909. }
  910. .field--widget-image-image .image-widget-data > div:first-child {
  911. margin-top: 0;
  912. }
  913. .field--widget-image-image .image-widget-data .form-submit {
  914. float: right;
  915. margin: 0;
  916. }
  917. .field--widget-image-image details {
  918. margin: -0.625em;
  919. border: 0;
  920. }
  921. .field--widget-image-image details table .button {
  922. -webkit-align-self: flex-end;
  923. -ms-flex-item-align: end;
  924. align-self: flex-end;
  925. }
  926. div[class*="field--widget-entity-reference"] .responsive-table {
  927. margin: 0;
  928. }
  929. div[class*="field--widget-entity-reference"] div.clearfix:last-child {
  930. display: -webkit-flex;
  931. display: -ms-flexbox;
  932. display: flex;
  933. -webkit-align-items: center;
  934. -ms-flex-align: center;
  935. align-items: center;
  936. -webkit-justify-content: flex-end;
  937. -ms-flex-pack: end;
  938. justify-content: flex-end;
  939. margin-bottom: 1rem;
  940. }
  941. div[class*="field--widget-entity-reference"] div.clearfix:last-child .dropbutton-wrapper {
  942. margin: 0 0.25rem 0 0;
  943. }
  944. div[class*="field--widget-entity-reference"] div.clearfix:last-child .placeholder {
  945. padding: 0 0.25rem;
  946. }
  947. /*# sourceMappingURL=form.css.map */