forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
103 lines
2.1 KiB
SCSS
103 lines
2.1 KiB
SCSS
.block-page-title-block {
|
|
@include mq($to: medium) {
|
|
.gin--edit-form .region-sticky--is-sticky & {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--gin-font-size-h1);
|
|
font-weight: var(--gin-font-weight-semibold);
|
|
line-height: normal;
|
|
letter-spacing: -.05em;
|
|
color: var(--gin-color-title);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-right: .25em;
|
|
max-width: 90%;
|
|
transition: font-size 0.25s ease;
|
|
|
|
@include mq(ultra) {
|
|
.region-sticky--is-sticky & {
|
|
font-size: var(--gin-font-size-h3);
|
|
}
|
|
}
|
|
|
|
&__language {
|
|
display: block;
|
|
font-size: var(--gin-font-size-xs);
|
|
font-weight: var(--gin-font-weight-normal);;
|
|
letter-spacing: normal;
|
|
color: var(--gin-color-text);
|
|
}
|
|
|
|
&--is-translation + .shortcut-action .shortcut-action__icon {
|
|
top: -3px;
|
|
}
|
|
}
|
|
|
|
.shortcut-action {
|
|
position: relative;
|
|
align-self: center;
|
|
margin-left: 0;
|
|
border-radius: var(--gin-border-m);
|
|
|
|
&__icon {
|
|
position: relative;
|
|
top: 3px;
|
|
background: var(--gin-icon-color);
|
|
mask-image: icon('shortcut');
|
|
mask-size: 75% 75%;
|
|
mask-position: center center;
|
|
mask-repeat: no-repeat;
|
|
|
|
@include mq(large) {
|
|
top: var(--gin-spacing-xxs);
|
|
mask-size: 85% 85%;
|
|
}
|
|
|
|
.gin--edit-form & {
|
|
top: 3px;
|
|
}
|
|
}
|
|
|
|
&:hover &__icon {
|
|
opacity: 1;
|
|
background: var(--gin-color-primary);
|
|
}
|
|
|
|
&--remove {
|
|
.shortcut-action__icon {
|
|
background: var(--gin-color-primary);
|
|
|
|
.gin--high-contrast-mode & {
|
|
mask-image: icon('shortcut-filled');
|
|
}
|
|
}
|
|
|
|
&:hover .shortcut-action__icon {
|
|
opacity: 1;
|
|
background: var(--gin-color-disabled);
|
|
}
|
|
}
|
|
|
|
&__message {
|
|
position: absolute;
|
|
top: calc(100% + var(--gin-spacing-xs));
|
|
right: 0;
|
|
min-width: 120px;
|
|
pointer-events: none;
|
|
padding: var(--gin-spacing-xs);
|
|
margin-top: calc(var(--gin-spacing-xxs) * -1);
|
|
color: var(--gin-color-contextual-text);
|
|
background: var(--gin-color-contextual);
|
|
border-radius: var(--gin-border-xs);
|
|
}
|
|
}
|