Skip to content

Commit 0b1e20f

Browse files
gfazioligfazioli
committed
fix background
1 parent 5ed96e2 commit 0b1e20f

File tree

2 files changed

+67
-58
lines changed

2 files changed

+67
-58
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-toggle-component",
3-
"version": "2.0.1",
3+
"version": "2.0.2",
44
"private": false,
55
"description": "A React UI Component to display an awesome Toggle Button control",
66
"main": "dist/index.js",

‎src/components/Toggle/index.tsx‎

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {FunctionComponent, useRef} from "react";
1+
import React, { FunctionComponent, useRef } from "react";
22
import styled from "styled-components";
33
import defaultTheme from "../../theme/theme";
44

@@ -58,11 +58,11 @@ interface Props {
5858
* Height of component
5959
*/
6060
height?: string;
61-
61+
6262
// ---------------------------------------------------------------
6363
// Border
6464
// ---------------------------------------------------------------
65-
65+
6666
/**
6767
* Border width
6868
*/
@@ -83,7 +83,7 @@ interface Props {
8383
// ---------------------------------------------------------------
8484
// Background color
8585
// ---------------------------------------------------------------
86-
86+
8787
/**
8888
* Background color for both knob position. This props will override leftBackgroundColor and rightBackgroundColor props
8989
*/
@@ -155,115 +155,124 @@ const ToggleContainer = styled.label``;
155155
const ToggleBase = styled.span<Props>`
156156
position: relative;
157157
box-sizing: border-box;
158-
display:inline-grid;
158+
display: inline-grid;
159159
align-items: center;
160160
width: ${p => p.width || (p.theme && p.theme.width) || defaultTheme.width};
161161
height: ${p => p.height || (p.theme && p.theme.height) || defaultTheme.height};
162162
vertical-align: text-top;
163163
margin: 0 4px;
164-
165-
input[type="checkbox"] {
166-
position: absolute;
167-
margin-left: -9999px;
168-
visibility: hidden;
169-
164+
165+
input[type="checkbox"] {
166+
position: absolute;
167+
margin-left: -9999px;
168+
visibility: hidden;
169+
170170
// off state
171171
& + label {
172-
display:inline-grid;
172+
display: inline-grid;
173173
box-sizing: border-box;
174174
align-items: center;
175175
outline: none;
176176
user-select: none;
177177
width: ${p => p.width || (p.theme && p.theme.width) || defaultTheme.width};
178178
height: ${p => p.height || (p.theme && p.theme.height) || defaultTheme.height};
179179
background-color: ${p =>
180-
p.borderColor || p.leftBorderColor || (p.theme && p.theme.leftBorderColor) || defaultTheme.leftBorderColor};
181-
border-radius:${p => p.radius || (p.theme && p.theme.radius) || defaultTheme.radius};
182-
cursor:pointer;
183-
transition : background ease-out 0.3s;
184-
180+
p.borderColor || p.leftBorderColor || (p.theme && p.theme.leftBorderColor) || defaultTheme.leftBorderColor};
181+
border-radius: ${p => p.radius || (p.theme && p.theme.radius) || defaultTheme.radius};
182+
cursor: pointer;
183+
transition: background ease-out 0.3s;
184+
185185
&:before {
186186
content: "";
187187
display: block;
188188
position: absolute;
189-
border-radius:${p => p.radiusBackground || (p.theme && p.theme.radiusBackground) || defaultTheme.radiusBackground};
190-
width: calc(${p => p.width || (p.theme && p.theme.width) || defaultTheme.width} - 2*${p =>
191-
p.borderWidth || (p.theme && p.theme.borderWidth) ||
192-
defaultTheme.borderWidth});
193-
height: calc(${p => p.height || (p.theme && p.theme.height) || defaultTheme.height} - 2*${p =>
194-
p.borderWidth || (p.theme && p.theme.borderWidth) ||
195-
defaultTheme.borderWidth});
196-
background-color: ${p => p.backgroundColor || (p.theme && p.theme.backgroundColor) || defaultTheme.backgroundColor};
197-
left:${p => p.borderWidth || (p.theme && p.theme.borderWidth) || defaultTheme.borderWidth};
189+
border-radius: ${p =>
190+
p.radiusBackground || (p.theme && p.theme.radiusBackground) || defaultTheme.radiusBackground};
191+
width: calc(
192+
${p => p.width || (p.theme && p.theme.width) || defaultTheme.width} - 2 *
193+
${p => p.borderWidth || (p.theme && p.theme.borderWidth) || defaultTheme.borderWidth}
194+
);
195+
height: calc(
196+
${p => p.height || (p.theme && p.theme.height) || defaultTheme.height} - 2 *
197+
${p => p.borderWidth || (p.theme && p.theme.borderWidth) || defaultTheme.borderWidth}
198+
);
199+
background-color: ${p =>
200+
p.backgroundColor ||
201+
p.leftBackgroundColor ||
202+
(p.theme && p.theme.leftBackgroundColor) ||
203+
defaultTheme.leftBackgroundColor};
204+
left: ${p => p.borderWidth || (p.theme && p.theme.borderWidth) || defaultTheme.borderWidth};
198205
}
199206
200207
&:after {
201-
display:block;
202-
position:absolute;
208+
display: block;
209+
position: absolute;
203210
content: "";
204211
width: ${p => p.knobWidth || (p.theme && p.theme.knobWidth) || defaultTheme.knobWidth};
205212
height: ${p => p.knobHeight || (p.theme && p.theme.knobHeight) || defaultTheme.knobHeight};
206213
border-radius: ${p => p.knobRadius || (p.theme && p.theme.knobRadius) || defaultTheme.knobRadius};
207214
background-color: ${p =>
208-
p.knobColor || p.leftKnobColor || (p.theme && p.theme.leftKnobColor) || defaultTheme.leftKnobColor};
209-
transition : all ease-out 0.4s;
210-
margin-left:${p => p.knobGap || (p.theme && p.theme.knobGap) || defaultTheme.knobGap};
215+
p.knobColor || p.leftKnobColor || (p.theme && p.theme.leftKnobColor) || defaultTheme.leftKnobColor};
216+
transition: all ease-out 0.4s;
217+
margin-left: ${p => p.knobGap || (p.theme && p.theme.knobGap) || defaultTheme.knobGap};
211218
}
212219
}
213-
220+
214221
// on state
215222
&:checked {
216223
& + label {
217224
background-color: ${p =>
218-
p.borderColor ||
219-
p.rightBorderColor ||
220-
(p.theme && p.theme.rightBorderColor) ||
221-
defaultTheme.rightBorderColor};
222-
225+
p.borderColor ||
226+
p.rightBorderColor ||
227+
(p.theme && p.theme.rightBorderColor) ||
228+
defaultTheme.rightBorderColor};
229+
223230
&:before {
224231
background-color: ${p =>
225-
p.backgroundColor ||
226-
p.rightBackgroundColor ||
227-
(p.theme && p.theme.rightBackgroundColor) ||
228-
defaultTheme.rightBackgroundColor};
232+
p.backgroundColor ||
233+
p.rightBackgroundColor ||
234+
(p.theme && p.theme.rightBackgroundColor) ||
235+
defaultTheme.rightBackgroundColor};
229236
}
230-
237+
231238
&:after {
232-
margin-left:calc(100% - ${p =>
233-
p.knobWidth || (p.theme && p.theme.knobWidth) || defaultTheme.knobWidth} - ${p => p.knobGap || (p.theme && p.theme.knobGap) || defaultTheme.knobGap});
234-
transition : all ease-out 0.2s;
239+
margin-left: calc(
240+
100% - ${p => p.knobWidth || (p.theme && p.theme.knobWidth) || defaultTheme.knobWidth} -
241+
${p => p.knobGap || (p.theme && p.theme.knobGap) || defaultTheme.knobGap}
242+
);
243+
transition: all ease-out 0.2s;
235244
background-color: ${p =>
236-
p.knobColor || p.rightKnobColor || (p.theme && p.theme.rightKnobColor) || defaultTheme.rightKnobColor};
245+
p.knobColor || p.rightKnobColor || (p.theme && p.theme.rightKnobColor) || defaultTheme.rightKnobColor};
237246
}
238247
}
239-
248+
240249
&:disabled {
241250
& + label {
242251
background-color: ${p =>
243-
p.backgroundColorDisabled ||
244-
(p.theme && p.theme.backgroundColorDisabled) ||
245-
defaultTheme.backgroundColorDisabled};
252+
p.backgroundColorDisabled ||
253+
(p.theme && p.theme.backgroundColorDisabled) ||
254+
defaultTheme.backgroundColorDisabled};
246255
&:after {
247256
box-shadow: none;
248257
}
249258
}
250259
}
251260
}
252-
261+
253262
// disabled
254263
&:disabled {
255264
& + label {
256265
background-color: ${p =>
257-
p.backgroundColorDisabled ||
258-
(p.theme && p.theme.backgroundColorDisabled) ||
259-
defaultTheme.backgroundColorDisabled};
260-
cursor:default;
266+
p.backgroundColorDisabled ||
267+
(p.theme && p.theme.backgroundColorDisabled) ||
268+
defaultTheme.backgroundColorDisabled};
269+
cursor: default;
261270
&:after {
262271
box-shadow: none;
263272
background-color: ${p =>
264273
p.backgroundColorDisabled ||
265274
(p.theme && p.theme.backgroundColorDisabled) ||
266-
defaultTheme.backgroundColorDisabled};;
275+
defaultTheme.backgroundColorDisabled};
267276
}
268277
}
269278
}
@@ -315,7 +324,7 @@ const Toggle: FunctionComponent<Props> = props => {
315324
value={value}
316325
disabled={disabled}
317326
/>
318-
<ToggleContainer htmlFor={name}/>
327+
<ToggleContainer htmlFor={name} />
319328
</ToggleBase>
320329
);
321330
};

0 commit comments

Comments
 (0)