forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
94 lines
2.1 KiB
SCSS
94 lines
2.1 KiB
SCSS
.responsive-preview {
|
|
z-index: 502;
|
|
|
|
&-item-list {
|
|
top: 36px !important;
|
|
}
|
|
}
|
|
|
|
.toolbar {
|
|
.toolbar-tab-responsive-preview.toolbar-tab {
|
|
// Trigger
|
|
.responsive-preview-trigger {
|
|
width: 4em;
|
|
background: none;
|
|
border-radius: var(--gin-border-s);
|
|
|
|
// Hover
|
|
&:hover::before {
|
|
background-color: var(--gin-color-title);
|
|
|
|
.gin--classic-toolbar & {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
// Icon
|
|
&::after {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
top: var(--gin-spacing-s);
|
|
right: var(--gin-spacing-xs);
|
|
margin: 0;
|
|
background-color: var(--gin-color-text-light);
|
|
mask-image: icon('drop');
|
|
mask-size: .75rem .75rem;
|
|
mask-position: center center;
|
|
mask-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
transition: transform .2s var(--gin-easing);
|
|
}
|
|
}
|
|
|
|
// Menu style
|
|
.responsive-preview-options {
|
|
padding: var(--gin-spacing-xs);
|
|
margin: 0;
|
|
background-color: var(--gin-bg-layer3);
|
|
border-bottom: 0 none;
|
|
border-radius: var(--gin-border-l);
|
|
box-shadow: var(--gin-shadow-l2);
|
|
|
|
// Device links
|
|
.responsive-preview-device.responsive-preview-device {
|
|
color: var(--gin-color-primary);
|
|
width: 100%;
|
|
padding: .625rem var(--gin-spacing-m);
|
|
border-radius: var(--gin-border-s);
|
|
|
|
&:hover {
|
|
color: var(--gin-color-button-text);
|
|
background-color: var(--gin-color-primary);
|
|
}
|
|
}
|
|
|
|
// Configuration link
|
|
.responsive-preview-configure {
|
|
color: var(--gin-color-text-light);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--gin-color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Open menu item
|
|
&.open {
|
|
&, &::before {
|
|
background-color: var(--gin-bg-layer3);
|
|
}
|
|
|
|
.responsive-preview-trigger::before {
|
|
.gin--classic-toolbar & {
|
|
background-color: #111;
|
|
}
|
|
}
|
|
|
|
.responsive-preview-trigger::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|