action-sheet.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. :host {
  2. z-index: 1000;
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. height: 100%;
  8. display: flex;
  9. contain: strict;
  10. user-select: none;
  11. font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
  12. }
  13. .wrapper {
  14. flex: 1;
  15. display: flex;
  16. align-items: center;
  17. justify-content: center;
  18. background-color: rgba(0, 0, 0, 0);
  19. transition: 400ms background-color cubic-bezier(.36,.66,.04,1);
  20. }
  21. .wrapper.open {
  22. background-color: rgba(0, 0, 0, 0.32);
  23. }
  24. .title {
  25. color: #999;
  26. height: 23px;
  27. line-height: 23px;
  28. padding-bottom: 17px;
  29. padding-inline-end: 16px;
  30. padding-inline-start: 16px;
  31. padding-left: 16px;
  32. padding-right: 16px;
  33. padding-top: 20px;
  34. }
  35. .content {
  36. width: 568px;
  37. align-self: flex-end;
  38. background-color:#fff;
  39. transition: 400ms transform cubic-bezier(.36,.66,.04,1);
  40. transform: translateY(100%);
  41. }
  42. .wrapper.open .content {
  43. transform: translateY(0%);
  44. }
  45. @media only screen and (max-width: 568px) {
  46. .content {
  47. width: 100%;
  48. }
  49. }
  50. .action-sheet-option {
  51. cursor: pointer;
  52. height: 52px;
  53. line-height: 52px;
  54. }
  55. .action-sheet-button {
  56. color: rgb(38, 38, 38);
  57. font-size: 16px;
  58. padding-inline-end: 16px;
  59. padding-inline-start: 16px;
  60. padding-left: 16px;
  61. padding-right: 16px;
  62. padding-top: 0px;
  63. }
  64. .action-sheet-button:hover {
  65. background-color: #F6F6F6;
  66. }