ui-lib.module.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. @import "../styles/animation.scss";
  2. .card {
  3. background-color: var(--white);
  4. border-radius: 10px;
  5. box-shadow: var(--card-shadow);
  6. padding: 10px;
  7. }
  8. .popover {
  9. position: relative;
  10. z-index: 2;
  11. }
  12. .popover-content {
  13. position: absolute;
  14. animation: slide-in 0.3s ease;
  15. right: 0;
  16. top: calc(100% + 10px);
  17. }
  18. .popover-mask {
  19. position: fixed;
  20. top: 0;
  21. left: 0;
  22. width: 100vw;
  23. height: 100vh;
  24. }
  25. .list-item {
  26. display: flex;
  27. justify-content: space-between;
  28. align-items: center;
  29. min-height: 40px;
  30. border-bottom: var(--border-in-light);
  31. padding: 10px 20px;
  32. animation: slide-in ease 0.6s;
  33. .list-header {
  34. display: flex;
  35. align-items: center;
  36. .list-icon {
  37. margin-right: 10px;
  38. }
  39. .list-item-title {
  40. font-size: 14px;
  41. font-weight: bolder;
  42. }
  43. .list-item-sub-title {
  44. font-size: 12px;
  45. font-weight: normal;
  46. }
  47. }
  48. }
  49. .list {
  50. border: var(--border-in-light);
  51. border-radius: 10px;
  52. box-shadow: var(--card-shadow);
  53. margin-bottom: 20px;
  54. animation: slide-in ease 0.3s;
  55. }
  56. .list .list-item:last-child {
  57. border: 0;
  58. }
  59. .modal-container {
  60. box-shadow: var(--card-shadow);
  61. background-color: var(--white);
  62. border-radius: 12px;
  63. width: 60vw;
  64. animation: slide-in ease 0.3s;
  65. --modal-padding: 20px;
  66. .modal-header {
  67. padding: var(--modal-padding);
  68. display: flex;
  69. align-items: center;
  70. justify-content: space-between;
  71. border-bottom: var(--border-in-light);
  72. .modal-title {
  73. font-weight: bolder;
  74. font-size: 16px;
  75. }
  76. .modal-close-btn {
  77. cursor: pointer;
  78. &:hover {
  79. filter: brightness(1.2);
  80. }
  81. }
  82. }
  83. .modal-content {
  84. max-height: 40vh;
  85. padding: var(--modal-padding);
  86. overflow: auto;
  87. }
  88. .modal-footer {
  89. padding: var(--modal-padding);
  90. display: flex;
  91. justify-content: flex-end;
  92. border-top: var(--border-in-light);
  93. box-shadow: var(--shadow);
  94. .modal-actions {
  95. display: flex;
  96. align-items: center;
  97. .modal-action {
  98. &:not(:last-child) {
  99. margin-right: 20px;
  100. }
  101. }
  102. }
  103. }
  104. }
  105. @media screen and (max-width: 600px) {
  106. .modal-container {
  107. width: 100vw;
  108. border-bottom-left-radius: 0;
  109. border-bottom-right-radius: 0;
  110. .modal-content {
  111. max-height: 50vh;
  112. }
  113. }
  114. }
  115. .show {
  116. opacity: 1;
  117. transition: all ease 0.3s;
  118. transform: translateY(0);
  119. position: fixed;
  120. left: 0;
  121. bottom: 0;
  122. animation: slide-in ease 0.6s;
  123. z-index: 99999;
  124. }
  125. .hide {
  126. opacity: 0;
  127. transition: all ease 0.3s;
  128. transform: translateY(20px);
  129. }
  130. .toast-container {
  131. position: fixed;
  132. bottom: 5vh;
  133. left: 0;
  134. width: 100vw;
  135. display: flex;
  136. justify-content: center;
  137. pointer-events: none;
  138. .toast-content {
  139. max-width: 80vw;
  140. word-break: break-all;
  141. font-size: 14px;
  142. background-color: var(--white);
  143. box-shadow: var(--card-shadow);
  144. border: var(--border-in-light);
  145. color: var(--black);
  146. padding: 10px 20px;
  147. border-radius: 50px;
  148. margin-bottom: 20px;
  149. display: flex;
  150. align-items: center;
  151. pointer-events: all;
  152. .toast-action {
  153. padding-left: 20px;
  154. color: var(--primary);
  155. opacity: 0.8;
  156. border: 0;
  157. background: none;
  158. cursor: pointer;
  159. font-family: inherit;
  160. &:hover {
  161. opacity: 1;
  162. }
  163. }
  164. }
  165. }
  166. .input {
  167. border: var(--border-in-light);
  168. border-radius: 10px;
  169. padding: 10px;
  170. font-family: inherit;
  171. background-color: var(--white);
  172. color: var(--black);
  173. resize: none;
  174. min-width: 50px;
  175. }
  176. .select-with-icon {
  177. position: relative;
  178. max-width: fit-content;
  179. .select-with-icon-select {
  180. height: 100%;
  181. border: var(--border-in-light);
  182. padding: 10px 25px 10px 10px;
  183. border-radius: 10px;
  184. appearance: none;
  185. cursor: pointer;
  186. background-color: var(--white);
  187. color: var(--black);
  188. text-align: center;
  189. }
  190. .select-with-icon-icon {
  191. position: absolute;
  192. top: 50%;
  193. right: 10px;
  194. transform: translateY(-50%);
  195. pointer-events: none;
  196. }
  197. }