style.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. #loginForm {
  2. fieldset {
  3. position: relative;
  4. border: 1px solid var(--border-strong);
  5. border-radius: 3px;
  6. padding: 20px 26px;
  7. align-content: center;
  8. min-width: 0;
  9. > legend {
  10. position: absolute;
  11. top: -0.625rem;
  12. left: 1.25rem;
  13. padding: 0 5px;
  14. background: var(--bg-page);
  15. font-size: 1rem;
  16. font-weight: bold;
  17. }
  18. // 로그인 창
  19. > form {
  20. input,
  21. button {
  22. width: 100%;
  23. }
  24. label {
  25. cursor: pointer;
  26. margin-bottom: 7px;
  27. &:last-child {
  28. margin-bottom: 0;
  29. }
  30. }
  31. input[type="email"],
  32. input[type="password"] {
  33. &:nth-of-type(1) {
  34. margin-bottom: 15px;
  35. }
  36. &:nth-of-type(2) {
  37. letter-spacing: 1px;
  38. margin-bottom: 10px;
  39. }
  40. }
  41. }
  42. // 우측 안내문구
  43. dl {
  44. dt {
  45. font-weight: bold;
  46. padding-bottom: 8px;
  47. }
  48. dd {
  49. font-size: 0.938rem;
  50. a {
  51. display: block;
  52. padding: 0.438rem 0;
  53. color: var(--text-link);
  54. text-decoration: none;
  55. &:hover {
  56. text-decoration: underline;
  57. color: var(--text-link-hover);
  58. }
  59. small {
  60. vertical-align: text-top;
  61. }
  62. }
  63. }
  64. &:last-child {
  65. dd > a {
  66. padding-bottom: 0;
  67. }
  68. }
  69. }
  70. hr {
  71. margin: 0.938rem 0;
  72. }
  73. }
  74. }
  75. @media (max-width: 420px) {
  76. #loginForm {
  77. fieldset {
  78. padding: 1rem 0 0 0;
  79. border: none;
  80. > legend {
  81. position: initial;
  82. padding: initial;
  83. font-size: 1rem;
  84. font-weight: bold;
  85. }
  86. > form {
  87. padding: 0;
  88. }
  89. > hr {
  90. display: block;
  91. }
  92. }
  93. }
  94. }
  95. @media (max-width: 768px) {
  96. #loginForm {
  97. fieldset {
  98. width: 100%;
  99. > form {
  100. padding: 1rem 0 0 0;
  101. }
  102. }
  103. }
  104. }