newRecipe.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. #addRecipe{
  2. display: flex;
  3. flex-direction: column;
  4. justify-content: space-between;
  5. align-items: center;
  6. width: 100%;
  7. height: 100%;
  8. }
  9. #addRecipe .choosable{
  10. display: flex;
  11. justify-content: left;
  12. background: rgb(240, 252, 255);
  13. color: black;
  14. }
  15. #newRecipeContent{
  16. display: flex;
  17. flex-grow: 10;
  18. width: 100%;
  19. max-height: 85%;
  20. padding: 10px;
  21. }
  22. #recipeChoices{
  23. width: 40%;
  24. border-right: 1px solid rgb(255, 99, 107);
  25. height: 100%;
  26. overflow-y: auto;
  27. padding: 10px;
  28. box-sizing: border-box;
  29. }
  30. #newRecipeData{
  31. display: flex;
  32. flex-direction: column;
  33. justify-content: space-between;
  34. align-items: center;
  35. height: 100%;
  36. width: 60%;
  37. padding: 10px;
  38. box-sizing: border-box;
  39. }
  40. #newRecipeDataInputs{
  41. display: flex;
  42. flex-direction: column;
  43. align-items: center;
  44. }
  45. #newRecipeDataInputs > *{
  46. margin: 5px 0;
  47. }
  48. #newRecipeChosenList{
  49. height: 75%;
  50. box-sizing: border-box;
  51. overflow-y: auto;
  52. }
  53. .newRecipeChosenIngredient{
  54. width: 95%;
  55. margin: 15px auto;
  56. }
  57. .newRecipeChosenIngredient div{
  58. display: flex;
  59. justify-content: space-between;
  60. align-items: center;
  61. }
  62. .newRecipeChosenIngredient button{
  63. padding: 0;
  64. margin: 0 5px;
  65. max-height: none;
  66. min-width: none;
  67. }
  68. .newRecipeChosenIngredient input{
  69. width: 100%;
  70. }