gin-button.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/migration/css/base/gin-button.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
.button,
.project__action_button,
.dropbutton__item:first-of-type > *,
.dropbutton__toggle {
  color: var(--gin-color-primary);
  background-color: transparent;
  box-shadow: none;
  font-size: var(--gin-font-size-s);
  font-weight: var(--gin-font-weight-semibold);

  &:hover {
    background-color: var(--gin-color-primary-hover);
  }

  &:active,
  &:focus {
    background-color: var(--gin-color-primary-active);
  }

  &:hover,
  &:active,
  &:focus {
    color: var(--gin-color-button-text);
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: var(--gin-transition);
  }

  @media (min-width: 80em) {
    font-size: var(--gin-font-size);
  }
}
.button,
.button:not(:focus),
.form-actions .button,
.project__action_button,
.action-link--icon-trash.action-link {
  border: 2px solid var(--gin-color-primary) !important;
  border-radius: var(--gin-border-m);
  box-shadow: 0 1px 2px var(--gin-color-primary-light);
  font-size: var(--gin-font-size-s);
  padding-block: calc(var(--gin-spacing-s) - 2px);
  padding-inline: var(--gin-spacing-m);

  &:hover {
    border-color: var(--gin-color-primary-hover) !important;
    background-color: var(--gin-color-primary-hover);
  }

  &:active,
  &:focus {
    border-color: var(--gin-color-primary-active) !important;
  }

  &:hover,
  &:active,
  &:focus,
  &:hover:focus {
    color: var(--gin-color-button-text);
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: var(--gin-transition);
  }
}
.form-actions .button {
  margin-inline-end: var(--gin-spacing-xs);
}
.button.button--small {
  border-radius: var(--gin-border-s);
  font-size: var(--gin-font-size-xxs);
  padding-block: calc(var(--gin-spacing-xxs) + 2px);
  padding-inline: var(--gin-spacing-s);
}
.button.button--extrasmall {
  border-radius: var(--gin-border-s);
  font-size: var(--gin-font-size-xxs);
  padding-block: var(--gin-spacing-xxs);
  padding-inline: var(--gin-spacing-s);
}
#edit-submit.form-submit,
.button--primary,
.button--primary:not(:focus),
.ief-entity-submit {
  background: var(--gin-color-primary);
  box-shadow: 0.1em 0.25em 0.5em var(--gin-color-primary-light);

  &:hover {
    background-color: var(--gin-color-primary-hover);
  }

  &:active,
  &:focus {
    background-color: var(--gin-color-primary-active);
  }

  &,
  &:hover,
  &:active,
  &:focus {
    color: var(--gin-color-button-text);
  }
}
a.button:hover,
a.button:active {
  color: var(--gin-color-button-text);
}
a.button--primary:hover,
a.button--primary:active,
a.button--primary:focus,
a.button--primary:focus:hover {
  .gin--dark-mode & {
    color: var(--gin-bg-app);
  }
}
.button.button:disabled,
.button.button.is-disabled {
  &,
  &:hover,
  &:active,
  &:focus {
    color: var(--gin-color-disabled);
    border: 2px solid var(--gin-color-disabled-border) !important;
    background: transparent;
    box-shadow: none;
  }
}
.button.button--primary:disabled,
.button.button--primary.is-disabled {
  &,
  &:hover,
  &:active,
  &:focus {
    color: var(--gin-color-disabled);
    background-color: var(--gin-color-disabled-bg);
  }
}
.action-link.action-link--icon-trash {
  box-sizing: border-box;
  min-height: 2.5rem;
  line-height: 1;

  &,
  &:hover,
  &:active,
  &:focus,
  &:focus:hover {
    border: 2px solid var(--gin-color-danger) !important;
  }
}
/* Autocomplete field remove button */
.multiple-fields-remove-button.button {
  border: 0 none !important;
  mask-image: var(--admin-icon-remove);
  mask-size: 1rem 1rem;
  mask-repeat: no-repeat;
  mask-position: center center;
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-button.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. .button,

  8. .project__action_button,

  9. .dropbutton__item:first-of-type > *,

  10. .dropbutton__toggle {

  11.   color: var(--gin-color-primary);

  12.   background-color: transparent;

  13.   box-shadow: none;

  14.   font-size: var(--gin-font-size-s);

  15.   font-weight: var(--gin-font-weight-semibold);

  16. 

  17.   &:hover {

  18.     background-color: var(--gin-color-primary-hover);

  19.   }

  20. 

  21.   &:active,

  22.   &:focus {

  23.     background-color: var(--gin-color-primary-active);

  24.   }

  25. 

  26.   &:hover,

  27.   &:active,

  28.   &:focus {

  29.     color: var(--gin-color-button-text);

  30.   }

  31. 

  32.   @media (prefers-reduced-motion: no-preference) {

  33.     transition: var(--gin-transition);

  34.   }

  35. 

  36.   @media (min-width: 80em) {

  37.     font-size: var(--gin-font-size);

  38.   }

  39. }

  40. .button,

  41. .button:not(:focus),

  42. .form-actions .button,

  43. .project__action_button,

  44. .action-link--icon-trash.action-link {

  45.   border: 2px solid var(--gin-color-primary) !important;

  46.   border-radius: var(--gin-border-m);

  47.   box-shadow: 0 1px 2px var(--gin-color-primary-light);

  48.   font-size: var(--gin-font-size-s);

  49.   padding-block: calc(var(--gin-spacing-s) - 2px);

  50.   padding-inline: var(--gin-spacing-m);

  51. 

  52.   &:hover {

  53.     border-color: var(--gin-color-primary-hover) !important;

  54.     background-color: var(--gin-color-primary-hover);

  55.   }

  56. 

  57.   &:active,

  58.   &:focus {

  59.     border-color: var(--gin-color-primary-active) !important;

  60.   }

  61. 

  62.   &:hover,

  63.   &:active,

  64.   &:focus,

  65.   &:hover:focus {

  66.     color: var(--gin-color-button-text);

  67.   }

  68. 

  69.   @media (prefers-reduced-motion: no-preference) {

  70.     transition: var(--gin-transition);

  71.   }

  72. }

  73. .form-actions .button {

  74.   margin-inline-end: var(--gin-spacing-xs);

  75. }

  76. .button.button--small {

  77.   border-radius: var(--gin-border-s);

  78.   font-size: var(--gin-font-size-xxs);

  79.   padding-block: calc(var(--gin-spacing-xxs) + 2px);

  80.   padding-inline: var(--gin-spacing-s);

  81. }

  82. .button.button--extrasmall {

  83.   border-radius: var(--gin-border-s);

  84.   font-size: var(--gin-font-size-xxs);

  85.   padding-block: var(--gin-spacing-xxs);

  86.   padding-inline: var(--gin-spacing-s);

  87. }

  88. #edit-submit.form-submit,

  89. .button--primary,

  90. .button--primary:not(:focus),

  91. .ief-entity-submit {

  92.   background: var(--gin-color-primary);

  93.   box-shadow: 0.1em 0.25em 0.5em var(--gin-color-primary-light);

  94. 

  95.   &:hover {

  96.     background-color: var(--gin-color-primary-hover);

  97.   }

  98. 

  99.   &:active,

  100.   &:focus {

  101.     background-color: var(--gin-color-primary-active);

  102.   }

  103. 

  104.   &,

  105.   &:hover,

  106.   &:active,

  107.   &:focus {

  108.     color: var(--gin-color-button-text);

  109.   }

  110. }

  111. a.button:hover,

  112. a.button:active {

  113.   color: var(--gin-color-button-text);

  114. }

  115. a.button--primary:hover,

  116. a.button--primary:active,

  117. a.button--primary:focus,

  118. a.button--primary:focus:hover {

  119.   .gin--dark-mode 
  120. }

  121. .button.button:disabled,

  122. .button.button.is-disabled {

  123.   &,

  124.   &:hover,

  125.   &:active,

  126.   &:focus {

  127.     color: var(--gin-color-disabled);

  128.     border: 2px solid var(--gin-color-disabled-border) !important;

  129.     background: transparent;

  130.     box-shadow: none;

  131.   }

  132. }

  133. .button.button--primary:disabled,

  134. .button.button--primary.is-disabled {

  135.   &,

  136.   &:hover,

  137.   &:active,

  138.   &:focus {

  139.     color: var(--gin-color-disabled);

  140.     background-color: var(--gin-color-disabled-bg);

  141.   }

  142. }

  143. .action-link.action-link--icon-trash {

  144.   box-sizing: border-box;

  145.   min-height: 2.5rem;

  146.   line-height: 1;

  147. 

  148.   &,

  149.   &:hover,

  150.   &:active,

  151.   &:focus,

  152.   &:focus:hover {

  153.     border: 2px solid var(--gin-color-danger) !important;

  154.   }

  155. }

  156. /* Autocomplete field remove button */

  157. .multiple-fields-remove-button.button {

  158.   border: 0 none !important;

  159.   mask-image: var(--admin-icon-remove);

  160.   mask-size: 1rem 1rem;

  161.   mask-repeat: no-repeat;

  162.   mask-position: center center;

  163. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.