196 lines
7.4 KiB
SCSS
196 lines
7.4 KiB
SCSS
|
/**
|
||
|
|
* Copyright © 2016-2017 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|