forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
95 lines
3.1 KiB
CSS
95 lines
3.1 KiB
CSS
.responsive-preview {
|
|
z-index: 502;
|
|
}
|
|
|
|
.responsive-preview-item-list {
|
|
top: 36px !important;
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger {
|
|
width: 4em;
|
|
background: none;
|
|
border-radius: var(--gin-border-s);
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger:hover::before {
|
|
background-color: var(--gin-color-title);
|
|
}
|
|
|
|
.gin--classic-toolbar .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger:hover::before {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
top: var(--gin-spacing-s);
|
|
margin: 0;
|
|
background-color: var(--gin-color-text-light);
|
|
-webkit-mask-image: url("../../media/sprite.svg#drop-view");
|
|
mask-image: url("../../media/sprite.svg#drop-view");
|
|
-webkit-mask-size: .75rem .75rem;
|
|
mask-size: .75rem .75rem;
|
|
-webkit-mask-position: center center;
|
|
mask-position: center center;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
transition: transform .2s var(--gin-easing);
|
|
}
|
|
|
|
[dir="ltr"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
|
|
right: var(--gin-spacing-xs);
|
|
}
|
|
|
|
[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
|
|
left: var(--gin-spacing-xs);
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .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);
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .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);
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-device:hover {
|
|
color: var(--gin-color-button-text);
|
|
background-color: var(--gin-color-primary);
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-configure {
|
|
color: var(--gin-color-text-light);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-configure:hover {
|
|
color: var(--gin-color-primary);
|
|
}
|
|
|
|
.toolbar .toolbar-tab-responsive-preview.toolbar-tab.open, .toolbar .toolbar-tab-responsive-preview.toolbar-tab.open::before {
|
|
background-color: var(--gin-bg-layer3);
|
|
}
|
|
|
|
.gin--classic-toolbar .toolbar .toolbar-tab-responsive-preview.toolbar-tab.open .responsive-preview-trigger::before {
|
|
background-color: #111;
|
|
}
|
|
|
|
[dir="ltr"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab.open .responsive-preview-trigger::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab.open .responsive-preview-trigger::after {
|
|
transform: rotate(-180deg);
|
|
}
|
|
|