_ecommerce.scss 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # Ecommerce stuff
  4. *
  5. * Styles for Ecommerce set of pages
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Check if component is enabled
  9. @if $enable-ecommerce {
  10. //
  11. // Elements
  12. //
  13. // Sidebar color selector
  14. .color-selector-active {
  15. position: relative;
  16. // Checkmark icon
  17. i {
  18. position: absolute;
  19. top: 50%;
  20. left: 50%;
  21. margin-top: -($icon-font-size / 2);
  22. margin-left: -($icon-font-size / 2);
  23. }
  24. }
  25. //
  26. // Pricing tables
  27. //
  28. // Price label
  29. .pricing-table-price {
  30. font-size: $pricing-title-font-size;
  31. // Currency sign
  32. > span {
  33. font-size: $pricing-subtitle-font-size;
  34. }
  35. }
  36. // Stacked list of features
  37. .pricing-table-list {
  38. li {
  39. padding-top: $pricing-list-item-padding-y;
  40. padding-bottom: $pricing-list-item-padding-y;
  41. border-bottom: $pricing-list-item-border-width solid $pricing-list-item-border-color;
  42. // Change border color in dark cards
  43. .card[class*=bg-]:not(.bg-transparent):not(.bg-white):not(.bg-light) & {
  44. border-bottom-color: rgba($white, 0.2);
  45. }
  46. }
  47. }
  48. //
  49. // Ribbons
  50. //
  51. // Container
  52. .ribbon-container {
  53. width: 6.5rem;
  54. height: 6.625rem;
  55. overflow: hidden;
  56. position: absolute;
  57. top: -($card-border-width);
  58. right: -($card-border-width);
  59. }
  60. // Corner ribbon
  61. .ribbon {
  62. text-align: center;
  63. font-size: $font-size-sm;
  64. line-height: $line-height-sm;
  65. font-weight: $font-weight-semibold;
  66. text-transform: uppercase;
  67. position: relative;
  68. padding: 0.3125rem 0;
  69. left: -0.6875rem;
  70. top: 1.563rem;
  71. width: 9.375rem;
  72. z-index: 10;
  73. transform: rotate(45deg);
  74. @include box-shadow($pricing-ribbon-box-shadow);
  75. }
  76. }