[Summary view] [Print] [Text view]

   1  .wp-block-button__link {
   2      // Extend button style
   3      @include button-style();
   4  }
   5  
   6  /**
   7   * Block Options
   8   */
   9  
  10  .wp-block-button {
  11  
  12      // Target the default and filled button states.
  13      &:not(.is-style-outline) {
  14  
  15          .wp-block-button__link:not(:hover):not(:active) {
  16  
  17              // Text colors
  18              &:not(.has-text-color) {
  19                  color: var(--global--color-background);
  20  
  21                  // Nested
  22                  .has-background & {
  23                      color: var(--local--color-background, var(--global--color-background));
  24  
  25                      &.has-background {
  26                          color: var(--global--color-primary);
  27                      }
  28                  }
  29              }
  30  
  31              // Background-colors
  32              &:not(.has-background) {
  33                  background-color: var(--global--color-primary);
  34  
  35                  // Nested
  36                  .has-background & {
  37                      background-color: var(--local--color-primary, var(--global--color-primary));
  38                  }
  39              }
  40          }
  41  
  42          // Hover Button color should match parent element foreground color
  43          .wp-block-button__link:hover,
  44          .wp-block-button__link:active {
  45              border-color: currentColor !important;
  46              background-color: transparent !important;
  47              color: inherit !important;
  48          }
  49  
  50          // Remove :focus styles in the editor
  51          .wp-block-button__link:focus {
  52              outline-offset: inherit;
  53              outline: inherit;
  54          }
  55      }
  56  
  57      // Outline Style.
  58      &.is-style-outline {
  59  
  60          .wp-block-button__link:not(:hover):not(:active) {
  61  
  62              // Border colors
  63              &:not(.has-text-color),
  64              &:not(.has-background),
  65              &.has-background {
  66                  border-color: currentColor;
  67              }
  68  
  69              // Text colors
  70              &:not(.has-text-color) {
  71                  color: var(--global--color-primary);
  72  
  73                  // Nested
  74                  .has-background & {
  75                      color: var(--local--color-primary, var(--global--color-primary));
  76                  }
  77              }
  78  
  79              &.has-background {
  80                  // Nested
  81                  .has-background &:not(.has-text-color) {
  82                      color: inherit;
  83                  }
  84              }
  85  
  86              // Background-colors
  87              &:not(.has-background) {
  88                  background-color: transparent;
  89              }
  90          }
  91  
  92          // Hover Button color should match default button style
  93          .wp-block-button__link:hover,
  94          .wp-block-button__link:active {
  95  
  96              background-color: var(--global--color-primary) !important;
  97              border-color: transparent !important;
  98              color: var(--global--color-background) !important;
  99  
 100              .has-background & {
 101                  background-color: var(--local--color-primary, var(--global--color-primary)) !important;
 102                  color: var(--local--color-background, var(--global--color-background)) !important;
 103              }
 104  
 105              .has-text-color & {
 106                  color: var(--local--color-background, var(--global--color-background)) !important;
 107              }
 108          }
 109  
 110          // Remove :focus styles in the editor
 111          .wp-block-button__link:focus {
 112              outline-offset: inherit;
 113              outline: inherit;
 114          }
 115      }
 116  
 117      // Squared Style
 118      &.is-style-squared {
 119          border-radius: 0;
 120      }
 121  }
 122  
 123  .is-style-outline .wp-block-button__link[style*="radius"],
 124  .wp-block-button__link[style*="radius"] {
 125      outline-offset: 2px;
 126  }