You are here

node-add.pcss.css in Drupal 9

Same filename and directory in other branches
  1. 8 core/themes/claro/css/layout/node-add.pcss.css
/**
 * Layout overrides for node add/edit form.
 */

@import "../base/variables.pcss.css";

:root {
  --node-meta-width: 22.5rem;
}

.layout-region {
  box-sizing: border-box;
}

.layout-region--node-footer .layout-region__content {
  margin-top: var(--space-l);
}

/**
 * Wide screens
 */
@media screen and (min-width: 61rem) {
  .layout-region--node-main,
  .layout-region--node-footer {
    float: left; /* LTR */
    width: calc(100% - var(--node-meta-width));
    padding-right: var(--space-l); /* LTR */
  }
  [dir="rtl"] .layout-region--node-main,
  [dir="rtl"] .layout-region--node-footer {
    float: right;
    padding-right: 0;
    padding-left: var(--space-l);
  }

  .layout-region--node-main .layout-region__content,
  .layout-region--node-footer .layout-region__content {
    max-width: 48rem;
    margin-right: auto;
    margin-left: auto;
  }

  .layout-region--node-footer .layout-region__content {
    margin-top: var(--space-xs);
  }

  .layout-region--node-secondary {
    float: right; /* LTR */
    width: var(--node-meta-width);
  }
  [dir="rtl"] .layout-region--node-secondary {
    float: left;
  }

  /* Push sidebar down to horizontal align with form section */
  .layout-region--node-secondary {
    margin-top: var(--space-l);
  }
}

File

core/themes/claro/css/layout/node-add.pcss.css
View source
  1. /**
  2. * Layout overrides for node add/edit form.
  3. */
  4. @import "../base/variables.pcss.css";
  5. :root {
  6. --node-meta-width: 22.5rem;
  7. }
  8. .layout-region {
  9. box-sizing: border-box;
  10. }
  11. .layout-region--node-footer .layout-region__content {
  12. margin-top: var(--space-l);
  13. }
  14. /**
  15. * Wide screens
  16. */
  17. @media screen and (min-width: 61rem) {
  18. .layout-region--node-main,
  19. .layout-region--node-footer {
  20. float: left; /* LTR */
  21. width: calc(100% - var(--node-meta-width));
  22. padding-right: var(--space-l); /* LTR */
  23. }
  24. [dir="rtl"] .layout-region--node-main,
  25. [dir="rtl"] .layout-region--node-footer {
  26. float: right;
  27. padding-right: 0;
  28. padding-left: var(--space-l);
  29. }
  30. .layout-region--node-main .layout-region__content,
  31. .layout-region--node-footer .layout-region__content {
  32. max-width: 48rem;
  33. margin-right: auto;
  34. margin-left: auto;
  35. }
  36. .layout-region--node-footer .layout-region__content {
  37. margin-top: var(--space-xs);
  38. }
  39. .layout-region--node-secondary {
  40. float: right; /* LTR */
  41. width: var(--node-meta-width);
  42. }
  43. [dir="rtl"] .layout-region--node-secondary {
  44. float: left;
  45. }
  46. /* Push sidebar down to horizontal align with form section */
  47. .layout-region--node-secondary {
  48. margin-top: var(--space-l);
  49. }
  50. }