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