_mixins.scss 814 B

12345678910111213141516171819202122232425262728293031
  1. // Hide an element accesibly instead of using display: none;
  2. // Source: https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/responsive-block-control/style.scss#L1
  3. @mixin hide-accesibly {
  4. border: 0;
  5. clip: rect(1px, 1px, 1px, 1px);
  6. clip-path: inset(50%);
  7. height: 1px;
  8. margin: -1px;
  9. overflow: hidden;
  10. padding: 0;
  11. position: absolute;
  12. width: 1px;
  13. word-wrap: normal !important;
  14. }
  15. @mixin post-meta-icon {
  16. display: flex;
  17. &:before {
  18. align-self: center;
  19. content: '';
  20. display: inline-block;
  21. margin-right: calc(0.5 * var(--wp--custom--gap--baseline) );
  22. height: 16px;
  23. width: 16px;
  24. mask-size: contain;
  25. -webkit-mask-size: contain;
  26. mask-repeat: no-repeat;
  27. -webkit-mask-repeat: no-repeat;
  28. background-color: currentColor;
  29. }
  30. }