inline-form.css 1.6 KB

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