style.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. #latest {
  2. position: relative;
  3. padding: 25px 32px 32px 32px;
  4. min-width: 270px;
  5. max-width: 1920px;
  6. margin: 0 auto;
  7. h1 {
  8. font-size: 22px;
  9. margin-bottom: 20px;
  10. }
  11. // 검색 조건
  12. .list-header, .list-footer {
  13. select, input[type="search"], input[type="radio"] {
  14. height: 34px;
  15. }
  16. input[type="radio"] {
  17. position: absolute;
  18. opacity: 0;
  19. pointer-events: none;
  20. }
  21. a, button {
  22. line-height: 34px;
  23. padding: 0 15px;
  24. }
  25. }
  26. // 상단 제어 버튼
  27. .list-header {
  28. display: grid;
  29. grid-template-columns: 1fr auto auto;
  30. gap: 7px;
  31. align-items: end;
  32. section:first-child {
  33. flex: 1 1 auto;
  34. min-width: 0;
  35. }
  36. }
  37. // 하단 제어 버튼
  38. .list-footer {
  39. display: grid;
  40. grid-template-columns: 1fr auto;
  41. .search-toggle {
  42. display: none;
  43. }
  44. > section[aria-label='게시글 검색'] > form {
  45. display: flex;
  46. align-items: center;
  47. gap: 7px;
  48. }
  49. }
  50. @media (max-width: 576px) {
  51. .list-footer {
  52. grid-template-columns: auto 1fr;
  53. align-items: center;
  54. .search-toggle {
  55. grid-column: 1;
  56. display: inline-flex;
  57. align-items: center;
  58. justify-content: center;
  59. height: 100%;
  60. }
  61. > section[aria-label='게시글 검색'] {
  62. visibility: hidden;
  63. }
  64. }
  65. }
  66. @media (max-width: 768px) {
  67. .list-footer {
  68. > section[aria-label='게시글 검색'] {
  69. form {
  70. padding-right: 7px;
  71. select {
  72. flex-grow: 0;
  73. }
  74. input {
  75. flex-grow: 1;
  76. }
  77. }
  78. }
  79. }
  80. }
  81. }