1/* Form Styles */ 2 3 4 5form fieldset { 6 max-width: 500px; 7 border-color: $form-border-color;// FIXME 8} 9 10label { 11 &.block { 12 display: block; 13 text-align: right; 14 select, input.edit { 15 width: 50%; 16 } 17 } 18 &.simple { 19 display: block; 20 text-align: left; 21 } 22 span { 23 font-size: $small; 24 display: inline-block; 25 padding-right: 10px; 26 text-align: left; 27 } 28} 29 30input.edit { 31 width: 100%; 32 padding: 0; 33 margin: 0; 34 border: none; 35 outline: none; 36 resize: none; 37 -webkit-appearance: none; 38 font-family: $font-family; 39 font-weight: $font-weight-light; 40 @include font-size($norm); 41 @include box-shadow(none); 42 position: relative; 43 padding: 0 10px; 44 background: #fff; 45 border: 1px solid $form-border-color;// FIXME 46 @include line-and-height(height-calc($norm)); 47 @include border-radius(4px); 48} 49select.edit { 50 position: relative; 51 width: auto; 52 max-width: 100%; 53 display: inline-block; 54 margin: 0 0 2px 1.2%; 55 overflow: hidden; 56 border: 1px solid $form-border-color;// FIXME 57 @include font-size($norm); 58 @include box-shadow(none); 59 @include border-radius(4px); 60 font-family: $font-family; 61 font-weight: $font-weight-light; 62 height: auto; 63 background-image: none; //FIXME 64 background-color: $default-color; //FIXME 65 &:after { 66 content: "\E75C"; 67 font-family: $icons; 68 z-index: 0; 69 position:absolute; 70 right: 8%; 71 top: 50%; 72 margin-top: -12px; 73 color: $body-font-color; 74 } 75 &:first-child { 76 margin-left: 0; 77 } 78 option { 79 position: relative; 80 display: block; 81 min-width: 100%; 82 width: 135%; 83 height: 34px; 84 padding: 6px 45px 6px 15px; 85 color: $body-font-color; 86 border: none; 87 background: transparent; 88 outline: none; 89 -webkit-appearance: none; 90 z-index: 99; 91 cursor: pointer; 92 @include font-size($norm); 93 } 94 option::-ms-expand { 95 display: none; 96 } 97} 98 99[disabled] { opacity: .5; } 100 101.js .field { 102 .radio, .checkbox { 103 @each $error in danger $danger-color, warning $warning-color, success $success-color { 104 &.#{nth($error, 1)} { 105 color: nth($error, 2); 106 @if nth($error, 1) == success { 107 color: $body-font-color; 108 i { color: nth($error, 2); } 109 } 110 span { 111 border-color: nth($error, 2); 112 color: nth($error, 2); 113 background: lighten(nth($error, 2), 35%); 114 @include transition-duration(.2s); 115 } 116 } 117 } 118 position: relative; 119 &.checked i { 120 position: absolute; 121 top: -1px; 122 left: -8px; 123 line-height: 16px; 124 } 125 span { 126 display: inline-block; 127 width: 16px; 128 height: 16px; 129 position: relative; 130 top: 2px; 131 border: solid 1px #ccc; 132 background: #fefefe; 133 } 134 input[type="radio"], input[type="checkbox"] { 135 display: none; 136 } 137 } 138 .radio span { 139 @include border-radius(8px); 140 } 141 .checkbox span { 142 @include border-radius(3px); 143 } 144} 145