container-inline.module.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. /**
  2. * @file
  3. * Inline items.
  4. */
  5. .container-inline {
  6. display: inline-flex;
  7. }
  8. .container-inline div,
  9. .container-inline label {
  10. display: flex;
  11. align-items: center;
  12. flex-direction: column;
  13. }
  14. .container-inline input {
  15. align-self: flex-start;
  16. }
  17. .container-inline legend {
  18. margin-bottom: 15px;
  19. }
  20. .container-inline label {
  21. margin-bottom: 0;
  22. }
  23. .container-inline .fieldset-legend {
  24. font-weight: 700;
  25. }
  26. .container-inline .form-item {
  27. margin-bottom: 0;
  28. }
  29. .container-inline .details-wrapper .form-item {
  30. margin-bottom: 20px;
  31. width: 100%;
  32. }
  33. .container-inline .details-wrapper .form-item:last-of-type {
  34. margin-bottom: 0;
  35. }
  36. .container-inline .fieldset-wrapper .form-item {
  37. margin-right: 0;
  38. margin-bottom: 20px;
  39. width: 100%;
  40. }
  41. .container-inline .fieldset-wrapper .form-item:last-child {
  42. margin-right: 0;
  43. margin-bottom: 0;
  44. }
  45. @media screen and (min-width: 640px) {
  46. .container-inline div,
  47. .container-inline label {
  48. flex-direction: row;
  49. align-items: flex-start;
  50. }
  51. .container-inline .fieldset-wrapper .form-item {
  52. margin-right: 20px;
  53. margin-bottom: 0;
  54. width: auto;
  55. }
  56. .container-inline .details-wrapper .form-item {
  57. margin-right: 20px;
  58. width: auto;
  59. }
  60. }