index.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. @import '../style/var';
  2. @import '../style/mixins/hairline';
  3. .van-share-sheet {
  4. &__header {
  5. padding: @share-sheet-header-padding;
  6. text-align: center;
  7. }
  8. &__title {
  9. margin-top: @padding-xs;
  10. color: @share-sheet-title-color;
  11. font-weight: normal;
  12. font-size: @share-sheet-title-font-size;
  13. line-height: @share-sheet-title-line-height;
  14. }
  15. &__description {
  16. display: block;
  17. margin-top: @padding-xs;
  18. color: @share-sheet-description-color;
  19. font-size: @share-sheet-description-font-size;
  20. line-height: @share-sheet-description-line-height;
  21. }
  22. &__options {
  23. position: relative;
  24. display: flex;
  25. padding: @padding-md 0 @padding-md @padding-xs;
  26. overflow-x: auto;
  27. overflow-y: visible;
  28. -webkit-overflow-scrolling: touch;
  29. &--border::before {
  30. .hairline-top(@cell-border-color, @padding-md);
  31. }
  32. &::-webkit-scrollbar {
  33. height: 0;
  34. }
  35. }
  36. &__option {
  37. display: flex;
  38. flex-direction: column;
  39. align-items: center;
  40. cursor: pointer;
  41. user-select: none;
  42. &:active {
  43. opacity: @active-opacity;
  44. }
  45. }
  46. &__icon {
  47. width: @share-sheet-icon-size;
  48. height: @share-sheet-icon-size;
  49. margin: 0 @padding-md;
  50. }
  51. &__name {
  52. margin-top: @padding-xs;
  53. padding: 0 @padding-base;
  54. color: @share-sheet-option-name-color;
  55. font-size: @share-sheet-option-name-font-size;
  56. }
  57. &__option-description {
  58. padding: 0 @padding-base;
  59. color: @share-sheet-option-description-color;
  60. font-size: @share-sheet-option-description-font-size;
  61. }
  62. &__cancel {
  63. display: block;
  64. width: 100%;
  65. padding: 0;
  66. font-size: @share-sheet-cancel-button-font-size;
  67. line-height: @share-sheet-cancel-button-height;
  68. text-align: center;
  69. background: @share-sheet-cancel-button-background;
  70. border: none;
  71. cursor: pointer;
  72. &::before {
  73. display: block;
  74. height: @padding-xs;
  75. background-color: @background-color;
  76. content: ' ';
  77. }
  78. &:active {
  79. background-color: @active-color;
  80. }
  81. }
  82. }