UNPKG

bee-checkbox/src/Checkbox.scss

Version:

1@import "../node_modules/tinper-bee-core/scss/minxin-variables";
2@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
3
4$checkbox-label-width:16px;
5$checkbox-label-height:16px;
u-checkbox {
display: inline-block;
position: relative;
margin-right: 24px;
height: $checkbox-label-height;
line-height: $checkbox-label-height;
font-size: 12px;
white-space: nowrap;
  cursor: pointer;
  outline: none;
  position: relative;
  line-height: 1;
  vertical-align: middle;
input[type='checkbox']{
position: absolute;
z-index: 3;
cursor: pointer;
opacity: 0;
box-sizing: border-box;
padding: 0;
width: 100%;
  	height: 100%;
}
input[disabled]{
cursor: not-allowed;
}
input[type='checkbox']:focus + .u-checkbox-label:before{
  	border-color: $checkbox-color;
}
&.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:$border-color-base;
}
.u-checkbox-label:after {
	color: $checkbox-color;
	content: "\e658";
    line-height: $checkbox-label-height;
	font-size: 12px;
	font-weight: 600;
}
&.u-checkbox-inverse .u-checkbox-label{
	&:before{
		-moz-box-shadow: inset 0 0 0 10px $checkbox-color;
		-webkit-box-shadow: inset 0 0 0 10px $checkbox-color;
		box-shadow: inset 0 0 0 10px $checkbox-color;
		border-color:$checkbox-color;
	}
	&:after {
		color: #fff;
	}
}
&.disabled.u-checkbox-inverse .u-checkbox-label:before {
	box-shadow: inset 0 0 0 10px #c1c7d0;
	border-color:#c1c7d0;
}
}
.u-checkbox-label {
cursor: pointer;
   display: inline-block;
   //position: relative;
padding-left: 25px;
line-height: $checkbox-label-height;
color: #212121;
   &:before {
    -moz-border-radius: $border-radius-base;
    -webkit-border-radius: $border-radius-base;
    border-radius: $border-radius-base;
    border: 1px solid $border-color-base;
    background-color: #fff;
    content: '';
    font-family: 'uf';
    display: inline-block;
    width: $checkbox-label-width;
    height: $checkbox-label-height;
    left: 0;
	top: 0;
    text-align: center;
    position: absolute;
}
&:after {
	content: '';
    font-family: 'uf';
    display: inline-block;
    width: $checkbox-label-width;
    height: $checkbox-label-height;
    left: 0;
    top: 0;
    text-align: center;
    position: absolute;
}
}
&.disabled .u-checkbox-label{
cursor: not-allowed;
// opacity: 0.5;
color: #909090;
&:before{
	border-color: #DFE1E6;
	color: #909090;
}
&:after{
	color: #c1c7d0;
}
}
112}
u-checkbox.u-checkbox-indeterminate {
.u-checkbox-label{
&:before{
	box-shadow: inset 0 0 0 10px #fff;
 		 	border-color: $border-color-base;
}
&:after{
	color: $checkbox-color;
	content: "\e6ce";
	line-height: $checkbox-label-height;
	font-size: 12px;
	font-weight: 600;
}
}
&.u-checkbox-inverse .u-checkbox-label{
&:before{
	-moz-box-shadow: inset 0 0 0 10px $checkbox-color;
	-webkit-box-shadow: inset 	0 0 0 10px $checkbox-color;
	box-shadow: inset 0 0 0 10px $checkbox-color;
	border-color:$checkbox-color;
}
&:after {
	color: #fff;
}
}
&.disabled.u-checkbox-inverse .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px #c1c7d0;
border-color:#c1c7d0;
}
142}
143
144// Modifier: `checkbox-success`
145// -------------------------
146
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:$border-color-base;
}
.u-checkbox-label:after{
	color: $checkbox-success-bg;
}
}
input[type='checkbox']:focus + .u-checkbox-label:before{
  	border-color:$checkbox-success-bg;
}
162}
163// Modifier: `checkbox-warning`
164// -------------------------
165
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:$border-color-base;
}
.u-checkbox-label:after{
	color: $checkbox-warning-bg;
}
}
input[type='checkbox']:focus + .u-checkbox-label:before{
  	border-color:$checkbox-warning-bg;
}
181}
182// Modifier: `checkbox-danger`
183// -------------------------
184
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:$border-color-base;
}
.u-checkbox-label:after{
	color: $checkbox-danger-bg;
}
}
input[type='checkbox']:focus + .u-checkbox-label:before{
  	border-color:$checkbox-danger-bg;
}
200}
201// Modifier: `checkbox-dark`
202// -------------------------
203
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:$border-color-base;
}
.u-checkbox-label:after{
	color: $checkbox-dark-bg;
}
}
input[type='checkbox']:focus + .u-checkbox-label:before{
  	border-color:$checkbox-dark-bg;
}
219}
220// Modifier: `checkbox-info`
221// -------------------------
222
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:$border-color-base;
}
.u-checkbox-label:after{
	color: $checkbox-info-bg;
}
}
input[type='checkbox']:focus + .u-checkbox-label:before{
  	border-color:$checkbox-info-bg;
}
238}

1	`@import "../node_modules/tinper-bee-core/scss/minxin-variables";`
2	`@import "../node_modules/tinper-bee-core/scss/minxin-mixins";`
3
4	`$checkbox-label-width:16px;`
5	`$checkbox-label-height:16px;`
6	`.u-checkbox {`
7	`display: inline-block;`
8	`position: relative;`
9	`margin-right: 24px;`
10	`height: $checkbox-label-height;`
11	`line-height: $checkbox-label-height;`
12	`font-size: 12px;`
13	`white-space: nowrap;`
14	`cursor: pointer;`
15	`outline: none;`
16	`position: relative;`
17	`line-height: 1;`
18	`vertical-align: middle;`
19	`input[type='checkbox']{`
20	`position: absolute;`
21	`z-index: 3;`
22	`cursor: pointer;`
23	`opacity: 0;`
24	`box-sizing: border-box;`
25	`padding: 0;`
26	`width: 100%;`
27	`height: 100%;`
28	`}`
29	`input[disabled]{`
30	`cursor: not-allowed;`
31	`}`
32	`input[type='checkbox']:focus + .u-checkbox-label:before{`
33	`border-color: $checkbox-color;`
34	`}`
35	`&.is-checked {`
36	`.u-checkbox-label:before{`
37	`-moz-box-shadow: inset 0 0 0 10px #fff;`
38	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
39	`box-shadow: inset 0 0 0 10px #fff;`
40	`border-color:$border-color-base;`
41	`}`
42	`.u-checkbox-label:after {`
43	`color: $checkbox-color;`
44	`content: "\e658";`
45	`line-height: $checkbox-label-height;`
46	`font-size: 12px;`
47	`font-weight: 600;`
48	`}`
49	`&.u-checkbox-inverse .u-checkbox-label{`
50	`&:before{`
51	`-moz-box-shadow: inset 0 0 0 10px $checkbox-color;`
52	`-webkit-box-shadow: inset 0 0 0 10px $checkbox-color;`
53	`box-shadow: inset 0 0 0 10px $checkbox-color;`
54	`border-color:$checkbox-color;`
55	`}`
56	`&:after {`
57	`color: #fff;`
58	`}`
59	`}`
60	`&.disabled.u-checkbox-inverse .u-checkbox-label:before {`
61	`box-shadow: inset 0 0 0 10px #c1c7d0;`
62	`border-color:#c1c7d0;`
63	`}`
64	`}`
65	`.u-checkbox-label {`
66	`cursor: pointer;`
67	`display: inline-block;`
68	`//position: relative;`
69	`padding-left: 25px;`
70	`line-height: $checkbox-label-height;`
71	`color: #212121;`
72	`&:before {`
73	`-moz-border-radius: $border-radius-base;`
74	`-webkit-border-radius: $border-radius-base;`
75	`border-radius: $border-radius-base;`
76	`border: 1px solid $border-color-base;`
77	`background-color: #fff;`
78	`content: '';`
79	`font-family: 'uf';`
80	`display: inline-block;`
81	`width: $checkbox-label-width;`
82	`height: $checkbox-label-height;`
83	`left: 0;`
84	`top: 0;`
85	`text-align: center;`
86	`position: absolute;`
87	`}`
88	`&:after {`
89	`content: '';`
90	`font-family: 'uf';`
91	`display: inline-block;`
92	`width: $checkbox-label-width;`
93	`height: $checkbox-label-height;`
94	`left: 0;`
95	`top: 0;`
96	`text-align: center;`
97	`position: absolute;`
98	`}`
99	`}`
100	`&.disabled .u-checkbox-label{`
101	`cursor: not-allowed;`
102	`// opacity: 0.5;`
103	`color: #909090;`
104	`&:before{`
105	`border-color: #DFE1E6;`
106	`color: #909090;`
107	`}`
108	`&:after{`
109	`color: #c1c7d0;`
110	`}`
111	`}`
112	`}`
113	`.u-checkbox.u-checkbox-indeterminate {`
114	`.u-checkbox-label{`
115	`&:before{`
116	`box-shadow: inset 0 0 0 10px #fff;`
117	`border-color: $border-color-base;`
118	`}`
119	`&:after{`
120	`color: $checkbox-color;`
121	`content: "\e6ce";`
122	`line-height: $checkbox-label-height;`
123	`font-size: 12px;`
124	`font-weight: 600;`
125	`}`
126	`}`
127	`&.u-checkbox-inverse .u-checkbox-label{`
128	`&:before{`
129	`-moz-box-shadow: inset 0 0 0 10px $checkbox-color;`
130	`-webkit-box-shadow: inset 0 0 0 10px $checkbox-color;`
131	`box-shadow: inset 0 0 0 10px $checkbox-color;`
132	`border-color:$checkbox-color;`
133	`}`
134	`&:after {`
135	`color: #fff;`
136	`}`
137	`}`
138	`&.disabled.u-checkbox-inverse .u-checkbox-label:before {`
139	`box-shadow: inset 0 0 0 10px #c1c7d0;`
140	`border-color:#c1c7d0;`
141	`}`
142	`}`
143
144	// Modifier: `checkbox-success`
145	`// -------------------------`
146
147	`.u-checkbox.u-checkbox-success {`
148	`&.is-checked {`
149	`.u-checkbox-label:before{`
150	`-moz-box-shadow: inset 0 0 0 10px #fff;`
151	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
152	`box-shadow: inset 0 0 0 10px #fff;`
153	`border-color:$border-color-base;`
154	`}`
155	`.u-checkbox-label:after{`
156	`color: $checkbox-success-bg;`
157	`}`
158	`}`
159	`input[type='checkbox']:focus + .u-checkbox-label:before{`
160	`border-color:$checkbox-success-bg;`
161	`}`
162	`}`
163	// Modifier: `checkbox-warning`
164	`// -------------------------`
165
166	`.u-checkbox.u-checkbox-warning {`
167	`&.is-checked {`
168	`.u-checkbox-label:before{`
169	`-moz-box-shadow: inset 0 0 0 10px #fff;`
170	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
171	`box-shadow: inset 0 0 0 10px #fff;`
172	`border-color:$border-color-base;`
173	`}`
174	`.u-checkbox-label:after{`
175	`color: $checkbox-warning-bg;`
176	`}`
177	`}`
178	`input[type='checkbox']:focus + .u-checkbox-label:before{`
179	`border-color:$checkbox-warning-bg;`
180	`}`
181	`}`
182	// Modifier: `checkbox-danger`
183	`// -------------------------`
184
185	`.u-checkbox.u-checkbox-danger {`
186	`&.is-checked {`
187	`.u-checkbox-label:before{`
188	`-moz-box-shadow: inset 0 0 0 10px #fff;`
189	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
190	`box-shadow: inset 0 0 0 10px #fff;`
191	`border-color:$border-color-base;`
192	`}`
193	`.u-checkbox-label:after{`
194	`color: $checkbox-danger-bg;`
195	`}`
196	`}`
197	`input[type='checkbox']:focus + .u-checkbox-label:before{`
198	`border-color:$checkbox-danger-bg;`
199	`}`
200	`}`
201	// Modifier: `checkbox-dark`
202	`// -------------------------`
203
204	`.u-checkbox.u-checkbox-dark {`
205	`&.is-checked {`
206	`.u-checkbox-label:before{`
207	`-moz-box-shadow: inset 0 0 0 10px #fff;`
208	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
209	`box-shadow: inset 0 0 0 10px #fff;`
210	`border-color:$border-color-base;`
211	`}`
212	`.u-checkbox-label:after{`
213	`color: $checkbox-dark-bg;`
214	`}`
215	`}`
216	`input[type='checkbox']:focus + .u-checkbox-label:before{`
217	`border-color:$checkbox-dark-bg;`
218	`}`
219	`}`
220	// Modifier: `checkbox-info`
221	`// -------------------------`
222
223	`.u-checkbox.u-checkbox-info {`
224	`&.is-checked {`
225	`.u-checkbox-label:before{`
226	`-moz-box-shadow: inset 0 0 0 10px #fff;`
227	`-webkit-box-shadow: inset 0 0 0 10px #fff;`
228	`box-shadow: inset 0 0 0 10px #fff;`
229	`border-color:$border-color-base;`
230	`}`
231	`.u-checkbox-label:after{`
232	`color: $checkbox-info-bg;`
233	`}`
234	`}`
235	`input[type='checkbox']:focus + .u-checkbox-label:before{`
236	`border-color:$checkbox-info-bg;`
237	`}`
238	`}`