_comment-form.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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. &:hover,
  23. &:focus {
  24. color: var(--global--color-primary-hover);
  25. border-bottom: 1px solid var(--global--color-secondary);
  26. }
  27. }
  28. }
  29. .comment-form {
  30. display: flex;
  31. flex-wrap: wrap;
  32. > * {
  33. flex-basis: 100%;
  34. }
  35. .comment-notes {
  36. font-size: var(--global--font-size-sm);
  37. }
  38. .comment-form-url,
  39. .comment-form-comment {
  40. width: 100%;
  41. }
  42. .comment-form-author,
  43. .comment-form-email {
  44. flex-basis: 0;
  45. flex-grow: 1;
  46. }
  47. .comment-form-cookies-consent > label,
  48. .comment-notes {
  49. font-size: var(--global--font-size-xs);
  50. }
  51. }
  52. .comment-form > p {
  53. margin-bottom: var(--global--spacing-unit);
  54. &:first-of-type {
  55. margin-top: 0;
  56. }
  57. &:last-of-type {
  58. margin-bottom: 0;
  59. }
  60. label,
  61. input[type="email"],
  62. input[type="text"],
  63. input[type="url"],
  64. textarea {
  65. display: block;
  66. font-size: var(--global--font-size-sm);
  67. margin-bottom: calc( .5 * var(--global--spacing-unit) );
  68. width: 100%;
  69. }
  70. &.comment-form-cookies-consent {
  71. display: flex;
  72. }
  73. @include media(mobile) {
  74. &.comment-form-author {
  75. margin-right: calc( 1.5 * var(--global--spacing-horizontal) );
  76. }
  77. &.comment-notes,
  78. &.logged-in-as {
  79. display: block;
  80. }
  81. }
  82. }