forms.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. //
  2. // Forms
  3. // --------------------------------------------------
  4. // Add custom variables for extra customizability
  5. .panel-form {
  6. background: @panel-form-bg;
  7. border: none;
  8. .panel-variant(@panel-form-border; @panel-form-heading-color; @panel-form-heading-bg; @panel-form-heading-border);
  9. .panel-heading {
  10. padding: @panel-form-heading-padding;
  11. }
  12. .panel-body {
  13. padding: @panel-form-body-padding;
  14. }
  15. .panel-footer {
  16. background: @panel-form-footer-bg;
  17. border-top-color: @panel-form-footer-border;
  18. }
  19. }
  20. // Panel well
  21. .panel-form {
  22. .panel-body {
  23. .well {
  24. background: @panel-form-well-bg;
  25. border: 1px solid @panel-form-well-border;
  26. .box-shadow(none);
  27. .well-label {
  28. color: @panel-form-well-label;
  29. }
  30. }
  31. }
  32. }
  33. // Footer extra
  34. .footer-extra {
  35. margin-top: @line-height-computed;
  36. }
  37. // Help-block
  38. .form-group {
  39. .help-block {
  40. margin-bottom: 0px;
  41. padding: 0px;
  42. font-size: @font-size-small;
  43. &.errors {
  44. font-weight: bold;
  45. p {
  46. margin-bottom: @font-size-small / 2;
  47. padding: 0px;
  48. }
  49. &:last-child {
  50. margin-bottom: 0px;
  51. };
  52. }
  53. }
  54. }
  55. // Loading/error states
  56. .panel-form {
  57. .panel-loader {
  58. .loader {
  59. &:before {
  60. background: @panel-form-bg;
  61. }
  62. &:after {
  63. background: @panel-form-bg;
  64. }
  65. }
  66. }
  67. .panel-error {
  68. padding: @line-height-computed 0px;
  69. text-align: center;
  70. .error-icon {
  71. padding-bottom: @line-height-computed;
  72. .material-icons {
  73. font-size: @font-size-large * 4;
  74. }
  75. }
  76. .error-message {
  77. font-size: @font-size-large;
  78. p {
  79. margin-bottom: 0px;
  80. }
  81. }
  82. }
  83. }
  84. // Fieldset
  85. fieldset {
  86. legend {
  87. font-size: @font-size-base;
  88. }
  89. }
  90. // Inputs well, useful if there's one input + button
  91. .well-form {
  92. background: @panel-form-bg;
  93. border-color: @panel-form-border;
  94. .box-shadow(none);
  95. form {
  96. margin: 0px;
  97. padding: 0px;
  98. }
  99. }