1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- /**
- * Button
- */
- .wp-block-button__link,
- .wp-block-file__button {
- // Extend button style
- @extend %button-style;
- }
- /* Default Style */
- .wp-block-button__link {
- color: #{map-deep-get($config-button, "color", "text")};
- font-weight: #{map-deep-get($config-button, "font", "weight")};
- @include font-family( map-deep-get($config-button, "font", "family") );
- font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
- line-height: #{map-deep-get($config-button, "font", "line-height")};
- background-color: #{map-deep-get($config-button, "color", "background")};
- border-radius: #{map-deep-get($config-button, "border-radius")};
- padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
- &:hover,
- &:focus,
- &.has-focus {
- color: #{map-deep-get($config-button, "color", "text-hover")};
- background-color: #{map-deep-get($config-button, "color", "background-hover")};
- }
- /* Outline Style */
- &.is-style-outline,
- .is-style-outline & {
- border: 2px solid currentcolor;
- &:not(.has-text-color) {
- color: #{map-deep-get($config-button, "color", "background")};
- }
- &:hover,
- &:focus,
- &.has-focus {
- color: #{map-deep-get($config-global, "color", "primary", "hover")};
- background: transparent;
- }
- .has-primary-background-color &:not(.has-text-color) {
- color: #{map-deep-get($config-button, "color", "text")};
- }
- }
- /* Squared Style */
- &.is-style-squared,
- .is-style-squared & {
- border-radius: 0;
- }
- }
- /* Default Style */
- .button {
- color: #{map-deep-get($config-button, "color", "text")};
- font-weight: #{map-deep-get($config-button, "font", "weight")};
- @include font-family( map-deep-get($config-button, "font", "family") );
- font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
- line-height: #{map-deep-get($config-button, "font", "line-height")};
- background-color: #{map-deep-get($config-button, "color", "background")};
- border-radius: #{map-deep-get($config-button, "border-radius")};
- padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
- &:hover,
- &:focus,
- &.has-focus {
- color: #{map-deep-get($config-button, "color", "text-hover")};
- background-color: #{map-deep-get($config-button, "color", "background-hover")};
- }
- }
|