/**
* Copyright © 2016-2018 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "~compass-sass-mixins/lib/compass";
$error-height: 14px;
$background-color: #e6e7e8;
.tb-round-switch {
width:100%;
height:100%;
background: $background-color;
.title-container {
.switch-title {
color: #757575;
font-weight: 500;
white-space: nowrap;
}
}
.error-container {
position:absolute;
top: 1%;
left: 0;
right: 0;
z-index:4;
height: $error-height;
.switch-error {
color: #ff3315;
white-space: nowrap;
}
}
#text-measure {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
#switch-container {
padding: 10px;
.switch {
cursor: pointer;
position: relative;
background:#ddd;
background: -owg-linear-gradient(270deg, #bbb, #ddd);
background: -webkit-linear-gradient(270deg, #bbb, #ddd);
background: -moz-linear-gradient(270deg, #bbb, #ddd);
background: -o-linear-gradient(270deg, #bbb, #ddd);
-pie-background: -pie-linear-gradient(270deg, #bbb, #ddd);
background: linear-gradient(180deg, #bbb, #ddd);
border-radius:130px;
@include box-sizing(border-box);
@include box-shadow(
0px 0px 0px 8px rgba(0,0,0,.1)
,0px 0px 3px 1px rgba(0,0,0,.1)
,inset 0 8px 3px -8px rgba(255,255,255,.4));
height: 260px;
min-height: 260px;
padding: 25px;
width: 260px;
min-width: 260px;
color: #424242;
font-family:sans-serif;
font-size:48px;
input {
display:none
}
.on,.off {
position:absolute;
text-align:center;
@include text-shadow(1px 1px 4px #4a4a4a);
width:100%;
}
.on {
color:#444;
top:10px;
@include transition(all 0.1s);
font-family:sans-serif
}
.off {
bottom:5px;
@include transition(all 0.1s);
@include transform(scaleY(0.85));
}
.but {
cursor: pointer;
background-color:#d8d8d8;
border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
border-bottom-width:0px;
@include box-shadow(inset 8px 6px 5px -7px #a2a2a2,
inset -8px 6px 5px -7px #a2a2a2,
inset 0 -3px 2px -2px rgba(200, 200, 200, 0.5),
0 3px 3px -2px #ffffff,
inset 0 -230px 60px -200px rgba(255, 255, 255, 0.2),
inset 0 220px 40px -200px rgba(0, 0, 0, 0.3));
display:block;
font-size:48px;
height:178px;
position:relative;
@include transition(all 0.2s);
width:200px;
}
.back {
cursor: pointer;
background-color: #888787;
background-image: -owg-linear-gradient(0deg, transparent 30%, transparent 70%), -owg-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 70%), -webkit-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -moz-linear-gradient(0deg, transparent 30%, transparent 70%), -moz-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: -o-linear-gradient(0deg, transparent 30%, transparent 70%), -o-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
border-radius:105px;
@include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, 0.3),
-30px 30px 30px -20px rgba(58, 58, 58, 0.3),
0 30px 30px 0px rgba(16, 16, 16, 0.3),
inset 0 -1px 0 0 #484848);
@include box-sizing(border-box);
height:210px;
padding:4px 4px;
@include transition(all 0.2s);
width:210px;
}
input:checked + .back .on,input:checked + .back .off{
@include text-shadow(1px 1px 4px #4a4a4a);
}
input:checked + .back .on{
color:#4c4c4c;
top:10px;
@include transform(scaleY(0.85));
}
input:checked + .back .off{
color:#444;
bottom:5px;
@include transform(scaleY(1));
}
input:checked + .back .but{
background:#dcdcdc;
background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
background-image: -webkit-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
background-image: -moz-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
background-image: -o-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;
@include box-shadow(inset 8px -4px 5px -7px #a9a9a9,
inset -8px -4px 5px -7px #808080,
0 -3px 8px -4px rgba(50, 50, 50, 0.4),
inset 0 3px 4px -2px #9c9c9c,
inset 0 280px 40px -200px rgba(0, 0, 0, 0.2),
inset 0 -200px 40px -200px rgba(180, 180, 180, 0.2));
margin-top:20px;
}
input:checked + .back{
background-image: -owg-linear-gradient(90deg, #868686 30%, transparent 70%), -owg-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -webkit-linear-gradient(90deg, #868686 30%, transparent 70%), -webkit-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -moz-linear-gradient(90deg, #868686 30%, transparent 70%), -moz-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: -o-linear-gradient(90deg, #868686 30%, transparent 70%), -o-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
@include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, 0.1),
-30px 30px 30px -20px rgba(111, 111, 111, 0.1),
0 30px 30px 0px rgba(0, 0, 0, 0.2),
inset 0 1px 2px 0 rgba(167, 167, 167, 0.6));
padding:2px 4px;
}
}
}
}