_comment-form.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. .comment-respond {
  2. margin-top: var(--global--spacing-vertical);
  3. }
  4. .comment-respond > * {
  5. margin-top: var(--global--spacing-unit);
  6. margin-bottom: var(--global--spacing-unit);
  7. &:first-child {
  8. margin-top: 0;
  9. }
  10. &:last-child {
  11. margin-bottom: 0;
  12. &.comment-form {
  13. margin-bottom: var(--global--spacing-vertical);
  14. }
  15. }
  16. }
  17. .comment-author {
  18. padding-top: 3px;
  19. .url {
  20. border-bottom: none;
  21. color: currentColor;
  22. }
  23. }
  24. .comment-form {
  25. display: flex;
  26. flex-wrap: wrap;
  27. > * {
  28. flex-basis: 100%;
  29. }
  30. .comment-notes {
  31. font-size: var(--global--font-size-sm);
  32. }
  33. .comment-form-url,
  34. .comment-form-comment {
  35. width: 100%;
  36. }
  37. .comment-form-author,
  38. .comment-form-email {
  39. flex-basis: 0;
  40. flex-grow: 1;
  41. }
  42. .comment-form-cookies-consent > label,
  43. .comment-notes {
  44. font-size: var(--global--font-size-xs);
  45. }
  46. }
  47. .comment-form > p {
  48. margin-bottom: var(--global--spacing-unit);
  49. &:first-of-type {
  50. margin-top: 0;
  51. }
  52. &:last-of-type {
  53. margin-bottom: 0;
  54. }
  55. label,
  56. input[type="email"],
  57. input[type="text"],
  58. input[type="url"],
  59. textarea {
  60. display: block;
  61. font-size: var(--global--font-size-sm);
  62. margin-bottom: calc( .5 * var(--global--spacing-unit) );
  63. width: 100%;
  64. }
  65. &.comment-form-cookies-consent {
  66. display: flex;
  67. }
  68. @include media(mobile) {
  69. &.comment-form-author {
  70. margin-right: calc( 1.5 * var(--global--spacing-horizontal) );
  71. }
  72. &.comment-notes,
  73. &.logged-in-as {
  74. display: block;
  75. }
  76. }
  77. }