diff options
| author |   Michael Lando <ml636r@att.com> | 2017-02-19 12:57:33 +0200 |
|---|---|---|
| committer | Michael Lando <ml636r@att.com> | 2017-02-19 13:47:13 +0200 |
| commit | efa037d34be7b1570efdc767c79fad8d4005f10e (patch) | |
| tree | cf1036ba2728dea8a61492b678fa91954e629403 /openecomp-ui/resources/scss/components/_toggleInput.scss | |
| parent | f5f13c4f6b6fe3b4d98e349dfd7db59339803436 (diff) | |
Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'openecomp-ui/resources/scss/components/_toggleInput.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/components/_toggleInput.scss | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/components/_toggleInput.scss b/openecomp-ui/resources/scss/components/_toggleInput.scss new file mode 100644 index 0000000000..fcf0902adf --- /dev/null +++ b/openecomp-ui/resources/scss/components/_toggleInput.scss @@ -0,0 +1,62 @@ +.toggle-input-wrapper { + $toggle-width: 40px; + $toggle-height: 20px; + display: table; + .toggle-switch, .toggle-input-label { + display: table-cell; + vertical-align: middle; + padding-left: 10px; + } + .toggle { + position: absolute; + margin-left: -9999px; + visibility: hidden; + } + .toggle + label { + @extend %noselect; + display: block; + position: relative; + cursor: pointer; + outline: none; + } + + input.toggle-round-flat + label { + padding: 1px; + width: $toggle-width; + height: $toggle-height; + background-color: $dark-gray; + border-radius: $toggle-height; + transition: background 0.4s; + } + input.toggle-round-flat + label:before, + input.toggle-round-flat + label:after { + display: block; + position: absolute; + content: ""; + } + input.toggle-round-flat + label:before { + top: 1px; + left: 1px; + bottom: 1px; + right: 1px; + background-color: $white; + border-radius: $toggle-height; + transition: background 0.4s; + } + input.toggle-round-flat + label:after { + top: 4px; + left: 4px; + bottom: 4px; + width: $toggle-height - 8; + background-color: $dark-gray; + border-radius: $toggle-height - 8; + transition: margin 0.4s, background 0.4s; + } + input.toggle-round-flat:checked + label { + background-color: $link-blue; + } + input.toggle-round-flat:checked + label:after { + margin-left: $toggle-height; + background-color: $link-blue; + } +} |