103 lines
2.0 KiB
SCSS
103 lines
2.0 KiB
SCSS
.cmplz-shepherd {
|
|
--rsp-black: #333;
|
|
background: var(--rsp-black);
|
|
color: var(--rsp-white);
|
|
box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
|
|
width: min(45ch, 100%);
|
|
border-radius: var(--rsp-border-radius-input);
|
|
z-index: 999;
|
|
margin: var(--rsp-spacing-s) !important; // this is only used to overwrite an inline style
|
|
|
|
.shepherd-arrow, .shepherd-arrow:before {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
z-index: -1
|
|
}
|
|
|
|
.shepherd-arrow:before {
|
|
content: "";
|
|
transform: rotate(45deg);
|
|
background: var(--rsp-black);
|
|
}
|
|
|
|
&[data-popper-placement^=top] > .shepherd-arrow {
|
|
bottom: -8px
|
|
}
|
|
|
|
&[data-popper-placement^=bottom] > .shepherd-arrow {
|
|
top: -8px
|
|
}
|
|
|
|
&[data-popper-placement^=left] > .shepherd-arrow {
|
|
right: -8px
|
|
}
|
|
|
|
&[data-popper-placement^=right] > .shepherd-arrow {
|
|
left: -8px
|
|
}
|
|
|
|
&.shepherd-centered > .shepherd-arrow {
|
|
opacity: 0
|
|
}
|
|
|
|
.shepherd-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 30px;
|
|
padding-inline: var(--rsp-spacing-s);
|
|
padding-block: var(--rsp-spacing-xs);
|
|
.shepherd-title {
|
|
margin: 0;
|
|
color: var(--rsp-white);
|
|
}
|
|
|
|
button.shepherd-cancel-icon {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
color: var(--rsp-grey-500);
|
|
font-size: 20px;
|
|
position: relative;
|
|
top: -2px;
|
|
|
|
&:hover {
|
|
color: var(--rsp-text-color-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.shepherd-text {
|
|
padding-inline: var(--rsp-spacing-s);
|
|
padding-block: var(--rsp-spacing-xxs);
|
|
|
|
p {
|
|
margin: 0;
|
|
margin-top: var(--rsp-spacing-xxs);
|
|
color: var(--rsp-white);
|
|
|
|
&:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shepherd-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
min-height: 30px;
|
|
gap: var(--rsp-spacing-xs);
|
|
padding-inline: var(--rsp-spacing-s);
|
|
padding-block: var(--rsp-spacing-xs);
|
|
}
|
|
}
|
|
.dashboard_page_burst .shepherd-modal-overlay-container{
|
|
display: none;
|
|
}
|
|
.shepherd-modal-overlay-container{
|
|
display: none;
|
|
}
|