mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-06 18:45:31 +02:00
Code Issues Releases Wiki Activity

add switch component

Browse Source
This commit is contained in:
Kushagra Gour 2018-08-14 23:56:46 +05:30
parent 53193bf56b
commit ec4ce2be29
2 changed files with 84 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Settings.jsx
View File

@ -1,5 +1,6 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import { editorThemes } from '../editorThemes'; import { editorThemes } from '../editorThemes';
import Switch from './Switch';
function CheckboxSetting({ function CheckboxSetting({
title, title,
@ -10,18 +11,19 @@ function CheckboxSetting({
showWhenExtension showWhenExtension
}) { }) {
return ( return (
<label // <label
class={`line ${showWhenExtension ? 'show-when-extension' : ''} `} // class={`line ${showWhenExtension ? 'show-when-extension' : ''} `}
title={title} // title={title}
> // >
<input // <input
type="checkbox" // type="checkbox"
checked={pref} // checked={pref}
onChange={onChange} // onChange={onChange}
data-setting={name} // data-setting={name}
/>{' '} // />{' '}
{label} // {label}
</label> // </label>
<Switch checked={pref}>{label}</Switch>
); );
} }
export default class Settings extends Component { export default class Settings extends Component {
@ -208,7 +210,7 @@ export default class Settings extends Component {
</label> </label>
</div> </div>
</div> </div>
<div class="ml-2 ml-0--mobile"> <div class="flex-grow ml-2 ml-0--mobile">
<CheckboxSetting <CheckboxSetting
name="lineWrap" name="lineWrap"
title="Toggle wrapping of long sentences onto new line" title="Toggle wrapping of long sentences onto new line"

69
src/style.css
View File

@ -249,6 +249,75 @@ a > svg {
bottom: 0; bottom: 0;
} }
.check-switch {
display: block;
overflow: hidden;
padding: 0.5em;
position: relative;
}
.check-switch:hover {
background: rgba(0, 0, 0, 0.1);
}
.check-switch .check-switch__toggle:after {
background: #fff;
border-radius: 100%;
height: 1.5em;
right: 1.5em;
transition: right 0.1825s ease-in-out;
width: 1.5em;
}
.check-switch .check-switch__toggle:before,
.check-switch .check-switch__toggle:after {
border: 1px solid #565656;
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.check-switch .check-switch__toggle:before {
background: #eee;
border-radius: 1.75em;
height: 1.75em;
right: 0.25em;
transition: background 0.2s ease-in-out;
width: 2.75em;
}
.check-switch input:not([role='button']) {
pointer-events: none;
}
.check-switch input {
height: 100%;
left: 0;
opacity: 0.0001;
position: absolute;
top: 0;
width: 100%;
}
.check-switch__status {
text-transform: uppercase;
font-size: 14px;
}
.check-switch input:focus + .check-switch__toggle:before {
outline: 2px solid;
outline-color: var(--color-focus-outline);
}
.check-switch input:checked + .check-switch__toggle:after {
right: 0.25em;
}
.check-switch input:checked + .check-switch__toggle:before {
background: #61ad1c;
}
.btn { .btn {
display: inline-block; display: inline-block;
color: var(--color-button); color: var(--color-button);