Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | /*** |
| 2 | Forms |
||
| 3 | ***/ |
||
| 4 | |||
| 5 | .form-control { |
||
| 6 | outline: none !important; |
||
| 7 | box-shadow: none !important; |
||
| 8 | |||
| 9 | &.height-auto { |
||
| 10 | height: auto; |
||
| 11 | } |
||
| 12 | } |
||
| 13 | |||
| 14 | .input-group-addon { |
||
| 15 | > i { |
||
| 16 | color: lighten($input-border, 1%); |
||
| 17 | } |
||
| 18 | } |
||
| 19 | |||
| 20 | /*** |
||
| 21 | Custom color buttons |
||
| 22 | ***/ |
||
| 23 | |||
| 24 | @each $name, $colors in $component-colors { |
||
| 25 | .form-control.#{$name} { |
||
| 26 | border-color: map-get($colors, base); |
||
| 27 | |||
| 28 | &:focus { |
||
| 29 | border-color: darken(map-get($colors, base), 10%); |
||
| 30 | } |
||
| 31 | } |
||
| 32 | |||
| 33 | .form-control.focus-#{$name} { |
||
| 34 | &:focus { |
||
| 35 | border-color: map-get($colors, base); |
||
| 36 | } |
||
| 37 | } |
||
| 38 | } |
||
| 39 | |||
| 40 | .input-xxs { |
||
| 41 | width: 45px !important; |
||
| 42 | } |
||
| 43 | |||
| 44 | /* Form uneditable input */ |
||
| 45 | |||
| 46 | .uneditable-input { |
||
| 47 | padding: 6px 12px; |
||
| 48 | min-width: 206px; |
||
| 49 | font-size: 14px; |
||
| 50 | font-weight: normal; |
||
| 51 | height: 34px; |
||
| 52 | color: $input-color; |
||
| 53 | background-color: $input-bg; |
||
| 54 | border: 1px solid $input-border; |
||
| 55 | -webkit-box-shadow: none; |
||
| 56 | box-shadow: none; |
||
| 57 | -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||
| 58 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||
| 59 | } |
||
| 60 | |||
| 61 | .form-control-static { |
||
| 62 | display: inline-block; |
||
| 63 | margin: 0; |
||
| 64 | } |
||
| 65 | |||
| 66 | /* Form input sizing */ |
||
| 67 | |||
| 68 | .input-mini { |
||
| 69 | width: 45px !important; |
||
| 70 | } |
||
| 71 | |||
| 72 | .input-xsmall { |
||
| 73 | width: 80px !important; |
||
| 74 | } |
||
| 75 | |||
| 76 | .input-small { |
||
| 77 | width: 145px !important; |
||
| 78 | } |
||
| 79 | |||
| 80 | .input-medium { |
||
| 81 | width: 240px !important; |
||
| 82 | } |
||
| 83 | |||
| 84 | .input-large { |
||
| 85 | width: 320px !important; |
||
| 86 | } |
||
| 87 | |||
| 88 | .input-xlarge { |
||
| 89 | width: 420px !important; |
||
| 90 | } |
||
| 91 | |||
| 92 | @media (max-width: $screen-sm-min) { /* 768px */ |
||
| 93 | .input-large { |
||
| 94 | width: 250px !important; |
||
| 95 | } |
||
| 96 | |||
| 97 | .input-xlarge { |
||
| 98 | width: 300px !important; |
||
| 99 | } |
||
| 100 | } |
||
| 101 | |||
| 102 | .input-inline { |
||
| 103 | display: inline-block; |
||
| 104 | width: auto; |
||
| 105 | vertical-align: middle; |
||
| 106 | } |
||
| 107 | |||
| 108 | .input-fixed { |
||
| 109 | overflow: hidden; |
||
| 110 | } |
||
| 111 | |||
| 112 | .input-fixed { |
||
| 113 | overflow: hidden; |
||
| 114 | } |
||
| 115 | |||
| 116 | .form-group { |
||
| 117 | .input-inline { |
||
| 118 | margin-right: 5px; |
||
| 119 | } |
||
| 120 | } |
||
| 121 | |||
| 122 | @media (max-width: $screen-sm-min) { /* 768px */ |
||
| 123 | |||
| 124 | .input-lg { |
||
| 125 | width: 250px !important; |
||
| 126 | } |
||
| 127 | |||
| 128 | .input-xlg { |
||
| 129 | width: 300px !important; |
||
| 130 | } |
||
| 131 | |||
| 132 | } |
||
| 133 | |||
| 134 | /* Circle Inputs */ |
||
| 135 | |||
| 136 | .input-circle { |
||
| 137 | border-radius: 25px !important; |
||
| 138 | } |
||
| 139 | |||
| 140 | .input-circle-right { |
||
| 141 | border-radius: 0 25px 25px 0 !important; |
||
| 142 | } |
||
| 143 | |||
| 144 | .input-circle-left { |
||
| 145 | border-radius: 25px 0 0 25px !important; |
||
| 146 | } |
||
| 147 | |||
| 148 | .input-circle-bottom { |
||
| 149 | border-radius: 0 0 25px 25px !important; |
||
| 150 | } |
||
| 151 | |||
| 152 | .input-circle-top { |
||
| 153 | border-radius: 25px 25px 0 0 !important; |
||
| 154 | } |
||
| 155 | |||
| 156 | @if $theme-type == "material-design" { |
||
| 157 | .input-group-btn { |
||
| 158 | .btn { |
||
| 159 | box-shadow: none; |
||
| 160 | } |
||
| 161 | } |
||
| 162 | } |
||
| 163 | |||
| 164 | $color-tick: #666666; |
||
| 165 | $color-default: #E6E6E6; |
||
| 166 | $color-hover: darken($color-default, 5%); |
||
| 167 | $color-checked: $color-hover; |
||
| 168 | |||
| 169 | // Basic control styles |
||
| 170 | .mt-radio, |
||
| 171 | .mt-checkbox { |
||
| 172 | display: inline-block; |
||
| 173 | position: relative; |
||
| 174 | padding-left: 30px; |
||
| 175 | margin-bottom: 15px; |
||
| 176 | cursor: pointer; |
||
| 177 | font-size: 14px; |
||
| 178 | @include transition('all 0.3s'); |
||
| 179 | |||
| 180 | &.mt-radio-disabled, |
||
| 181 | &.mt-checkbox-disabled { |
||
| 182 | @include opacity(0.6); |
||
| 183 | } |
||
| 184 | |||
| 185 | // Hide default browser input |
||
| 186 | > input { |
||
| 187 | position: absolute; |
||
| 188 | z-index: -1; |
||
| 189 | @include opacity(0); |
||
| 190 | } |
||
| 191 | |||
| 192 | > span { |
||
| 193 | border: 1px solid transparent; |
||
| 194 | position: absolute; |
||
| 195 | top: 0px; |
||
| 196 | left: 0; |
||
| 197 | height: 19px; |
||
| 198 | width: 19px; |
||
| 199 | background: $color-default; |
||
| 200 | |||
| 201 | &:after { |
||
| 202 | content:''; |
||
| 203 | position: absolute; |
||
| 204 | display: none; // Hide check |
||
| 205 | } |
||
| 206 | } |
||
| 207 | |||
| 208 | &:hover > input:not([disabled]) ~ span, |
||
| 209 | > input:focus ~ span { |
||
| 210 | background: $color-hover; |
||
| 211 | @include transition('all 0.3s'); |
||
| 212 | } |
||
| 213 | |||
| 214 | > input:checked ~ span { |
||
| 215 | @include transition('all 0.3s'); |
||
| 216 | background: $color-checked; |
||
| 217 | |||
| 218 | &:after { |
||
| 219 | display: block; |
||
| 220 | } |
||
| 221 | } |
||
| 222 | |||
| 223 | &:hover > input:not([disabled]):checked ~ span, |
||
| 224 | > input:checked ~ span { |
||
| 225 | @include transition('all 0.3s'); |
||
| 226 | background: $color-hover; |
||
| 227 | } |
||
| 228 | |||
| 229 | > input:disabled ~ span { |
||
| 230 | @include opacity(0.6); |
||
| 231 | pointer-events: none; |
||
| 232 | } |
||
| 233 | |||
| 234 | &.mt-radio-outline, |
||
| 235 | &.mt-checkbox-outline { |
||
| 236 | > span { |
||
| 237 | border: 1px solid darken($color-default, 5%); |
||
| 238 | background: none; |
||
| 239 | } |
||
| 240 | |||
| 241 | &:hover > input:not([disabled]) ~ span, |
||
| 242 | > input:focus ~ span { |
||
| 243 | border: 1px solid darken($color-default, 5%); |
||
| 244 | background: none; |
||
| 245 | } |
||
| 246 | |||
| 247 | > input:checked ~ span { |
||
| 248 | border: 1px solid darken($color-default, 5%); |
||
| 249 | background: none; |
||
| 250 | } |
||
| 251 | |||
| 252 | &:hover > input:not([disabled]):checked ~ span, |
||
| 253 | > input:checked ~ span { |
||
| 254 | border: 1px solid darken($color-default, 5%); |
||
| 255 | background: none; |
||
| 256 | } |
||
| 257 | } |
||
| 258 | } |
||
| 259 | |||
| 260 | .mt-radio { |
||
| 261 | > span { |
||
| 262 | @include border-radius(50%, '!important'); // Makes radio buttons circlular |
||
| 263 | |||
| 264 | &:after { |
||
| 265 | left: 6px; |
||
| 266 | top: 6px; |
||
| 267 | height: 6px; |
||
| 268 | width: 6px; |
||
| 269 | border-radius: 50%; |
||
| 270 | background: $color-tick; |
||
| 271 | } |
||
| 272 | } |
||
| 273 | |||
| 274 | > input:disabled ~ span { |
||
| 275 | &:after { |
||
| 276 | background: $color-tick; |
||
| 277 | } |
||
| 278 | } |
||
| 279 | |||
| 280 | &.mt-radio-single { |
||
| 281 | th > &, |
||
| 282 | td > & { |
||
| 283 | right: -5px; |
||
| 284 | } |
||
| 285 | } |
||
| 286 | } |
||
| 287 | |||
| 288 | .mt-checkbox { |
||
| 289 | > span { |
||
| 290 | &:after { |
||
| 291 | left: 6px; |
||
| 292 | top: 3px; |
||
| 293 | width: 5px; |
||
| 294 | height: 10px; |
||
| 295 | border: solid $color-tick; |
||
| 296 | border-width: 0 2px 2px 0; |
||
| 297 | transform: rotate(45deg); |
||
| 298 | } |
||
| 299 | } |
||
| 300 | |||
| 301 | > input:disabled ~ span { |
||
| 302 | &:after { |
||
| 303 | border-color: $color-tick; |
||
| 304 | } |
||
| 305 | } |
||
| 306 | |||
| 307 | .form-inline & { |
||
| 308 | margin-left: 15px; |
||
| 309 | margin-right: 15px; |
||
| 310 | } |
||
| 311 | |||
| 312 | &.mt-checkbox-single { |
||
| 313 | |||
| 314 | th > &, |
||
| 315 | td > & { |
||
| 316 | right: -5px; |
||
| 317 | } |
||
| 318 | } |
||
| 319 | } |
||
| 320 | |||
| 321 | .mt-checkbox-list, |
||
| 322 | .mt-radio-list { |
||
| 323 | padding: 10px 0; |
||
| 324 | |||
| 325 | .form-horizontal .form-group & { |
||
| 326 | padding-top: 0; |
||
| 327 | } |
||
| 328 | |||
| 329 | .mt-checkbox, |
||
| 330 | .mt-radio { |
||
| 331 | display: block; |
||
| 332 | } |
||
| 333 | } |
||
| 334 | |||
| 335 | .mt-checkbox-inline, |
||
| 336 | .mt-radio-inline { |
||
| 337 | padding: 10px 0; |
||
| 338 | |||
| 339 | .form-horizontal .form-group & { |
||
| 340 | padding-top: 8px; |
||
| 341 | } |
||
| 342 | |||
| 343 | .mt-checkbox, |
||
| 344 | .mt-radio { |
||
| 345 | display: inline-block; |
||
| 346 | margin-right: 15px; |
||
| 347 | |||
| 348 | &:last-child { |
||
| 349 | margin-right: 0; |
||
| 350 | } |
||
| 351 | } |
||
| 352 | } |