_gf-form.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. $gf-form-margin: 4px;
  2. .gf-form {
  3. margin-top: $gf-form-margin;
  4. margin-right: $gf-form-margin;
  5. display: flex;
  6. flex-direction: row;
  7. align-items: center;
  8. .checkbox-label {
  9. display: inline;
  10. cursor: pointer;
  11. padding: 8px 7px 8px 4px;
  12. }
  13. .cr1 {
  14. margin-left: 8px;
  15. }
  16. }
  17. .gf-form-group {
  18. h3, h2, h4 {
  19. margin-top: $spacer * 2;
  20. margin-bottom: $spacer * 1;
  21. }
  22. }
  23. .gf-form-inline {
  24. display: flex;
  25. flex-direction: row;
  26. flex-wrap: wrap;
  27. align-content: flex-start;
  28. .gf-form {
  29. flex-grow: 1;
  30. }
  31. }
  32. .gf-form-button-row {
  33. margin-top: 20px;
  34. margin-bottom: 10px;
  35. }
  36. .gf-form-label {
  37. padding: $input-padding-y $input-padding-x;
  38. line-height: $input-line-height;
  39. flex-shrink: 0;
  40. background-color: $input-label-bg;
  41. display: block;
  42. font-size: $font-size-sm;
  43. margin-right: $gf-form-margin;
  44. border: $input-btn-border-width solid transparent;
  45. }
  46. .gf-form-checkbox {
  47. flex-shrink: 0;
  48. }
  49. @each $size, $value in $form-sizes {
  50. .gf-size-#{$size} { width: $value; }
  51. .gf-size-max-#{$size} {
  52. max-width: $value;
  53. }
  54. }
  55. .gf-size-max { width: 100%; }
  56. .gf-size-auto { width: auto; }
  57. .gf-form-input {
  58. display: block;
  59. width: 100%;
  60. padding: $input-padding-y $input-padding-x;
  61. font-size: $font-size-base;
  62. line-height: $input-line-height;
  63. color: $input-color;
  64. background-color: $input-bg;
  65. background-image: none;
  66. background-clip: padding-box;
  67. border: $input-btn-border-width solid $input-border-color;
  68. @include border-radius($input-border-radius);
  69. @include box-shadow($input-box-shadow);
  70. transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  71. // Unstyle the caret on `<select>`s in IE10+.
  72. &::-ms-expand {
  73. background-color: transparent;
  74. border: 0;
  75. }
  76. // Customize the `:focus` state to imitate native WebKit styles.
  77. @include form-control-focus();
  78. // Placeholder
  79. &::placeholder {
  80. color: $input-color-placeholder;
  81. // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
  82. opacity: 1;
  83. }
  84. &:disabled,
  85. &[readonly] {
  86. background-color: $input-bg-disabled;
  87. // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
  88. opacity: 1;
  89. }
  90. &:disabled {
  91. cursor: $cursor-disabled;
  92. }
  93. &.gf-size-auto { width: auto; }
  94. }