UNPKG

bee-checkbox/build/Checkbox.css

Version:

1/* FormGroup */
2/*  Navlayout  */
u-checkbox {
display: inline-block;
position: relative;
margin-right: 24px;
height: 16px;
line-height: 16px;
font-size: 12px;
white-space: nowrap;
cursor: pointer;
outline: none;
position: relative;
line-height: 1;
vertical-align: middle; }
.u-checkbox input[type='checkbox'] {
  position: absolute;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  height: 100%; }
.u-checkbox input[disabled] {
  cursor: not-allowed; }
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
  border-color: rgb(245, 60, 50); }
.u-checkbox.is-checked .u-checkbox-label:before {
  -moz-box-shadow: inset 0 0 0 10px #fff;
  -webkit-box-shadow: inset 0 0 0 10px #fff;
  box-shadow: inset 0 0 0 10px #fff;
  border-color: rgb(165, 173, 186); }
.u-checkbox.is-checked .u-checkbox-label:after {
  color: rgb(245, 60, 50);
  content: "\e658";
  line-height: 16px;
  font-size: 12px;
  font-weight: 600; }
.u-checkbox.is-checked.u-checkbox-inverse .u-checkbox-label:before {
  -moz-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
  -webkit-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
  box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
  border-color: rgb(245, 60, 50); }
.u-checkbox.is-checked.u-checkbox-inverse .u-checkbox-label:after {
  color: #fff; }
.u-checkbox.is-checked.disabled.u-checkbox-inverse .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px #c1c7d0;
  border-color: #c1c7d0; }
.u-checkbox .u-checkbox-label {
  cursor: pointer;
  display: inline-block;
  padding-left: 25px;
  line-height: 16px;
  color: #212121; }
  .u-checkbox .u-checkbox-label:before {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgb(165, 173, 186);
    background-color: #fff;
    content: '';
    font-family: 'uf';
    display: inline-block;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    text-align: center;
    position: absolute; }
  .u-checkbox .u-checkbox-label:after {
    content: '';
    font-family: 'uf';
    display: inline-block;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    text-align: center;
    position: absolute; }
.u-checkbox.disabled .u-checkbox-label {
  cursor: not-allowed;
  color: #909090; }
  .u-checkbox.disabled .u-checkbox-label:before {
    border-color: #DFE1E6;
    color: #909090; }
  .u-checkbox.disabled .u-checkbox-label:after {
    color: #c1c7d0; }
89
u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
93
u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
color: rgb(245, 60, 50);
content: "\e6ce";
line-height: 16px;
font-size: 12px;
font-weight: 600; }
100
u-checkbox.u-checkbox-indeterminate.u-checkbox-inverse .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
-webkit-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
border-color: rgb(245, 60, 50); }
106
u-checkbox.u-checkbox-indeterminate.u-checkbox-inverse .u-checkbox-label:after {
color: #fff; }
109
u-checkbox.u-checkbox-indeterminate.disabled.u-checkbox-inverse .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px #c1c7d0;
border-color: #c1c7d0; }
113
u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
119
u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:after {
color: rgb(76,175,80); }
122
u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(76,175,80); }
125
u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
131
u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:after {
color: rgb(255,152,0); }
134
u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(255,152,0); }
137
u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
143
u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:after {
color: rgb(244,67,54); }
146
u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(244,67,54); }
149
u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
155
u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:after {
color: rgb(97,97,97); }
158
u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(97,97,97); }
161
u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
167
u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:after {
color: rgb(0,188,212); }
170
u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(0,188,212); }

1	`/* FormGroup */`
2	`/* Navlayout */`
3	`.u-checkbox {`
4	`display: inline-block;`
5	`position: relative;`
6	`margin-right: 24px;`
7	`height: 16px;`
8	`line-height: 16px;`
9	`font-size: 12px;`
10	`white-space: nowrap;`
11	`cursor: pointer;`
12	`outline: none;`
13	`position: relative;`
14	`line-height: 1;`
15	`vertical-align: middle; }`
16	`.u-checkbox input[type='checkbox'] {`
17	`position: absolute;`
18	`z-index: 3;`
19	`cursor: pointer;`
20	`opacity: 0;`
21	`box-sizing: border-box;`
22	`padding: 0;`
23	`width: 100%;`
24	`height: 100%; }`
25	`.u-checkbox input[disabled] {`
26	`cursor: not-allowed; }`
27	`.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {`
28	`border-color: rgb(245, 60, 50); }`
29	`.u-checkbox.is-checked .u-checkbox-label:before {`
30	`-moz-box-shadow: inset 0 0 0 10px #fff;`
31	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
32	`box-shadow: inset 0 0 0 10px #fff;`
33	`border-color: rgb(165, 173, 186); }`
34	`.u-checkbox.is-checked .u-checkbox-label:after {`
35	`color: rgb(245, 60, 50);`
36	`content: "\e658";`
37	`line-height: 16px;`
38	`font-size: 12px;`
39	`font-weight: 600; }`
40	`.u-checkbox.is-checked.u-checkbox-inverse .u-checkbox-label:before {`
41	`-moz-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);`
42	`-webkit-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);`
43	`box-shadow: inset 0 0 0 10px rgb(245, 60, 50);`
44	`border-color: rgb(245, 60, 50); }`
45	`.u-checkbox.is-checked.u-checkbox-inverse .u-checkbox-label:after {`
46	`color: #fff; }`
47	`.u-checkbox.is-checked.disabled.u-checkbox-inverse .u-checkbox-label:before {`
48	`box-shadow: inset 0 0 0 10px #c1c7d0;`
49	`border-color: #c1c7d0; }`
50	`.u-checkbox .u-checkbox-label {`
51	`cursor: pointer;`
52	`display: inline-block;`
53	`padding-left: 25px;`
54	`line-height: 16px;`
55	`color: #212121; }`
56	`.u-checkbox .u-checkbox-label:before {`
57	`-moz-border-radius: 3px;`
58	`-webkit-border-radius: 3px;`
59	`border-radius: 3px;`
60	`border: 1px solid rgb(165, 173, 186);`
61	`background-color: #fff;`
62	`content: '';`
63	`font-family: 'uf';`
64	`display: inline-block;`
65	`width: 16px;`
66	`height: 16px;`
67	`left: 0;`
68	`top: 0;`
69	`text-align: center;`
70	`position: absolute; }`
71	`.u-checkbox .u-checkbox-label:after {`
72	`content: '';`
73	`font-family: 'uf';`
74	`display: inline-block;`
75	`width: 16px;`
76	`height: 16px;`
77	`left: 0;`
78	`top: 0;`
79	`text-align: center;`
80	`position: absolute; }`
81	`.u-checkbox.disabled .u-checkbox-label {`
82	`cursor: not-allowed;`
83	`color: #909090; }`
84	`.u-checkbox.disabled .u-checkbox-label:before {`
85	`border-color: #DFE1E6;`
86	`color: #909090; }`
87	`.u-checkbox.disabled .u-checkbox-label:after {`
88	`color: #c1c7d0; }`
89
90	`.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {`
91	`box-shadow: inset 0 0 0 10px #fff;`
92	`border-color: rgb(165, 173, 186); }`
93
94	`.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {`
95	`color: rgb(245, 60, 50);`
96	`content: "\e6ce";`
97	`line-height: 16px;`
98	`font-size: 12px;`
99	`font-weight: 600; }`
100
101	`.u-checkbox.u-checkbox-indeterminate.u-checkbox-inverse .u-checkbox-label:before {`
102	`-moz-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);`
103	`-webkit-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);`
104	`box-shadow: inset 0 0 0 10px rgb(245, 60, 50);`
105	`border-color: rgb(245, 60, 50); }`
106
107	`.u-checkbox.u-checkbox-indeterminate.u-checkbox-inverse .u-checkbox-label:after {`
108	`color: #fff; }`
109
110	`.u-checkbox.u-checkbox-indeterminate.disabled.u-checkbox-inverse .u-checkbox-label:before {`
111	`box-shadow: inset 0 0 0 10px #c1c7d0;`
112	`border-color: #c1c7d0; }`
113
114	`.u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before {`
115	`-moz-box-shadow: inset 0 0 0 10px #fff;`
116	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
117	`box-shadow: inset 0 0 0 10px #fff;`
118	`border-color: rgb(165, 173, 186); }`
119
120	`.u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:after {`
121	`color: rgb(76,175,80); }`
122
123	`.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {`
124	`border-color: rgb(76,175,80); }`
125
126	`.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {`
127	`-moz-box-shadow: inset 0 0 0 10px #fff;`
128	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
129	`box-shadow: inset 0 0 0 10px #fff;`
130	`border-color: rgb(165, 173, 186); }`
131
132	`.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:after {`
133	`color: rgb(255,152,0); }`
134
135	`.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {`
136	`border-color: rgb(255,152,0); }`
137
138	`.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {`
139	`-moz-box-shadow: inset 0 0 0 10px #fff;`
140	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
141	`box-shadow: inset 0 0 0 10px #fff;`
142	`border-color: rgb(165, 173, 186); }`
143
144	`.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:after {`
145	`color: rgb(244,67,54); }`
146
147	`.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {`
148	`border-color: rgb(244,67,54); }`
149
150	`.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {`
151	`-moz-box-shadow: inset 0 0 0 10px #fff;`
152	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
153	`box-shadow: inset 0 0 0 10px #fff;`
154	`border-color: rgb(165, 173, 186); }`
155
156	`.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:after {`
157	`color: rgb(97,97,97); }`
158
159	`.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {`
160	`border-color: rgb(97,97,97); }`
161
162	`.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {`
163	`-moz-box-shadow: inset 0 0 0 10px #fff;`
164	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
165	`box-shadow: inset 0 0 0 10px #fff;`
166	`border-color: rgb(165, 173, 186); }`
167
168	`.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:after {`
169	`color: rgb(0,188,212); }`
170
171	`.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {`
172	`border-color: rgb(0,188,212); }`