inline-form.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /**
  2. * @file
  3. * Visual styles for inline forms.
  4. */
  5. .form--inline {
  6. display: flex;
  7. flex-wrap: wrap;
  8. width: 100%;
  9. }
  10. .form--inline [data-drupal-selector^="edit-items-"] {
  11. padding-left: 1rem;
  12. padding-right: 1rem;
  13. }
  14. .form--inline .form-item {
  15. float: left; /* LTR */
  16. margin-right: 0; /* LTR */
  17. }
  18. [dir="rtl"] .form--inline .form-item {
  19. float: right;
  20. margin-right: 0;
  21. margin-left: 0;
  22. }
  23. /* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */
  24. [dir="rtl"] .views-filterable-options-controls .form-item {
  25. margin-right: 2%;
  26. }
  27. .form--inline .form-item-separator {
  28. margin-top: 2.3em;
  29. margin-right: 1em; /* LTR */
  30. margin-left: 0.5em; /* LTR */
  31. }
  32. [dir="rtl"] .form--inline .form-item-separator {
  33. margin-right: 0.5em;
  34. margin-left: 1em;
  35. }
  36. .form--inline .form-actions {
  37. display: inline-flex;
  38. margin-top: 0;
  39. margin-bottom: 20px;
  40. align-self: flex-start;
  41. flex-direction: column;
  42. width: 100%;
  43. }
  44. .form--inline .form-actions .button {
  45. margin-top: 20px;
  46. margin-left: 0;
  47. width: 100%;
  48. }
  49. .form--inline .form-item-separator {
  50. margin: 0 0 20px 0;
  51. }
  52. @media screen and (min-width: 640px) {
  53. .form--inline .form-item {
  54. margin-right: 20px; /* LTR */
  55. }
  56. .form--inline .form-item:last-child {
  57. margin-right: 0;
  58. }
  59. [dir="rtl"] .form--inline .form-item {
  60. margin-right: 0;
  61. margin-left: 20px;
  62. }
  63. [dir="rtl"] .form--inline .form-item:last-child {
  64. margin-left: 0;
  65. }
  66. .form--inline .form-actions {
  67. margin-top: 30px;
  68. margin-bottom: 0;
  69. flex-direction: row;
  70. width: auto;
  71. }
  72. .form--inline .form-actions .button {
  73. margin-top: 0;
  74. width: 100%;
  75. }
  76. .form--inline .form-actions .button:first-child {
  77. margin-left: 0;
  78. }
  79. }