gin-action-link.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/migration/css/base/gin-action-link.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

.action-link {
  color: var(--gin-color-primary);
  border-radius: var(--gin-border-s);
  background: transparent;

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

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

  &.action-link--extrasmall {
    font-size: var(--gin-font-size-xxs);
  }

  &::before {
    background: var(--gin-color-primary) !important;
    background-image: none;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
}

.action-link--icon-plus:hover::before,
.action-link--icon-ex:hover::before,
.action-link--icon-checkmark:hover::before,
.action-link--icon-show:hover::before,
.action-link--icon-cog:hover::before,
.action-link--icon-hide:hover::before,
.action-link--icon-show::before,
.action-link--icon-hide::before {
  background-color: var(--gin-color-primary);
  background-image: none;
}

.action-link--icon-plus::before {
  mask-image: var(--admin-icon-add);
}

.action-link--icon-checkmark::before {
  mask-image: var(--admin-icon-checkmark);
}

.action-link--icon-show::before {
  mask-image: var(--admin-icon-show);
}

.action-link--icon-hide::before {
  mask-image: var(--admin-icon-hide);
}

.action-link--icon-cog::before {
  mask-image: var(--admin-icon-config);
}

.action-link--icon-ex::before {
  mask-image: var(--admin-icon-remove);
}

.action-link--icon-key::before {
  mask-image: var(--admin-icon-devel);
}

.action-link--icon-questionmark::before {
  mask-image: var(--admin-icon-help);
}

.action-link--icon-trash.action-link--danger,
.button.button--danger,
a.button.button--danger {
  min-height: 0;
  color: var(--gin-color-danger);
  box-shadow: 0 1px 2px var(--gin-color-danger-lightest);

  &::before {
    display: none;
  }

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

  &:hover,
  &:focus,
  &:active {
    color: var(--gin-bg-layer);
    background-color: var(--gin-color-danger);
  }
}

/* Primary danger button */

.button--primary.button--danger,
a.button--primary.button--danger,
#edit-submit.button.button--danger {
  color: var(--gin-bg-layer);
  background-color: var(--gin-color-danger);
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-action-link.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. 

  8. .action-link {

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

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

  11.   background: transparent;

  12. 

  13.   &:hover {

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

  15.     background: var(--gin-bg-item-hover);

  16.   }

  17. 

  18.   &:focus {

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

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

  21.   }

  22. 

  23.   &.action-link--extrasmall {

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

  25.   }

  26. 

  27.   &::before {

  28.     background: var(--gin-color-primary) !important;

  29.     background-image: none;

  30.     mask-size: contain;

  31.     mask-repeat: no-repeat;

  32.     mask-position: center;

  33.   }

  34. }

  35. 

  36. .action-link--icon-plus:hover::before,

  37. .action-link--icon-ex:hover::before,

  38. .action-link--icon-checkmark:hover::before,

  39. .action-link--icon-show:hover::before,

  40. .action-link--icon-cog:hover::before,

  41. .action-link--icon-hide:hover::before,

  42. .action-link--icon-show::before,

  43. .action-link--icon-hide::before {

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

  45.   background-image: none;

  46. }

  47. 

  48. .action-link--icon-plus::before {

  49.   mask-image: var(--admin-icon-add);

  50. }

  51. 

  52. .action-link--icon-checkmark::before {

  53.   mask-image: var(--admin-icon-checkmark);

  54. }

  55. 

  56. .action-link--icon-show::before {

  57.   mask-image: var(--admin-icon-show);

  58. }

  59. 

  60. .action-link--icon-hide::before {

  61.   mask-image: var(--admin-icon-hide);

  62. }

  63. 

  64. .action-link--icon-cog::before {

  65.   mask-image: var(--admin-icon-config);

  66. }

  67. 

  68. .action-link--icon-ex::before {

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

  70. }

  71. 

  72. .action-link--icon-key::before {

  73.   mask-image: var(--admin-icon-devel);

  74. }

  75. 

  76. .action-link--icon-questionmark::before {

  77.   mask-image: var(--admin-icon-help);

  78. }

  79. 

  80. .action-link--icon-trash.action-link--danger,

  81. .button.button--danger,

  82. a.button.button--danger {

  83.   min-height: 0;

  84.   color: var(--gin-color-danger);

  85.   box-shadow: 0 1px 2px var(--gin-color-danger-lightest);

  86. 

  87.   &::before {

  88.     display: none;

  89.   }

  90. 

  91.   &,

  92.   &:hover,

  93.   &:focus,

  94.   &:active {

  95.     border-color: var(--gin-color-danger) !important;

  96.   }

  97. 

  98.   &:hover,

  99.   &:focus,

  100.   &:active {

  101.     color: var(--gin-bg-layer);

  102.     background-color: var(--gin-color-danger);

  103.   }

  104. }

  105. 

  106. /* Primary danger button */

  107. 

  108. .button--primary.button--danger,

  109. a.button--primary.button--danger,

  110. #edit-submit.button.button--danger {

  111.   color: var(--gin-bg-layer);

  112.   background-color: var(--gin-color-danger);

  113. }

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