diff options
author | Einav Weiss Keidar <einavw@amdocs.com> | 2018-08-13 16:19:46 +0300 |
---|---|---|
committer | Avi Gaffa <avi.gaffa@amdocs.com> | 2019-02-11 13:50:22 +0000 |
commit | 1801b24389baa8e3f7298ff2c41e2512b19c1290 (patch) | |
tree | d3d2a15f53aa28698280d609548298d177f9280d /openecomp-ui/resources/scss/components/_toggleInput.scss | |
parent | af8e36eb7f43803bd9cf40e9b46a0c0c8f47c781 (diff) |
react 16 upgrade
Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/components/_toggleInput.scss')
-rw-r--r-- | openecomp-ui/resources/scss/components/_toggleInput.scss | 119 |
1 files changed, 60 insertions, 59 deletions
diff --git a/openecomp-ui/resources/scss/components/_toggleInput.scss b/openecomp-ui/resources/scss/components/_toggleInput.scss index fcf0902adf..6bcf3a359b 100644 --- a/openecomp-ui/resources/scss/components/_toggleInput.scss +++ b/openecomp-ui/resources/scss/components/_toggleInput.scss @@ -1,62 +1,63 @@ .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; - } + $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; - } + 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; + } } |