forms-rtl.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. //
  2. // RTL Forms
  3. // --------------------------------------------------
  4. .radio,
  5. .checkbox {
  6. label {
  7. padding-right: 20px;
  8. padding-left: initial;
  9. }
  10. }
  11. .radio input[type="radio"],
  12. .radio-inline input[type="radio"],
  13. .checkbox input[type="checkbox"],
  14. .checkbox-inline input[type="checkbox"] {
  15. margin-right: -20px;
  16. margin-left: auto;
  17. }
  18. // Radios and checkboxes on same line
  19. .radio-inline,
  20. .checkbox-inline {
  21. padding-right: 20px;
  22. padding-left: 0;
  23. }
  24. .radio-inline + .radio-inline,
  25. .checkbox-inline + .checkbox-inline {
  26. margin-right: 10px; // space out consecutive inline controls
  27. margin-left: 0;
  28. }
  29. .has-feedback {
  30. // Ensure icons don't overlap text
  31. .form-control {
  32. padding-left: (@input-height-base * 1.25);
  33. padding-right: 12px;
  34. }
  35. }
  36. // Feedback icon (requires .glyphicon classes)
  37. .form-control-feedback {
  38. left: 0;
  39. right: auto;
  40. }
  41. // Inline forms
  42. //
  43. // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
  44. // forms begin stacked on extra small (mobile) devices and then go inline when
  45. // viewports reach <768px.
  46. //
  47. // Requires wrapping inputs and labels with `.form-group` for proper display of
  48. // default HTML form controls and our custom form controls (e.g., input groups).
  49. //
  50. // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
  51. .form-inline {
  52. // Kick in the inline
  53. @media (min-width: @screen-sm-min) {
  54. label {
  55. padding-right: 0;
  56. padding-left: initial;
  57. }
  58. .radio input[type="radio"],
  59. .checkbox input[type="checkbox"] {
  60. margin-right: 0;
  61. margin-left: auto;
  62. }
  63. }
  64. }
  65. // Horizontal forms
  66. //
  67. // Horizontal forms are built on grid classes and allow you to create forms with
  68. // labels on the left and inputs on the right.
  69. .form-horizontal {
  70. // Reset spacing and right align labels, but scope to media queries so that
  71. // labels on narrow viewports stack the same as a default form example.
  72. @media (min-width: @screen-sm-min) {
  73. .control-label {
  74. text-align: left;
  75. }
  76. }
  77. // Validation states
  78. //
  79. // Reposition the icon because it's now within a grid column and columns have
  80. // `position: relative;` on them. Also accounts for the grid gutter padding.
  81. .has-feedback .form-control-feedback {
  82. left: (@grid-gutter-width / 2);
  83. right: auto;
  84. }
  85. }