mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2025-01-02 13:28:43 +00:00
add shepherd styles for guided tour
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.
This commit is contained in:
parent
b6cd64f82a
commit
cfa659748c
3 changed files with 42 additions and 0 deletions
|
@ -94,3 +94,4 @@ $family-secondary: $family-sans-serif;
|
|||
|
||||
@import "../bookwyrm.scss";
|
||||
@import "../vendor/icons.css";
|
||||
@import "../vendor/shepherd.scss";
|
||||
|
|
|
@ -67,3 +67,4 @@ $family-secondary: $family-sans-serif;
|
|||
|
||||
@import "../bookwyrm.scss";
|
||||
@import "../vendor/icons.css";
|
||||
@import "../vendor/shepherd.scss";
|
||||
|
|
40
bookwyrm/static/css/vendor/shepherd.scss
vendored
Normal file
40
bookwyrm/static/css/vendor/shepherd.scss
vendored
Normal file
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
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}
|
Loading…
Reference in a new issue