forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
117 lines
3.2 KiB
CSS
117 lines
3.2 KiB
CSS
.contextual {
|
|
z-index: 100;
|
|
}
|
|
|
|
.contextual .trigger {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.contextual .trigger::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
display: block;
|
|
width: .75rem;
|
|
height: .75rem;
|
|
-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%;
|
|
background: var(--gin-color-primary);
|
|
}
|
|
|
|
[dir="ltr"] .contextual .trigger::before {
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
[dir="rtl"] .contextual .trigger::before {
|
|
right: 50%;
|
|
transform: translate(50%, -50%);
|
|
}
|
|
|
|
.contextual .trigger, .contextual .trigger:hover, .contextual .trigger:focus {
|
|
background: var(--gin-bg-layer3);
|
|
border: 1px solid var(--gin-border-color-layer2);
|
|
}
|
|
|
|
.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-radius: 50%;
|
|
border-bottom: 0 none;
|
|
}
|
|
|
|
.contextual-region .contextual .contextual-links {
|
|
top: var(--gin-spacing-xxs);
|
|
padding: .5em;
|
|
margin: 0;
|
|
min-width: 120px;
|
|
background: var(--gin-bg-layer3);
|
|
border: 0 none;
|
|
border-radius: var(--gin-border-l);
|
|
box-shadow: var(--gin-shadow-l2);
|
|
}
|
|
|
|
.contextual-region .contextual .contextual-links li {
|
|
background: transparent;
|
|
}
|
|
|
|
.contextual-region .contextual .contextual-links li a {
|
|
font-family: var(--gin-font);
|
|
color: var(--gin-color-primary);
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
|
|
margin: 0;
|
|
background: transparent;
|
|
border-radius: var(--gin-border-s);
|
|
}
|
|
|
|
.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 {
|
|
top: .125rem;
|
|
background: var(--gin-color-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.contextual-region .contextual .contextual-links .ajax-progress-throbber::before {
|
|
top: var(--gin-spacing-xxs);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 2px solid var(--gin-color-button-text);
|
|
}
|
|
|
|
[dir="ltr"] .contextual-region .contextual .contextual-links .ajax-progress-throbber::before {
|
|
left: var(--gin-spacing-xxs);
|
|
border-right: 2px dotted transparent;
|
|
}
|
|
|
|
[dir="rtl"] .contextual-region .contextual .contextual-links .ajax-progress-throbber::before {
|
|
right: var(--gin-spacing-xxs);
|
|
border-left: 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);
|
|
}
|
|
|