contextual_links.css

Same filename and directory in other branches
  1. 11.x core/themes/admin/migration/css/components/contextual_links.css
.contextual {
  z-index: 100;
}

.contextual .trigger {
  box-sizing: border-box;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);
}

.contextual .trigger::before {
  position: absolute;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  content: "";
  background: var(--gin-color-primary);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  -webkit-mask-image: url("../../media/sprite.svg#media-edit-view");
  mask-image: url("../../media/sprite.svg#media-edit-view");
  -webkit-mask-size: var(--gin-spacing-s) var(--gin-spacing-s);
  mask-size: var(--gin-spacing-s) var(--gin-spacing-s);
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
}

[dir="ltr"] .contextual .trigger::before {
  transform: translate(-50%, -50%);
}

[dir="rtl"] .contextual .trigger::before {
  transform: translate(50%, -50%);
}

.contextual .trigger,
.contextual .trigger:hover,
.contextual .trigger:focus {
  border: 1px solid var(--gin-border-color-layer2);
  background: var(--gin-bg-layer3);
}

.contextual .trigger:hover,
.contextual .trigger:focus {
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus);
}

.contextual.open .trigger {
  border-block-end: 0 none;
  border-radius: 50%;
}

.contextual-region .contextual .contextual-links {
  min-width: 120px;
  margin: 0;
  padding: 0.5em;
  border: 0 none;
  border-radius: var(--gin-border-l);
  background: var(--gin-bg-layer3);
  box-shadow: var(--gin-shadow-l2);
  inset-block-start: var(--gin-spacing-xxs);
}

.contextual-region .contextual .contextual-links li {
  background: transparent;
}

.contextual-region .contextual .contextual-links li a {
  margin: 0;
  padding: var(--gin-spacing-xs) var(--gin-spacing-m);
  white-space: nowrap;
  color: var(--gin-color-primary);
  border-radius: var(--gin-border-s);
  background: transparent;
  font-family: var(--gin-font);
  line-height: 1;
}

.contextual-region .contextual .contextual-links li a:hover,
.contextual-region .contextual .contextual-links li a:active {
  color: var(--gin-color-button-text);
  background: var(--gin-color-primary);
}

.contextual-region .contextual .contextual-links li a:focus {
  outline: none;
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus);
}

.contextual-region .contextual .contextual-links .ajax-progress-throbber {
  border-radius: 50%;
  background: var(--gin-color-primary);
  inset-block-start: 0.125rem;
}

.contextual-region .contextual .contextual-links .ajax-progress-throbber::before {
  inset-block-start: var(--gin-spacing-xxs);
  inset-inline-start: var(--gin-spacing-xxs);
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--gin-color-button-text);
  border-inline-end: 2px dotted transparent;
}

.no-touchevents .contextual-region .contextual .contextual-links li a:hover,
.no-touchevents .contextual-region .contextual .contextual-links li a:active {
  color: var(--gin-color-button-text);
  background: var(--gin-color-primary);
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/components/contextual_links.css

View source 
  1. .contextual {

  2.   z-index: 100;

  3. }

  4. 

  5. .contextual .trigger {

  6.   box-sizing: border-box;

  7.   width: 32px !important;

  8.   height: 32px !important;

  9.   border-radius: 50%;

  10.   box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);

  11. }

  12. 

  13. .contextual .trigger::before {

  14.   position: absolute;

  15.   display: block;

  16.   width: 0.75rem;

  17.   height: 0.75rem;

  18.   content: "";

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

  20.   inset-block-start: 50%;

  21.   inset-inline-start: 50%;

  22.   -webkit-mask-image: url("../../media/sprite.svg#media-edit-view");

  23.   mask-image: url("../../media/sprite.svg#media-edit-view");

  24.   -webkit-mask-size: var(--gin-spacing-s) var(--gin-spacing-s);

  25.   mask-size: var(--gin-spacing-s) var(--gin-spacing-s);

  26.   -webkit-mask-position: 100% 100%;

  27.   mask-position: 100% 100%;

  28. }

  29. 

  30. [dir="ltr"] .contextual .trigger::before {

  31.   transform: translate(-50%, -50%);

  32. }

  33. 

  34. [dir="rtl"] .contextual .trigger::before {

  35.   transform: translate(50%, -50%);

  36. }

  37. 

  38. .contextual .trigger,

  39. .contextual .trigger:hover,

  40. .contextual .trigger:focus {

  41.   border: 1px solid var(--gin-border-color-layer2);

  42.   background: var(--gin-bg-layer3);

  43. }

  44. 

  45. .contextual .trigger:hover,

  46. .contextual .trigger:focus {

  47.   box-shadow:

  48.     0 0 0 1px var(--gin-color-focus-border),

  49.     0 0 0 4px var(--gin-color-focus);

  50. }

  51. 

  52. .contextual.open .trigger {

  53.   border-block-end: 0 none;

  54.   border-radius: 50%;

  55. }

  56. 

  57. .contextual-region .contextual .contextual-links {

  58.   min-width: 120px;

  59.   margin: 0;

  60.   padding: 0.5em;

  61.   border: 0 none;

  62.   border-radius: var(--gin-border-l);

  63.   background: var(--gin-bg-layer3);

  64.   box-shadow: var(--gin-shadow-l2);

  65.   inset-block-start: var(--gin-spacing-xxs);

  66. }

  67. 

  68. .contextual-region .contextual .contextual-links li {

  69.   background: transparent;

  70. }

  71. 

  72. .contextual-region .contextual .contextual-links li a {

  73.   margin: 0;

  74.   padding: var(--gin-spacing-xs) var(--gin-spacing-m);

  75.   white-space: nowrap;

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

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

  78.   background: transparent;

  79.   font-family: var(--gin-font);

  80.   line-height: 1;

  81. }

  82. 

  83. .contextual-region .contextual .contextual-links li a:hover,

  84. .contextual-region .contextual .contextual-links li a:active {

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

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

  87. }

  88. 

  89. .contextual-region .contextual .contextual-links li a:focus {

  90.   outline: none;

  91.   box-shadow:

  92.     0 0 0 1px var(--gin-color-focus-border),

  93.     0 0 0 4px var(--gin-color-focus);

  94. }

  95. 

  96. .contextual-region .contextual .contextual-links .ajax-progress-throbber {

  97.   border-radius: 50%;

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

  99.   inset-block-start: 0.125rem;

  100. }

  101. 

  102. .contextual-region .contextual .contextual-links .ajax-progress-throbber::before {

  103.   inset-block-start: var(--gin-spacing-xxs);

  104.   inset-inline-start: var(--gin-spacing-xxs);

  105.   width: 1rem;

  106.   height: 1rem;

  107.   border: 2px solid var(--gin-color-button-text);

  108.   border-inline-end: 2px dotted transparent;

  109. }

  110. 

  111. .no-touchevents .contextual-region .contextual .contextual-links li a:hover,

  112. .no-touchevents .contextual-region .contextual .contextual-links li a:active {

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

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

  115. }

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