_buttons.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. @mixin quadrat_button_hover_styles {
  2. &:hover,
  3. &:focus,
  4. &.has-focus {
  5. border-style: var(--wp--custom--button--border--style);
  6. border-color: currentColor;
  7. border-width: var(--wp--custom--button--border--width);
  8. padding-top: var(--wp--custom--button--spacing--padding--top);
  9. padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
  10. padding-left: var(--wp--custom--button--spacing--padding--left);
  11. padding-right: var(--wp--custom--button--spacing--padding--right);
  12. }
  13. }
  14. .wp-block-button {
  15. &.wp-block-button__link,
  16. .wp-block-button__link {
  17. &:not(.has-background):not(.has-text-color) {
  18. @include quadrat_button_hover_styles;
  19. }
  20. }
  21. }
  22. .wp-block-file .wp-block-file__button {
  23. @include quadrat_button_hover_styles;
  24. }
  25. .wp-block-search {
  26. &.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
  27. .wp-block-search__button {
  28. @include quadrat_button_hover_styles;
  29. }
  30. }
  31. .wp-block-post-comments {
  32. input[type="submit"], .reply a {
  33. @include quadrat_button_hover_styles;
  34. }
  35. }
  36. //NOTE: Double-classed to raise specificity above parent theme's outline hover styles
  37. //as an alternative to !important. Only needed for the editor.
  38. .wp-block-button.wp-block-button.is-style-outline {
  39. &.wp-block-button__link,
  40. .wp-block-button__link {
  41. &:not(.has-background):not(.has-text-color) {
  42. &:hover,
  43. &:focus,
  44. &.has-focus {
  45. color: var(--wp--custom--button--color--background);
  46. background-color: var(--wp--custom--button--color--text);
  47. }
  48. }
  49. }
  50. }