Advertisement
OpataJoshua

Untitled

Aug 4th, 2022
1,338
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.98 KB | None | 0 0
  1. body{
  2.   margin: 0px;
  3. }
  4.  
  5. #app{
  6.   width: 100vw;
  7.   height: 100vh;
  8.  
  9.   display: flex;
  10.   flex-direction: column;
  11.   align-items: center;
  12.   background: #f3f5f7;
  13. }
  14.  
  15. .top-form, .list-card{
  16.   background: white;
  17.   width: 500px;
  18.   max-width: 90%;
  19.   padding: 10px 10px;
  20. }
  21.  
  22. .top-form{
  23.   margin-top: 80px;
  24.   display: flex;
  25. }
  26.  
  27. .auto-complete{
  28.   flex: 1;
  29.   margin-right: 20px;
  30. }
  31.  
  32. .auto-complete *{
  33.   width: 100%;
  34. }
  35.  
  36. .list-card{
  37.   margin-top: 20px;
  38. }
  39.  
  40. .list-card ul{
  41.   list-style: decimal;
  42. }
  43.  
  44. .list-card ul li:not(:first-child){
  45.   border-top: 1px solid rgb(211, 211, 211);
  46. }
  47.  
  48. .item-wrapper{
  49.   display: flex;
  50.   padding: 10px 5px;
  51. }
  52.  
  53. .item-text{
  54.   flex: 1;
  55. }
  56.  
  57. .remove-item{
  58.   border-radius: 50%;
  59.   border: none;
  60.   width: 25px;
  61.   height: 25px;
  62.   background: #f3d5d5;
  63.   color: red;
  64.   font-weight: bolder;
  65.   font-size: 20px;
  66. }
  67.  
  68. .remove-item:hover{
  69.   background: #efbfbf;
  70.   cursor: pointer;
  71. }
  72.  
  73. .no-item-message{
  74.   color: gray;
  75.   text-align: center;
  76. }
  77.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement