_editor.scss 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /**
  2. * Button
  3. */
  4. .wp-block-button__link,
  5. .wp-block-file__button {
  6. // Extend button style
  7. @extend %button-style;
  8. }
  9. /* Default Style */
  10. .wp-block-button__link {
  11. color: #{map-deep-get($config-button, "color", "text")};
  12. font-weight: #{map-deep-get($config-button, "font", "weight")};
  13. @include font-family( map-deep-get($config-button, "font", "family") );
  14. font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
  15. line-height: #{map-deep-get($config-button, "font", "line-height")};
  16. background-color: #{map-deep-get($config-button, "color", "background")};
  17. border-radius: #{map-deep-get($config-button, "border-radius")};
  18. padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
  19. &:hover,
  20. &:focus,
  21. &.has-focus {
  22. color: #{map-deep-get($config-button, "color", "text-hover")};
  23. background-color: #{map-deep-get($config-button, "color", "background-hover")};
  24. }
  25. /* Outline Style */
  26. &.is-style-outline,
  27. .is-style-outline & {
  28. border: 2px solid currentcolor;
  29. &:not(.has-text-color) {
  30. color: #{map-deep-get($config-button, "color", "background")};
  31. }
  32. &:hover,
  33. &:focus,
  34. &.has-focus {
  35. color: #{map-deep-get($config-global, "color", "primary", "hover")};
  36. background: transparent;
  37. }
  38. .has-primary-background-color &:not(.has-text-color) {
  39. color: #{map-deep-get($config-button, "color", "text")};
  40. }
  41. }
  42. /* Squared Style */
  43. &.is-style-squared,
  44. .is-style-squared & {
  45. border-radius: 0;
  46. }
  47. }
  48. /* Default Style */
  49. .button {
  50. color: #{map-deep-get($config-button, "color", "text")};
  51. font-weight: #{map-deep-get($config-button, "font", "weight")};
  52. @include font-family( map-deep-get($config-button, "font", "family") );
  53. font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
  54. line-height: #{map-deep-get($config-button, "font", "line-height")};
  55. background-color: #{map-deep-get($config-button, "color", "background")};
  56. border-radius: #{map-deep-get($config-button, "border-radius")};
  57. padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
  58. &:hover,
  59. &:focus,
  60. &.has-focus {
  61. color: #{map-deep-get($config-button, "color", "text-hover")};
  62. background-color: #{map-deep-get($config-button, "color", "background-hover")};
  63. }
  64. }