gin-button.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-button.pcss.css
@import "media-queries.pcss.css";

.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 (--admin-wide) {
    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: 16px 16px;
  mask-repeat: no-repeat;
  mask-position: center center;
}

File

View on git.drupalcode.org

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

View source 
  1. @import "media-queries.pcss.css";

  2. 

  3. .button,

  4. .project__action_button,

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

  6. .dropbutton__toggle {

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

  8.   background-color: transparent;

  9.   box-shadow: none;

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

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

  12. 

  13.   &:hover {

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

  15.   }

  16. 

  17.   &:active,

  18.   &:focus {

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

  20.   }

  21. 

  22.   &:hover,

  23.   &:active,

  24.   &:focus {

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

  26.   }

  27. 

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

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

  30.   }

  31. 

  32.   @media (--admin-wide) {

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

  34.   }

  35. }

  36. 

  37. .button,

  38. .button:not(:focus),

  39. .form-actions .button,

  40. .project__action_button,

  41. .action-link--icon-trash.action-link {

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

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

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

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

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

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

  48. 

  49.   &:hover {

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

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

  52.   }

  53. 

  54.   &:active,

  55.   &:focus {

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

  57.   }

  58. 

  59.   &:hover,

  60.   &:active,

  61.   &:focus,

  62.   &:hover:focus {

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

  64.   }

  65. 

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

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

  68.   }

  69. }

  70. 

  71. .form-actions .button {

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

  73. }

  74. 

  75. .button.button--small {

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

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

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

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

  80. }

  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. 

  89. #edit-submit.form-submit,

  90. .button--primary,

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

  92. .ief-entity-submit {

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

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

  95. 

  96.   &:hover {

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

  98.   }

  99. 

  100.   &:active,

  101.   &:focus {

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

  103.   }

  104. 

  105.   &,

  106.   &:hover,

  107.   &:active,

  108.   &:focus {

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

  110.   }

  111. }

  112. 

  113. a.button:hover,

  114. a.button:active {

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

  116. }

  117. 

  118. a.button--primary:hover,

  119. a.button--primary:active,

  120. a.button--primary:focus,

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

  122.   .gin--dark-mode 
  123. }

  124. 

  125. .button.button:disabled,

  126. .button.button.is-disabled {

  127.   &,

  128.   &:hover,

  129.   &:active,

  130.   &:focus {

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

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

  133.     background: transparent;

  134.     box-shadow: none;

  135.   }

  136. }

  137. 

  138. .button.button--primary:disabled,

  139. .button.button--primary.is-disabled {

  140.   &,

  141.   &:hover,

  142.   &:active,

  143.   &:focus {

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

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

  146.   }

  147. }

  148. 

  149. .action-link.action-link--icon-trash {

  150.   box-sizing: border-box;

  151.   min-height: 2.5rem;

  152.   line-height: 1;

  153. 

  154.   &,

  155.   &:hover,

  156.   &:active,

  157.   &:focus,

  158.   &:focus:hover {

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

  160.   }

  161. }

  162. 

  163. /* Autocomplete field remove button */

  164. .multiple-fields-remove-button.button {

  165.   border: 0 none !important;

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

  167.   mask-size: 16px 16px;

  168.   mask-repeat: no-repeat;

  169.   mask-position: center center;

  170. }

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