scss/roojs-bootstrap/radio-set.scss
[roojs1] / scss / roojs-bootstrap / radio-set.scss
1
2 .roo-radio-set:before,
3 .roo-radio-set:after {
4     display: table;
5     content: " ";
6     clear: both;
7 }
8
9 .radio.checked label::after 
10 {
11     -webkit-transform: scale(1, 1);
12     -ms-transform: scale(1, 1);
13     -o-transform: scale(1, 1);
14     transform: scale(1, 1);
15     background-color: $gray;
16 }
17
18 .roo-radio-set.disabled .radio label 
19 {
20     opacity: 0.65; 
21 }
22
23 .roo-radio-set.disabled .radio label
24 {
25     cursor: not-allowed; 
26 }
27
28
29 .roo-radio-primary {
30     .radio label::after 
31     {
32         background-color: $body-bg; 
33     }
34
35     .radio.checked label::before 
36     {
37         border-color: $brand-primary; //#428bca; 
38     }
39
40     .radio.checked label::after 
41     {
42         background-color: $brand-primary; //#428bca;    
43     }
44 }
45
46
47 .roo-radio-danger {
48     .radio label::after 
49     {
50         background-color: $brand-danger; 
51     }
52
53     .radio.checked label::before 
54     {
55         border-color: $brand-danger; 
56     }
57
58     .radio.checked label::after 
59     {
60         background-color: $brand-danger; 
61     }
62 }
63     
64 .roo-radio-info {
65     .radio label::after 
66     {
67         background-color: $body-bg;
68     }
69
70     .radio.checked label::before 
71     {
72         border-color: $brand-info; 
73     }
74
75     .radio.checked label::after 
76     {
77         background-color: $brand-info; 
78     }
79 }
80
81 .roo-radio-warning {
82     .radio label::after 
83     {
84         background-color: $body-bg; 
85     }
86
87     .radio.checked label::before 
88     {
89         border-color: $brand-warning; 
90     }
91
92     .radio.checked label::after 
93     {
94         background-color: $brand-warning; 
95     }
96 }
97 .roo-radio-success {
98     .radio label::after 
99     {
100         background-color: $body-bg; 
101     }
102     
103     .radio.checked label::before 
104     {
105         border-color: $brand-success; 
106     }
107
108     .radio.checked label::after 
109     {
110         background-color: $brand-success; 
111     }
112 }
113
114
115 /** not sure if these are needed with is-valid / is-invalid.. */
116   
117 /*
118  * DISABLED probably needs deleting...
119 .roo-radio-set.has-warning {
120     .roo-radio-set-items label,
121     .roo-radio-set-label {
122         color: $brand-warning; //#8a6d3b;
123     }
124 }
125 .roo-radio-set.has-error {
126     .roo-radio-set-items label,
127     .roo-radio-set-label {
128         color: $brand-danger; //#a94442;
129     }
130 }
131
132 .roo-radio-set.has-success {
133     .roo-radio-set-items label,
134     .roo-radio-set-label
135     {
136         color: $brand-success; //#3c763d;
137     }
138 }
139 */
140
141
142 .roo-radio-set.is-invalid {
143     .roo-radio-set-items label,
144     .roo-radio-set-label {
145         color:  $form-feedback-invalid-color; //#8a6d3b;
146     }
147 }
148
149
150 .roo-radio-set.is-valid {
151     .roo-radio-set-items label,
152     .roo-radio-set-label {
153         color:  $form-feedback-valid-color; //#8a6d3b;
154     }
155 }
156
157
158
159
160 .roo-radio-set-inline .radio {
161     position: relative;
162     display: inline-block;
163     padding-left: 20px;
164     margin-top: 0px;
165     margin-bottom: 0;
166     font-weight: 400;
167     vertical-align: middle;
168     cursor: pointer;
169 }
170
171 .roo-radio-set-inline .radio + .radio {
172     margin-left: 10px;
173 }
174
175 .roo-radio-set-label .roo-required-indicator.right-indicator {
176     position: absolute;
177 }
178
179 .roo-radio-set-label .roo-required-indicator.right-indicator.fa-star {
180     font-size: 8px;
181     margin-left: 3px;
182     color: $brand-danger;
183 }
184
185 .roo-form-error-popover.in {
186     opacity: 1;
187 }
188
189 .roo-form-error-popover .tooltip-inner {
190     max-width: 100%;
191     padding: 10px;
192 }