[Summary view] [Print] [Text view]

   1  // Responsive breakpoints mixin
   2  @mixin add_variables( $view: frontend ) {
   3  
   4      @if frontend == $view {
   5  
   6          :root {
   7              @content;
   8          }
   9      }
  10  
  11      @if editor == $view {
  12  
  13          :root,
  14          body {
  15              @content;
  16          }
  17      }
  18  }
  19  
  20  // Button style
  21  // - Applies button styles to blocks and elements that share them.
  22  @mixin button-style() {
  23      border: var(--button--border-width) solid transparent;
  24      border-radius: var(--button--border-radius);
  25      cursor: pointer;
  26      font-weight: var(--button--font-weight);
  27      font-family: var(--button--font-family);
  28      font-size: var(--button--font-size);
  29      line-height: var(--button--line-height);
  30      padding: var(--button--padding-vertical) var(--button--padding-horizontal);
  31      text-decoration: none;
  32  
  33      // Standard Button Color Relationship Logic
  34      &:not(:hover):not(:active) {
  35  
  36          // Text colors
  37          &:not(.has-text-color) {
  38              color: var(--global--color-background);
  39  
  40              // Nested
  41              .has-background & {
  42                  color: var(--local--color-background, var(--global--color-primary));
  43  
  44                  &.has-background {
  45                      color: var(--global--color-primary);
  46                  }
  47              }
  48          }
  49  
  50          // Background-colors
  51          &:not(.has-background) {
  52              background-color: var(--global--color-primary);
  53  
  54              // Nested
  55              .has-background & {
  56                  background-color: var(--local--color-primary, var(--global--color-primary));
  57              }
  58          }
  59      }
  60  
  61      // Hover Button color should match parent element foreground color
  62      &:hover,
  63      &:active {
  64          background-color: transparent;
  65          border-color: currentColor;
  66          color: inherit;
  67      }
  68  
  69      // Focus Button outline color should always match the current text color
  70      &:focus {
  71          outline-offset: -6px;
  72          outline: 2px dotted currentColor;
  73      }
  74  
  75      // Disabled Button colors
  76      &:disabled {
  77          background-color: var(--global--color-white-50);
  78          border-color: var(--global--color-white-50);
  79          color: var(--button--color-text-active);
  80      }
  81  }
  82  
  83  @mixin innerblock-margin-clear($container) {
  84  
  85      // Clear the top margin for the first-child.
  86      > #{$container} > *:first-child {
  87          margin-top: 0;
  88      }
  89  
  90      // Last child that is not the appender.
  91      > #{$container} > *:last-child:not(.block-list-appender) {
  92          margin-bottom: 0;
  93      }
  94  
  95      // When selected, the last item becomes the second last because of the appender.
  96      &.has-child-selected > #{$container} > *:nth-last-child(2),
  97      &.is-selected > #{$container} > *:nth-last-child(2) {
  98          margin-bottom: 0;
  99      }
 100  }