You are here

form.css in AT Tools 8.3

@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%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid;
  -webkit-transition: all, 225ms, ease-in-out;
  -o-transition: all, 225ms, ease-in-out;
  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;
  -webkit-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
}

details:focus {
  outline: none !important;
}

details .details-wrapper {
  -webkit-transition: all 650ms ease-in-out;
  -o-transition: all 650ms ease-in-out;
  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 {
  -webkit-box-shadow: none;
          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 {
  -webkit-box-shadow: none;
          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-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: 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%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

.filter-wrapper {
  border: 1px solid;
  border-top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: 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-box-flex: 0;
      -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-box;
  display: -ms-flexbox;
  display: flex;
}

.container-inline div,
.container-inline label {
  display: -webkit-box;
  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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.75rem;
}

.reset-appearance {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  -webkit-box-shadow: 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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  -webkit-transition: background-color, .15s, ease-in-out;
  -o-transition: background-color, .15s, ease-in-out;
  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;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  opacity: 1;
  height: auto;
}

.button--danger {
  border: 0;
  -webkit-box-shadow: none;
          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;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.dropbutton .dropbutton-toggle button:hover, .dropbutton .dropbutton-toggle button:focus, .dropbutton .dropbutton-toggle button:active {
  background: none;
  -webkit-box-shadow: 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;
  -webkit-box-shadow: none;
          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: -webkit-gradient(linear, left top, left bottom, from(#e7e7df), to(#f0f0f0));
  background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0);
  background-image: -o-linear-gradient(#e7e7df, #f0f0f0);
  background-image: linear-gradient(#e7e7df, #f0f0f0);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16);
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16);
}

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