123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- @import '../style/var';
- @import '../style/mixins/hairline';
- .van-share-sheet {
- &__header {
- padding: @share-sheet-header-padding;
- text-align: center;
- }
- &__title {
- margin-top: @padding-xs;
- color: @share-sheet-title-color;
- font-weight: normal;
- font-size: @share-sheet-title-font-size;
- line-height: @share-sheet-title-line-height;
- }
- &__description {
- display: block;
- margin-top: @padding-xs;
- color: @share-sheet-description-color;
- font-size: @share-sheet-description-font-size;
- line-height: @share-sheet-description-line-height;
- }
- &__options {
- position: relative;
- display: flex;
- padding: @padding-md 0 @padding-md @padding-xs;
- overflow-x: auto;
- overflow-y: visible;
- -webkit-overflow-scrolling: touch;
- &--border::before {
- .hairline-top(@cell-border-color, @padding-md);
- }
- &::-webkit-scrollbar {
- height: 0;
- }
- }
- &__option {
- display: flex;
- flex-direction: column;
- align-items: center;
- cursor: pointer;
- user-select: none;
- &:active {
- opacity: @active-opacity;
- }
- }
- &__icon {
- width: @share-sheet-icon-size;
- height: @share-sheet-icon-size;
- margin: 0 @padding-md;
- }
- &__name {
- margin-top: @padding-xs;
- padding: 0 @padding-base;
- color: @share-sheet-option-name-color;
- font-size: @share-sheet-option-name-font-size;
- }
- &__option-description {
- padding: 0 @padding-base;
- color: @share-sheet-option-description-color;
- font-size: @share-sheet-option-description-font-size;
- }
- &__cancel {
- display: block;
- width: 100%;
- padding: 0;
- font-size: @share-sheet-cancel-button-font-size;
- line-height: @share-sheet-cancel-button-height;
- text-align: center;
- background: @share-sheet-cancel-button-background;
- border: none;
- cursor: pointer;
- &::before {
- display: block;
- height: @padding-xs;
- background-color: @background-color;
- content: ' ';
- }
- &:active {
- background-color: @active-color;
- }
- }
- }
|