mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-09-25 13:00:13 +00:00
cfa659748c
Adds a sass file based on the v10.0.0 Shepherd CSS. Original Shepherd styles are kept where appropriate, otherwise this is intended to inherit whatever styles are being used through the Bulma and Bookwyrm SASS, so that it uses appropriate colours in both light and dark modes.
40 lines
2.7 KiB
SCSS
40 lines
2.7 KiB
SCSS
/*
|
|
Shepherd styles for guided tour.
|
|
Based on Shepherd v 10.0.0 styles.
|
|
*/
|
|
|
|
@import 'bulma/bulma.sass';
|
|
|
|
.shepherd-button {
|
|
@extend .button.mr-2;
|
|
}
|
|
|
|
.shepherd-button.shepherd-button-secondary {
|
|
@extend .button.is-light;
|
|
}
|
|
|
|
.shepherd-footer {
|
|
@extend .message-body;
|
|
@extend .is-primary.is-light;
|
|
border-color: $primary-light;
|
|
}
|
|
|
|
.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}
|
|
|
|
.shepherd-header {
|
|
@extend .message-header;
|
|
@extend .is-primary;
|
|
}
|
|
|
|
.shepherd-text {
|
|
@extend .message-body;
|
|
@extend .is-primary.is-light;
|
|
}
|
|
|
|
.shepherd-content {
|
|
@extend .message;
|
|
}
|
|
|
|
.shepherd-element{background:$primary-light;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:400px;opacity:0;outline:none;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:$primary-light;box-shadow:0 1px 4px rgba(0,0,0,.2);content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:$primary-light}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
|
|
|
|
.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}
|