| /* |
| Created on : 02.03.2015, 22:25:12 |
| Author : Chris |
| */ |
| |
| #multi-form { |
| width: 100%; |
| margin: 0 auto; |
| |
| * { |
| outline: 0; |
| } |
| |
| ul { |
| list-style: none; |
| } |
| |
| ul li { |
| list-style: none; |
| } |
| |
| form { |
| margin: 0 auto; |
| text-align: center; |
| |
| fieldset { |
| box-sizing: border-box; |
| width: 100%; |
| vertical-align: top; |
| border: 0; |
| margin: 0; |
| padding: 0; |
| |
| &.mf-valid { |
| .fs-title { |
| &:after { |
| font-family: "pulsweb"; |
| content: "\f00c"; |
| color: green; |
| margin-left: .5em; |
| font-size: 100%; |
| } |
| } |
| } |
| } |
| |
| textarea, input[type="text"] { |
| border: 0; |
| border-bottom: 1px solid #999; |
| border-radius: 2px; |
| padding: .75em .5em; |
| width: 100%; |
| box-sizing: border-box; |
| font-size: 15px; |
| } |
| |
| .action-button-wrapper .standalone { |
| width: 100%; |
| |
| a { |
| display: block; |
| width: 50%; |
| margin: 0 auto; |
| padding: .5em; |
| } |
| } |
| |
| .action-button-wrapper div { |
| display: inline-block; |
| margin-top: .5em; |
| |
| &:first-child { |
| padding-right: .5em; |
| } |
| |
| &:last-child { |
| padding-left: .5em; |
| } |
| } |
| |
| label { |
| color: white; |
| margin-bottom: 0; |
| } |
| |
| .submit { |
| border: 1px solid gray; |
| border-radius: 2px; |
| /*padding: .5em .7em;*/ |
| width: auto; |
| height: auto; |
| } |
| } |
| } |
| |
| /* Style for validation. */ |
| @mixin errorStyle() { |
| border-bottom: 1px solid orange !important; |
| } |
| |
| .validation-field { |
| position: relative; |
| width: 100%; |
| margin-bottom: 2em; |
| |
| label { |
| position: absolute; |
| top: .5em; |
| left: 8px; |
| color: #aaa !important; |
| padding: 0 5px; |
| font-weight: 100; |
| |
| transition: top 300ms ease-out, ackground-color 300ms ease-out, transform 300ms ease-out, left 300ms ease-out; |
| } |
| |
| &.focused, &.mf-valid { |
| label { |
| top: -.8em; |
| left: 0; |
| transform: scale3d(.85, .85, 1); |
| } |
| } |
| |
| &.focused, &.mf-valid { |
| label { |
| background-color: #fff; |
| } |
| } |
| |
| .validation-hint { |
| position: absolute; |
| right: .6em; |
| top: .5em; |
| } |
| |
| &.mf-valid .validation-hint:after { |
| font-family: "pulsweb"; |
| content: "\f00c"; |
| color: green; |
| font-size: 90%; |
| } |
| |
| &.mf-error { |
| textarea, iframe, [type="text"], [type="password"], [type="number"] { |
| @include errorStyle(); |
| } |
| |
| .validation-hint:after { |
| font-family: "Glyphicons Halflings"; |
| content: '!'; |
| color: orange; |
| } |
| } |
| |
| .error-message { |
| opacity: 0; |
| width: auto; |
| padding: .5em; |
| border-radius: 1px; |
| position: absolute; |
| top: -3em; |
| right: 0; |
| font-size: 90%; |
| white-space: nowrap; |
| pointer-events: none; |
| } |
| |
| &.mf-error.focused .error-message { |
| opacity: 1; |
| color: white; |
| background: orange; |
| |
| -webkit-transition: all .3s; |
| -moz-transition: all .3s; |
| transition: all .3s; |
| |
| &:after { |
| content: ''; |
| position: absolute; |
| bottom: -.3em; |
| right: 1em; |
| border-top: 5px solid orange !important; |
| border-left: 10px solid transparent; |
| border-right: 10px solid transparent; |
| } |
| } |
| } |
| |
| #post .validation-field { |
| &:first-child { |
| padding-right: .5em; |
| } |
| &:last-child { |
| padding-left: .5em; |
| } |
| &:first-child { |
| &.mf-error .validation-hint, &.mf-valid .validation-hint { |
| right: 1.1em; |
| } |
| } |
| } |
| |
| .hidden-fields { |
| display: none; |
| |
| div, label { |
| display: none; |
| } |
| } |
| |
| #captcha { |
| > div { |
| > div { |
| width: 100% !important; |
| } |
| } |
| |
| transform: scale(.7); |
| width: 80px; |
| |
| @media (min-width: 450px) { |
| transform: none; |
| width: 100%; |
| } |
| } |