gin-action-link.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-action-link.pcss.css
.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.pcss.css

View source 
  1. .action-link {

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

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

  4.   background: transparent;

  5. 

  6.   &:hover {

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

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

  9.   }

  10. 

  11.   &:focus {

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

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

  14.   }

  15. 

  16.   &.action-link--extrasmall {

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

  18.   }

  19. 

  20.   &::before {

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

  22.     background-image: none;

  23.     mask-size: contain;

  24.     mask-repeat: no-repeat;

  25.     mask-position: center;

  26.   }

  27. }

  28. 

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

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

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

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

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

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

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

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

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

  38.   background-image: none;

  39. }

  40. 

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

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

  43. }

  44. 

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

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

  47. }

  48. 

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

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

  51. }

  52. 

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

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

  55. }

  56. 

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

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

  59. }

  60. 

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

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

  63. }

  64. 

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

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

  67. }

  68. 

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

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

  71. }

  72. 

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

  74. .button.button--danger,

  75. a.button.button--danger {

  76.   min-height: 0;

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

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

  79. 

  80.   &::before {

  81.     display: none;

  82.   }

  83. 

  84.   &,

  85.   &:hover,

  86.   &:focus,

  87.   &:active {

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

  89.   }

  90. 

  91.   &:hover,

  92.   &:focus,

  93.   &:active {

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

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

  96.   }

  97. }

  98. 

  99. /* Primary danger button */

  100. .button--primary.button--danger,

  101. a.button--primary.button--danger,

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

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

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

  105. }

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