Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | /*** |
| 2 | Form Layouts |
||
| 3 | ****/ |
||
| 4 | |||
| 5 | /* Static info */ |
||
| 6 | |||
| 7 | .static-info { |
||
| 8 | margin-bottom: 10px; |
||
| 9 | |||
| 10 | .name { |
||
| 11 | font-size: 14px; |
||
| 12 | } |
||
| 13 | |||
| 14 | .value { |
||
| 15 | font-size: 14px; |
||
| 16 | font-weight: 600; |
||
| 17 | } |
||
| 18 | |||
| 19 | &.align-reverse .name, |
||
| 20 | &.align-reverse .value { |
||
| 21 | text-align: right; |
||
| 22 | } |
||
| 23 | } |
||
| 24 | |||
| 25 | /* Help blocks */ |
||
| 26 | |||
| 27 | .help-block { |
||
| 28 | margin-top: 5px; |
||
| 29 | margin-bottom: 5px; |
||
| 30 | } |
||
| 31 | |||
| 32 | .help-inline { |
||
| 33 | font-size: 13px; |
||
| 34 | color: #737373; |
||
| 35 | display: inline-block; |
||
| 36 | padding: 5px; |
||
| 37 | } |
||
| 38 | |||
| 39 | .form-inline { |
||
| 40 | input { |
||
| 41 | margin-bottom: 0px !important; |
||
| 42 | } |
||
| 43 | } |
||
| 44 | |||
| 45 | /* Control Label */ |
||
| 46 | |||
| 47 | .control-label { |
||
| 48 | margin-top: 1px; |
||
| 49 | font-weight: normal; |
||
| 50 | } |
||
| 51 | |||
| 52 | .control-label, |
||
| 53 | .form-group { |
||
| 54 | .required { |
||
| 55 | color: #e02222; |
||
| 56 | font-size: 12px; |
||
| 57 | padding-left: 2px; |
||
| 58 | } |
||
| 59 | } |
||
| 60 | |||
| 61 | .form { |
||
| 62 | padding: 0 !important; |
||
| 63 | } |
||
| 64 | |||
| 65 | .portlet-form, |
||
| 66 | .form { |
||
| 67 | .form-body { |
||
| 68 | padding: 20px; |
||
| 69 | |||
| 70 | .portlet.light & { |
||
| 71 | padding-left: 0; |
||
| 72 | padding-right: 0; |
||
| 73 | } |
||
| 74 | } |
||
| 75 | |||
| 76 | .form-actions { |
||
| 77 | padding: 20px 20px; |
||
| 78 | margin: 0; |
||
| 79 | background-color: #f5f5f5; |
||
| 80 | |||
| 81 | @if $theme-type == "default" { |
||
| 82 | border-top: 1px solid $general-panel-border-color; |
||
| 83 | } |
||
| 84 | |||
| 85 | *zoom: 1; |
||
| 86 | |||
| 87 | .portlet.light & { |
||
| 88 | background: none; |
||
| 89 | padding-left: 0; |
||
| 90 | padding-right: 0; |
||
| 91 | } |
||
| 92 | |||
| 93 | &.noborder { |
||
| 94 | border-top: 0; |
||
| 95 | } |
||
| 96 | |||
| 97 | .portlet & { |
||
| 98 | @include border-radius(0 0 $general-border-radius $general-border-radius); |
||
| 99 | } |
||
| 100 | |||
| 101 | @include clearfix(); |
||
| 102 | |||
| 103 | &.right { |
||
| 104 | padding-left: 0; |
||
| 105 | padding-right: 20px; |
||
| 106 | text-align: right; |
||
| 107 | |||
| 108 | .portlet.light & { |
||
| 109 | padding-right: 0; |
||
| 110 | } |
||
| 111 | } |
||
| 112 | |||
| 113 | &.left { |
||
| 114 | padding-left: 20px; |
||
| 115 | padding-right: 0; |
||
| 116 | text-align: left; |
||
| 117 | |||
| 118 | .portlet.light & { |
||
| 119 | padding-left: 0; |
||
| 120 | } |
||
| 121 | } |
||
| 122 | |||
| 123 | &.nobg { |
||
| 124 | background-color: transparent; |
||
| 125 | } |
||
| 126 | |||
| 127 | &.top { |
||
| 128 | margin-top: 0; |
||
| 129 | margin-bottom: 20px; |
||
| 130 | border-top: 0; |
||
| 131 | |||
| 132 | @if $theme-type == "default" { |
||
| 133 | border-bottom: 1px solid $general-panel-border-color; |
||
| 134 | } |
||
| 135 | |||
| 136 | .portlet.light & { |
||
| 137 | background: none; |
||
| 138 | } |
||
| 139 | } |
||
| 140 | |||
| 141 | .btn-set { |
||
| 142 | display: inline-block; |
||
| 143 | } |
||
| 144 | |||
| 145 | @media (max-width: $screen-xs-max) { /* 767px */ |
||
| 146 | .btn-set { |
||
| 147 | margin-bottom: 3px; |
||
| 148 | margin-top: 3px; |
||
| 149 | float: left !important; |
||
| 150 | } |
||
| 151 | } |
||
| 152 | } |
||
| 153 | |||
| 154 | .form-section { |
||
| 155 | margin: 30px 0px 30px 0px; |
||
| 156 | padding-bottom: 5px; |
||
| 157 | |||
| 158 | .form-fit & { |
||
| 159 | margin-left: 20px; |
||
| 160 | margin-right: 20px; |
||
| 161 | } |
||
| 162 | |||
| 163 | @if $theme-type == "default" { |
||
| 164 | border-bottom: 1px solid $general-panel-border-color; |
||
| 165 | } |
||
| 166 | } |
||
| 167 | } |
||
| 168 | |||
| 169 | /* Checkboxes */ |
||
| 170 | |||
| 171 | .checkbox, |
||
| 172 | .form-horizontal .checkbox { |
||
| 173 | padding: 0; |
||
| 174 | |||
| 175 | > label { |
||
| 176 | padding-left: 0; |
||
| 177 | } |
||
| 178 | } |
||
| 179 | |||
| 180 | .checkbox-list > label { |
||
| 181 | display: block; |
||
| 182 | |||
| 183 | &.checkbox-inline { |
||
| 184 | display: inline-block; |
||
| 185 | |||
| 186 | &:first-child { |
||
| 187 | padding-left: 0; |
||
| 188 | } |
||
| 189 | } |
||
| 190 | } |
||
| 191 | |||
| 192 | /* Radio buttons */ |
||
| 193 | |||
| 194 | .radio-list > label { |
||
| 195 | display: block; |
||
| 196 | |||
| 197 | &.radio-inline { |
||
| 198 | display: inline-block; |
||
| 199 | |||
| 200 | &:first-child { |
||
| 201 | padding-left: 0; |
||
| 202 | } |
||
| 203 | } |
||
| 204 | } |
||
| 205 | |||
| 206 | /* Radio buttons in horizontal forms */ |
||
| 207 | |||
| 208 | .form-horizontal { |
||
| 209 | |||
| 210 | .radio-list { |
||
| 211 | .radio { |
||
| 212 | padding-top: 1px; |
||
| 213 | } |
||
| 214 | |||
| 215 | > label { |
||
| 216 | margin-bottom: 0; |
||
| 217 | } |
||
| 218 | } |
||
| 219 | |||
| 220 | .radio { |
||
| 221 | > span { |
||
| 222 | margin-top: 2px; |
||
| 223 | } |
||
| 224 | } |
||
| 225 | } |
||
| 226 | |||
| 227 | /* Rows seperated form layout */ |
||
| 228 | |||
| 229 | .form .form-row-seperated { |
||
| 230 | .portlet-body { |
||
| 231 | padding: 0; |
||
| 232 | } |
||
| 233 | |||
| 234 | .form-group { |
||
| 235 | margin: 0; |
||
| 236 | border-bottom: 1px solid #efefef; |
||
| 237 | padding: 15px 0; |
||
| 238 | |||
| 239 | &.last { |
||
| 240 | border-bottom: 0; |
||
| 241 | margin-bottom: 0; |
||
| 242 | padding-bottom: 13px; |
||
| 243 | } |
||
| 244 | |||
| 245 | .help-block { |
||
| 246 | margin-bottom: 0; |
||
| 247 | } |
||
| 248 | } |
||
| 249 | |||
| 250 | .form-body { |
||
| 251 | padding: 0; |
||
| 252 | } |
||
| 253 | |||
| 254 | .form-actions { |
||
| 255 | padding-left: 15px !important; |
||
| 256 | padding-right: 15px !important; |
||
| 257 | } |
||
| 258 | } |
||
| 259 | |||
| 260 | /* Form bordered */ |
||
| 261 | |||
| 262 | .form .form-bordered { |
||
| 263 | |||
| 264 | .form-group { |
||
| 265 | margin: 0; |
||
| 266 | border-bottom: 1px solid #efefef; |
||
| 267 | |||
| 268 | > div { |
||
| 269 | padding: 15px; |
||
| 270 | border-left: 1px solid #efefef; |
||
| 271 | |||
| 272 | @media (max-width: $screen-sm-max) { /* 991px */ |
||
| 273 | border-left: 0; |
||
| 274 | } |
||
| 275 | } |
||
| 276 | |||
| 277 | &.last { |
||
| 278 | border-bottom: 0; |
||
| 279 | } |
||
| 280 | |||
| 281 | .control-label { |
||
| 282 | padding-top: 20px; |
||
| 283 | |||
| 284 | @media (max-width: $screen-sm-max) { /* 991px */ |
||
| 285 | padding-top: 10px; |
||
| 286 | } |
||
| 287 | } |
||
| 288 | |||
| 289 | .help-block { |
||
| 290 | margin-bottom: 0; |
||
| 291 | } |
||
| 292 | |||
| 293 | .form-control { |
||
| 294 | margin: 0; |
||
| 295 | } |
||
| 296 | } |
||
| 297 | |||
| 298 | .form-body { |
||
| 299 | margin: 0; |
||
| 300 | padding: 0; |
||
| 301 | } |
||
| 302 | |||
| 303 | .form-actions { |
||
| 304 | margin-top: 0; |
||
| 305 | padding-left: 16px !important; |
||
| 306 | padding-right: 16px !important; |
||
| 307 | |||
| 308 | @media (max-width: $screen-sm-max) { /* 991px */ |
||
| 309 | padding-left: 15px !important; |
||
| 310 | padding-right: 15px !important; |
||
| 311 | } |
||
| 312 | } |
||
| 313 | } |
||
| 314 | |||
| 315 | /* Horizontal bordered form */ |
||
| 316 | |||
| 317 | .form .form-horizontal.form-bordered { |
||
| 318 | &.form-row-stripped { |
||
| 319 | .form-group:nth-child(even) { |
||
| 320 | background-color: #fcfcfc; |
||
| 321 | } |
||
| 322 | |||
| 323 | .form-control { |
||
| 324 | background: #fff !important; |
||
| 325 | } |
||
| 326 | } |
||
| 327 | |||
| 328 | &.form-label-stripped { |
||
| 329 | .form-group:nth-child(even) { |
||
| 330 | background-color: #fcfcfc; |
||
| 331 | |||
| 332 | > div { |
||
| 333 | background-color: #ffffff; |
||
| 334 | } |
||
| 335 | } |
||
| 336 | |||
| 337 | .form-group:nth-child(even) { |
||
| 338 | background-color: #fcfcfc; |
||
| 339 | } |
||
| 340 | } |
||
| 341 | } |
||
| 342 | |||
| 343 | /* Horizontal form small input issue */ |
||
| 344 | |||
| 345 | .form-horizontal { |
||
| 346 | .form-group { |
||
| 347 | .input-sm { |
||
| 348 | margin-top: 3px; |
||
| 349 | } |
||
| 350 | |||
| 351 | .form-control-static { |
||
| 352 | margin-top: 1px; |
||
| 353 | } |
||
| 354 | } |
||
| 355 | } |