You are here

form-elements.css in Open Social 8.2

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
}

.control-label {
  font-size: 0.875rem;
}

.control-label__icon--bg {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;
}

.control-label__icon--svg {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  padding: 3px;
  fill: #4d4d4d;
}

.control-label--above {
  display: block;
  margin-bottom: 3px;
}

.form-group {
  margin-bottom: 1rem;
  position: relative;
}

.form-group .radio,
.form-group .checkbox {
  margin-bottom: 0;
}

.form-group-inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.form-group-inline .form-group {
  margin-bottom: 0;
}

.form-group-inline .form-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.form-group-inline .btn {
  margin-left: 8px;
  margin-bottom: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.form-group-inline--right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.form-group-inline--right .button--primary {
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}

.form-no-label label + .form-required {
  display: none;
}

span.form-required {
  margin: 0 3px;
}

.help-block {
  display: block;
  margin-top: 5px;
  font-size: 0.75rem;
  color: #464545;
}

.radio .help-block {
  padding-left: 25px;
  max-width: none;
  margin-top: 0;
}

.form-actions .btn {
  margin-bottom: 5px;
}

.views-exposed-form__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0;
}

.views-exposed-form__actions .btn-default {
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}

.views-exposed-form__actions .btn-flat {
  margin-left: 0;
}

.form--default .form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.form--default .form-actions .btn-group--primary,
.form--default .form-actions .btn-primary {
  margin-left: auto;
  margin-right: 0;
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}

.form-item--error-message {
  margin-top: 10px;
  position: relative;
  font-size: 0.75rem;
  display: inline-block;
  margin-bottom: 5px;
  padding-right: 2.25rem;
}

.form-item--error-message .close {
  float: none;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 16px;
  padding: 0.25rem 0.75rem;
}

.form-item--error-message::before {
  display: inline-block;
  content: '';
  position: absolute;
  left: 20px;
  top: -7px;
  border-bottom: 8px dashed;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.fieldset-wrapper .form-item--error-message {
  margin-top: 0;
}

.has-error .form-inline {
  margin-bottom: 0;
}

.field--label-inline .field--label {
  font-weight: 500;
  display: inline-block;
}

.field--label-inline .field--label:after {
  content: ':';
}

.field--label-inline .field--label + .field--item {
  display: inline-block;
}

.field--label-inline .field--label + .field--item a {
  font-weight: 300;
}

@media (min-width: 600px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
}

File

themes/socialbase/assets/css/form-elements.css
View source
  1. label {
  2. display: inline-block;
  3. max-width: 100%;
  4. margin-bottom: 5px;
  5. }
  6. .control-label {
  7. font-size: 0.875rem;
  8. }
  9. .control-label__icon--bg {
  10. display: inline-block;
  11. vertical-align: middle;
  12. width: 30px;
  13. height: 30px;
  14. background-repeat: no-repeat;
  15. background-position: 50% 50%;
  16. background-size: 24px 24px;
  17. }
  18. .control-label__icon--svg {
  19. display: inline-block;
  20. vertical-align: middle;
  21. width: 30px;
  22. height: 30px;
  23. padding: 3px;
  24. fill: #4d4d4d;
  25. }
  26. .control-label--above {
  27. display: block;
  28. margin-bottom: 3px;
  29. }
  30. .form-group {
  31. margin-bottom: 1rem;
  32. position: relative;
  33. }
  34. .form-group .radio,
  35. .form-group .checkbox {
  36. margin-bottom: 0;
  37. }
  38. .form-group-inline {
  39. display: -webkit-box;
  40. display: -ms-flexbox;
  41. display: flex;
  42. -ms-flex-wrap: wrap;
  43. flex-wrap: wrap;
  44. }
  45. .form-group-inline .form-group {
  46. margin-bottom: 0;
  47. }
  48. .form-group-inline .form-item {
  49. -webkit-box-flex: 1;
  50. -ms-flex: 1;
  51. flex: 1;
  52. }
  53. .form-group-inline .btn {
  54. margin-left: 8px;
  55. margin-bottom: 5px;
  56. -ms-flex-negative: 0;
  57. flex-shrink: 0;
  58. }
  59. .form-group-inline--right {
  60. -webkit-box-pack: end;
  61. -ms-flex-pack: end;
  62. justify-content: flex-end;
  63. }
  64. .form-group-inline--right .button--primary {
  65. -webkit-box-ordinal-group: 11;
  66. -ms-flex-order: 10;
  67. order: 10;
  68. }
  69. .form-no-label label + .form-required {
  70. display: none;
  71. }
  72. span.form-required {
  73. margin: 0 3px;
  74. }
  75. .help-block {
  76. display: block;
  77. margin-top: 5px;
  78. font-size: 0.75rem;
  79. color: #464545;
  80. }
  81. .radio .help-block {
  82. padding-left: 25px;
  83. max-width: none;
  84. margin-top: 0;
  85. }
  86. .form-actions .btn {
  87. margin-bottom: 5px;
  88. }
  89. .views-exposed-form__actions {
  90. display: -webkit-box;
  91. display: -ms-flexbox;
  92. display: flex;
  93. -ms-flex-wrap: wrap;
  94. flex-wrap: wrap;
  95. -webkit-box-pack: justify;
  96. -ms-flex-pack: justify;
  97. justify-content: space-between;
  98. margin-bottom: 0;
  99. }
  100. .views-exposed-form__actions .btn-default {
  101. -webkit-box-ordinal-group: 11;
  102. -ms-flex-order: 10;
  103. order: 10;
  104. }
  105. .views-exposed-form__actions .btn-flat {
  106. margin-left: 0;
  107. }
  108. .form--default .form-actions {
  109. display: -webkit-box;
  110. display: -ms-flexbox;
  111. display: flex;
  112. -ms-flex-wrap: wrap;
  113. flex-wrap: wrap;
  114. -webkit-box-pack: start;
  115. -ms-flex-pack: start;
  116. justify-content: flex-start;
  117. }
  118. .form--default .form-actions .btn-group--primary,
  119. .form--default .form-actions .btn-primary {
  120. margin-left: auto;
  121. margin-right: 0;
  122. -webkit-box-ordinal-group: 11;
  123. -ms-flex-order: 10;
  124. order: 10;
  125. }
  126. .form-item--error-message {
  127. margin-top: 10px;
  128. position: relative;
  129. font-size: 0.75rem;
  130. display: inline-block;
  131. margin-bottom: 5px;
  132. padding-right: 2.25rem;
  133. }
  134. .form-item--error-message .close {
  135. float: none;
  136. position: absolute;
  137. right: 0;
  138. top: 0;
  139. line-height: 16px;
  140. padding: 0.25rem 0.75rem;
  141. }
  142. .form-item--error-message::before {
  143. display: inline-block;
  144. content: '';
  145. position: absolute;
  146. left: 20px;
  147. top: -7px;
  148. border-bottom: 8px dashed;
  149. border-right: 8px solid transparent;
  150. border-left: 8px solid transparent;
  151. }
  152. .fieldset-wrapper .form-item--error-message {
  153. margin-top: 0;
  154. }
  155. .has-error .form-inline {
  156. margin-bottom: 0;
  157. }
  158. .field--label-inline .field--label {
  159. font-weight: 500;
  160. display: inline-block;
  161. }
  162. .field--label-inline .field--label:after {
  163. content: ':';
  164. }
  165. .field--label-inline .field--label + .field--item {
  166. display: inline-block;
  167. }
  168. .field--label-inline .field--label + .field--item a {
  169. font-weight: 300;
  170. }
  171. @media (min-width: 600px) {
  172. .form-inline .form-group {
  173. display: inline-block;
  174. margin-bottom: 0;
  175. vertical-align: middle;
  176. }
  177. .form-inline .form-control {
  178. display: inline-block;
  179. width: auto;
  180. vertical-align: middle;
  181. }
  182. .form-inline .input-group {
  183. display: inline-table;
  184. vertical-align: middle;
  185. }
  186. .form-inline .input-group .input-group-addon,
  187. .form-inline .input-group .input-group-btn,
  188. .form-inline .input-group .form-control {
  189. width: auto;
  190. }
  191. .form-inline .input-group > .form-control {
  192. width: 100%;
  193. }
  194. .form-inline .control-label {
  195. margin-bottom: 0;
  196. vertical-align: middle;
  197. }
  198. }