[Summary view] [Print] [Text view]

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