338 lines
7.3 KiB
SCSS
338 lines
7.3 KiB
SCSS
@charset "UTF-8";
|
||
|
||
$shepherd-container-width: 400px !default;
|
||
$shepherd-content-padding-x: 1.25rem !default;
|
||
$shepherd-content-padding-y: 1.25rem !default;
|
||
$shepherd-header-padding-x: 1.25rem !default;
|
||
$shepherd-header-padding-y: 1rem !default;
|
||
|
||
#shepherdModalOverlayContainer {
|
||
height: 100vh;
|
||
left: 0;
|
||
position: fixed;
|
||
top: 0;
|
||
transition: all .3s ease-out;
|
||
width: 100vw;
|
||
|
||
#shepherdModalMask,
|
||
#shepherdModalMaskRect {
|
||
height: 100vh;
|
||
width: 100vw;
|
||
}
|
||
}
|
||
|
||
.shepherd-modal.shepherd-enabled {
|
||
position: relative;
|
||
}
|
||
|
||
.shepherd-active.shepherd-modal-is-visible {
|
||
:not(.shepherd-target) {
|
||
pointer-events: none
|
||
}
|
||
|
||
.shepherd-button,
|
||
.shepherd-button *,
|
||
.shepherd-cancel-link,
|
||
.shepherd-cancel-link *,
|
||
.shepherd-element,
|
||
.shepherd-element *,
|
||
.shepherd-target,
|
||
.shepherd-target * {
|
||
pointer-events: auto
|
||
}
|
||
|
||
.shepherd-button,
|
||
.shepherd-cancel-link {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.tippy-popper .tippy-arrow {
|
||
border: 0 solid transparent;
|
||
content: "";
|
||
display: block;
|
||
height: 0;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
width: 0
|
||
}
|
||
|
||
.tippy-popper .tippy-tooltip {
|
||
background-color: transparent;
|
||
max-height: 100%;
|
||
max-width: 100%;
|
||
padding: 0;
|
||
width: $shepherd-container-width;
|
||
color: inherit;
|
||
border-radius: 0;
|
||
text-align: left;
|
||
|
||
[dir=rtl] & {
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.shepherd-element .shepherd-content header {
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.shepherd-cancel-link,
|
||
.shepherd-title {
|
||
margin: 0;
|
||
position: relative;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.shepherd-cancel-link {
|
||
margin-left: auto;
|
||
text-decoration: none;
|
||
transition: color .5s ease;
|
||
line-height: 1;
|
||
}
|
||
|
||
.shepherd-title {
|
||
display: flex;
|
||
flex: 1 0 auto;
|
||
}
|
||
}
|
||
|
||
.shepherd-element .shepherd-content footer .shepherd-buttons {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
text-align: right;
|
||
|
||
li {
|
||
display: inline;
|
||
margin: 0 .5rem 0 0;
|
||
}
|
||
|
||
li:last-child {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
[dir=rtl] & {
|
||
text-align: left;
|
||
|
||
li {
|
||
margin-right: 0;
|
||
margin-left: .5rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shepherd-element .shepherd-content .shepherd-text p {
|
||
margin-bottom: 0.75rem;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
|
||
.default-style {
|
||
@import "../../css/_appwork/include";
|
||
|
||
$arrow-width: $popover-arrow-width + px-to-rem(2px);
|
||
$arrow-height: $popover-arrow-height + px-to-rem(1px);
|
||
|
||
#shepherdModalOverlayContainer {
|
||
fill: $modal-backdrop-bg;
|
||
opacity: $modal-backdrop-opacity;
|
||
z-index: $zindex-notification !important;
|
||
}
|
||
|
||
.shepherd-modal.shepherd-enabled {
|
||
z-index: $zindex-notification + 1 !important;
|
||
}
|
||
|
||
.tippy-popper {
|
||
z-index: $zindex-notification + 2 !important;
|
||
|
||
.tippy-popper .tippy-tooltip {
|
||
line-height: $line-height-base;
|
||
}
|
||
|
||
&[x-placement^=top] {
|
||
margin-bottom: $arrow-height;
|
||
|
||
.tippy-arrow {
|
||
border-width: $arrow-height ($arrow-width / 2) 0;
|
||
border-top-color: $modal-content-bg;
|
||
left: calc(50% - #{$arrow-width / 2});
|
||
}
|
||
}
|
||
|
||
&[x-placement^=bottom] {
|
||
margin-top: $arrow-height;
|
||
|
||
.tippy-arrow {
|
||
border-width: 0 ($arrow-width / 2) $arrow-height ($arrow-width / 2);
|
||
border-bottom-color: $modal-content-bg;
|
||
left: calc(50% - #{$arrow-width / 2});
|
||
}
|
||
}
|
||
|
||
&[x-placement^=left] {
|
||
margin-right: $arrow-height;
|
||
|
||
.tippy-arrow {
|
||
border-width: ($arrow-width / 2) 0 ($arrow-width / 2) $arrow-height;
|
||
border-left-color: $modal-content-bg;
|
||
top: calc(50% - #{$arrow-width / 2});
|
||
}
|
||
}
|
||
|
||
&[x-placement^=right] {
|
||
margin-left: $arrow-height;
|
||
|
||
.tippy-arrow {
|
||
border-width: ($arrow-width / 2) $arrow-height ($arrow-width / 2) 0;
|
||
border-right-color: $modal-content-bg;
|
||
top: calc(50% - #{$arrow-width / 2});
|
||
}
|
||
}
|
||
}
|
||
|
||
.shepherd-element {
|
||
box-shadow: $modal-content-box-shadow-sm-up;
|
||
background: $modal-content-bg;
|
||
border-radius: $border-radius;
|
||
}
|
||
|
||
.shepherd-element .shepherd-content header {
|
||
padding: $shepherd-header-padding-y $shepherd-header-padding-x 0 $shepherd-header-padding-x;
|
||
|
||
.shepherd-title {
|
||
font-size: $h5-font-size;
|
||
font-weight: $font-weight-semibold;
|
||
}
|
||
|
||
.shepherd-cancel-link {
|
||
color: $close-color;
|
||
font-size: $close-font-size;
|
||
font-weight: $close-font-weight;
|
||
opacity: .5;
|
||
|
||
&:before {
|
||
content: '×';
|
||
}
|
||
|
||
&:hover {
|
||
opacity: .75;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shepherd-element .shepherd-content .shepherd-text {
|
||
padding: $shepherd-content-padding-y $shepherd-content-padding-x;
|
||
}
|
||
|
||
.shepherd-element .shepherd-content .shepherd-footer {
|
||
padding: 0 $shepherd-header-padding-x $shepherd-header-padding-y $shepherd-header-padding-x;
|
||
}
|
||
}
|
||
|
||
.material-style {
|
||
@import "../../css/_appwork/include-material";
|
||
|
||
$arrow-width: $popover-arrow-width + px-to-rem(2px);
|
||
$arrow-height: $popover-arrow-height + px-to-rem(1px);
|
||
|
||
#shepherdModalOverlayContainer {
|
||
fill: $modal-backdrop-bg;
|
||
opacity: $modal-backdrop-opacity;
|
||
z-index: $zindex-notification !important;
|
||
}
|
||
|
||
.shepherd-modal.shepherd-enabled {
|
||
z-index: $zindex-notification + 1 !important;
|
||
}
|
||
|
||
.tippy-popper {
|
||
z-index: $zindex-notification + 2 !important;
|
||
|
||
.tippy-popper .tippy-tooltip {
|
||
line-height: $line-height-base;
|
||
}
|
||
|
||
&[x-placement^=top] {
|
||
margin-bottom: $arrow-height;
|
||
|
||
.tippy-arrow {
|
||
border-width: $arrow-height ($arrow-width / 2) 0;
|
||
border-top-color: $modal-content-bg;
|
||
left: calc(50% - #{$arrow-width / 2});
|
||
}
|
||
}
|
||
|
||
&[x-placement^=bottom] {
|
||
margin-top: $arrow-height;
|
||
|
||
.tippy-arrow {
|
||
border-width: 0 ($arrow-width / 2) $arrow-height ($arrow-width / 2);
|
||
border-bottom-color: $modal-content-bg;
|
||
left: calc(50% - #{$arrow-width / 2});
|
||
}
|
||
}
|
||
|
||
&[x-placement^=left] {
|
||
margin-right: $arrow-height;
|
||
|
||
.tippy-arrow {
|
||
border-width: ($arrow-width / 2) 0 ($arrow-width / 2) $arrow-height;
|
||
border-left-color: $modal-content-bg;
|
||
top: calc(50% - #{$arrow-width / 2});
|
||
}
|
||
}
|
||
|
||
&[x-placement^=right] {
|
||
margin-left: $arrow-height;
|
||
|
||
.tippy-arrow {
|
||
border-width: ($arrow-width / 2) $arrow-height ($arrow-width / 2) 0;
|
||
border-right-color: $modal-content-bg;
|
||
top: calc(50% - #{$arrow-width / 2});
|
||
}
|
||
}
|
||
}
|
||
|
||
.shepherd-element {
|
||
box-shadow: $modal-content-box-shadow-sm-up;
|
||
background: $modal-content-bg;
|
||
border-radius: $border-radius;
|
||
}
|
||
|
||
.shepherd-element .shepherd-content header {
|
||
padding: $shepherd-header-padding-y $shepherd-header-padding-x 0 $shepherd-header-padding-x;
|
||
|
||
.shepherd-title {
|
||
font-size: $h5-font-size;
|
||
font-weight: $font-weight-semibold;
|
||
}
|
||
|
||
.shepherd-cancel-link {
|
||
color: $close-color;
|
||
font-size: $close-font-size;
|
||
font-weight: $close-font-weight;
|
||
opacity: .5;
|
||
|
||
&:before {
|
||
content: '×';
|
||
}
|
||
|
||
&:hover {
|
||
opacity: .75;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shepherd-element .shepherd-content .shepherd-text {
|
||
padding: $shepherd-content-padding-y $shepherd-content-padding-x;
|
||
}
|
||
|
||
.shepherd-element .shepherd-content .shepherd-footer {
|
||
padding: 0 $shepherd-header-padding-x $shepherd-header-padding-y $shepherd-header-padding-x;
|
||
}
|
||
}
|