forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
112 lines
2.5 KiB
SCSS
112 lines
2.5 KiB
SCSS
.contextual {
|
|
z-index: 100;
|
|
|
|
.trigger {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
|
|
// Icon
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: block;
|
|
width: .75rem;
|
|
height: .75rem;
|
|
mask-image: icon('media-edit');
|
|
mask-size: var(--gin-spacing-s) var(--gin-spacing-s);
|
|
mask-position: 100% 100%;
|
|
background: var(--gin-color-primary);
|
|
}
|
|
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
background: var(--gin-bg-layer3);
|
|
border: 1px solid var(--gin-border-color-layer2);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
box-shadow: 0 0 0 1px var(--gin-color-focus-border),
|
|
0 0 0 4px var(--gin-color-focus);
|
|
}
|
|
}
|
|
|
|
// Open trigger
|
|
&.open .trigger {
|
|
border-radius: 50%;
|
|
border-bottom: 0 none;
|
|
}
|
|
}
|
|
|
|
.contextual-region .contextual {
|
|
// Contextual Link list
|
|
.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);
|
|
|
|
li {
|
|
background: transparent;
|
|
|
|
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);
|
|
|
|
&:hover, &:active {
|
|
color: var(--gin-color-button-text);
|
|
background: var(--gin-color-primary);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 1px var(--gin-color-focus-border),
|
|
0 0 0 4px var(--gin-color-focus);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Throbber
|
|
.ajax-progress-throbber {
|
|
top: .125rem;
|
|
background: var(--gin-color-primary);
|
|
border-radius: 50%;
|
|
|
|
&::before {
|
|
top: var(--gin-spacing-xxs);
|
|
left: var(--gin-spacing-xxs);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 2px solid var(--gin-color-button-text);
|
|
border-right: 2px dotted transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-touchevents .contextual-region .contextual {
|
|
.contextual-links li a {
|
|
&:hover, &:active {
|
|
color: var(--gin-color-button-text);
|
|
background: var(--gin-color-primary);
|
|
}
|
|
}
|
|
}
|