diff options
Diffstat (limited to 'client/components/forms')
-rw-r--r-- | client/components/forms/forms.styl | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl index 646da657..4c8ff7b0 100644 --- a/client/components/forms/forms.styl +++ b/client/components/forms/forms.styl @@ -630,6 +630,58 @@ button a, .quiet color: white +// Material Design Toggle Switch +.material-toggle-switch + display: flex + +.toggle-label + position: relative + display: block + height: 20px + width: 44px + background-color: #a6a6a6 + border-radius: 100px + cursor: pointer + transition: all 0.3s ease + + &:after + position: absolute + left: -2px + top: -3px + display: block + width: 26px + height: 26px + border-radius: 100px + background-color: #fff + box-shadow: 0px 3px 3px rgba(0,0,0,0.05) + content: '' + transition: all 0.3s ease + + &:active + &:after + transform: scale(1.15, 0.85) + +.toggle-switch:checked ~ .toggle-label + background-color: #6fbeb5 + + &:after + left: 20px + background-color: #179588 + +.toggle-switch:disabled ~ .toggle-label + background-color: #d5d5d5 + pointer-events: none + + &after + background-color: #bcbdbc + +.toggle-switch + display: none + +.toggle-switch-title + margin: 0 0.5em + display: flex + @media screen and (max-width: 800px) .edit-controls, .add-controls |