content-moderation.css in Drupal 10

Styles for content moderation toolbar.

File

core/themes/olivero/css/components/content-moderation.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Styles for content moderation toolbar.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

[dir="ltr"] .entity-moderation-form {
  padding-left: var(--sp)
}

[dir="rtl"] .entity-moderation-form {
  padding-right: var(--sp)
}

[dir="ltr"] .entity-moderation-form {
  padding-right: var(--sp)
}

[dir="rtl"] .entity-moderation-form {
  padding-left: var(--sp)
}

.entity-moderation-form {
  flex-direction: column;
  border: 1px solid var(--color--gray-95);
  background-color: var(--color--gray-100)
}

.entity-moderation-form select,
  .entity-moderation-form input:not([type="submit"]) {
    background-color: var(--color--white);
  }

@media (min-width: 43.75rem) {

.entity-moderation-form {
    flex-direction: row
}
  }

[dir="ltr"] .entity-moderation-form__item {
  margin-right: var(--sp)
}

[dir="rtl"] .entity-moderation-form__item {
  margin-left: var(--sp)
}

.entity-moderation-form__item {
  flex-basis: 0
}

[dir="ltr"] .entity-moderation-form__item:last-child {
    margin-right: 0
}

[dir="rtl"] .entity-moderation-form__item:last-child {
    margin-left: 0
}

.entity-moderation-form__item:last-child {
    align-self: flex-start
  }

@media (min-width: 43.75rem) {

.entity-moderation-form__item:last-child {
      align-self: flex-end
  }
    }

[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
    margin-left: 0
}

[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
    margin-right: 0
}

.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
    width: 100%
  }

@supports (width: max-content) {

.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
      width: max-content
  }
    }

@media (min-width: 43.75rem) {

[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
      margin-left: calc(-2 * (var(--grid-col-width) + var(--grid-gap)))
  }

[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
      margin-right: calc(-2 * (var(--grid-col-width) + var(--grid-gap)))
  }

.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
      width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
      margin-top: var(--sp2);
      margin-bottom: var(--sp4)
  }
    }

@media (min-width: 62.5rem) {

[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
      margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
  }

[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
      margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
  }

.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
      width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap))
  }
    }

@media (min-width: 90rem) {

[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
      margin-left: 0
  }

[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
      margin-right: 0
  }

.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
      width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap))
  }
    }