_style.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /**
  2. * Button
  3. */
  4. button,
  5. .button,
  6. input[type="submit"] {
  7. // Extend button style
  8. @extend %button-style;
  9. }
  10. /**
  11. * Block Options
  12. */
  13. .wp-block-button {
  14. font-family: var(--button--font-family);
  15. font-size: var(--button--font-size);
  16. font-weight: var(--button--font-weight);
  17. line-height: var(--button--line-height);
  18. &:not(.is-style-outline) .wp-block-button__link {
  19. @include button-hover-styles;
  20. }
  21. &.wp-block-button__link,
  22. .wp-block-button__link {
  23. @include button-main-styles;
  24. }
  25. // Outline Style
  26. &.is-style-outline {
  27. border: none;
  28. &.wp-block-button__link,
  29. .wp-block-button__link {
  30. border: var(--button--border-width) solid currentcolor;
  31. padding: var(--button--padding-vertical) var(--button--padding-horizontal);
  32. &:not(.has-background) {
  33. background: transparent;
  34. }
  35. &:not(.has-text-color) {
  36. color: var(--button--color-background);
  37. }
  38. &:not(.has-text-color),
  39. &.has-secondary-color{
  40. &:active {
  41. color: var(--button--color-background);
  42. }
  43. &:hover,
  44. &:focus,
  45. &.has-focus {
  46. color: var(--button--color-background-hover);
  47. }
  48. }
  49. }
  50. }
  51. // Squared Style
  52. &.is-style-squared .wp-block-button__link {
  53. border-radius: 0;
  54. }
  55. }