Sin descripción
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

shepherd.scss 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. @import "../../scss/_bootstrap-extended/include";
  2. @charset "UTF-8";
  3. @import "shepherd.js/dist/css/shepherd.css";
  4. $shepherd-header-content-padding-x: 1.25rem !default;
  5. $shepherd-header-content-padding-y: 1.25rem !default;
  6. $shepherd-btn-padding-x: $btn-padding-x-sm !default;
  7. $shepherd-btn-padding-y: $btn-padding-y-sm !default;
  8. $shepherd-container-width: 15rem !default;
  9. .shepherd-element {
  10. padding: 0;
  11. border-width: 0;
  12. background: var(--#{$prefix}paper-bg);
  13. inset-inline-start: auto;
  14. @include border-radius(var(--#{$prefix}border-radius));
  15. @include media-breakpoint-down(sm) {
  16. max-inline-size: 300px;
  17. }
  18. .shepherd-arrow::before {
  19. border-color: var(--#{$prefix}paper-bg) !important;
  20. background: var(--#{$prefix}paper-bg);
  21. border-block-end: 1px solid;
  22. border-inline-end: 1px solid;
  23. }
  24. .shepherd-title,
  25. .shepherd-cancel-icon {
  26. color: var(--#{$prefix}heading-color);
  27. }
  28. .shepherd-content {
  29. min-inline-size: $shepherd-container-width;
  30. .shepherd-header {
  31. background-color: var(--#{$prefix}paper-bg);
  32. padding-block: $shepherd-header-content-padding-y 0;
  33. padding-inline: $shepherd-header-content-padding-x;
  34. .shepherd-title {
  35. font-size: $h5-font-size;
  36. font-weight: $font-weight-medium;
  37. }
  38. .shepherd-cancel-icon {
  39. color: var(--#{$prefix}secondary-color);
  40. font-size: 1.85rem;
  41. }
  42. }
  43. .shepherd-text {
  44. color: var(--#{$prefix}body-color);
  45. font-size: $font-size-base;
  46. padding-block: 1rem !important;
  47. padding-inline: $shepherd-header-content-padding-x !important;
  48. }
  49. .shepherd-footer {
  50. .shepherd-button {
  51. @include border-radius(var(--#{$prefix}border-radius-sm));
  52. border: 1px solid var(--#{$prefix}btn-bg);
  53. background: var(--#{$prefix}btn-bg);
  54. color: var(--#{$prefix}btn-color);
  55. padding-block: $shepherd-btn-padding-y;
  56. padding-inline: $shepherd-btn-padding-x;
  57. &:hover {
  58. background: var(--#{$prefix}btn-hover-bg);
  59. color: var(--#{$prefix}btn-hover-color);
  60. }
  61. &:not(:last-child) {
  62. margin-inline: 0 .75rem;
  63. }
  64. }
  65. padding-block: 0 $shepherd-header-content-padding-y !important;
  66. padding-inline: $shepherd-header-content-padding-x !important;
  67. }
  68. }
  69. /* Ask before submit */
  70. &[data-popper-placement="bottom"] {
  71. margin-block-start: .8rem !important;
  72. .shepherd-arrow::before {
  73. border-color: var(--#{$prefix}paper-bg) !important;
  74. background-color: var(--#{$prefix}paper-bg) !important;
  75. }
  76. }
  77. &[data-popper-placement="top"] {
  78. margin-block-start: -.8rem;
  79. }
  80. &[data-popper-placement="left"] {
  81. margin-inline-start: -.8rem;
  82. .shepherd-arrow::before {
  83. border-block-end: 0;
  84. border-block-start: 1px solid;
  85. }
  86. }
  87. &[data-popper-placement="right"] {
  88. margin-inline-start: .8rem;
  89. .shepherd-arrow::before {
  90. border-inline-end: 0;
  91. border-inline-start: 1px solid;
  92. }
  93. }
  94. }
  95. /* RTL */
  96. :dir(rtl) {
  97. .shepherd-element {
  98. &[data-popper-placement="left"] {
  99. margin-inline-end: -.8rem;
  100. }
  101. &[data-popper-placement="right"] {
  102. margin-inline-end: .8rem;
  103. }
  104. }
  105. }