Alessandro Francia
400 lines
9.4 KiB
Plaintext
400 lines
9.4 KiB
Plaintext
// out: false, sourceMap: false, main: ../style.less
|
|
@import "colors.less";
|
|
@button-height: 48px;
|
|
@button-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
|
@button-success-color-from: #1756ad;
|
|
@button-success-color-to: #002680;
|
|
@button-machine-color-from : #657178;
|
|
@button-machine-color-to : #404040;
|
|
button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
button[disabled] {
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
button.btn[disabled] {
|
|
border-radius: 2px;
|
|
border-radius: 2px;
|
|
background-color: #dddddd;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
color: @color-warm-grey;
|
|
&:hover {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.btn-demo {
|
|
color: #fff;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button.btn {
|
|
height: @button-height;
|
|
box-sizing: border-box;
|
|
border-radius: 2px;
|
|
margin: 0 8px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
box-shadow: @button-shadow;
|
|
padding: 0 20px;
|
|
border: none;
|
|
background-image: linear-gradient(to bottom, @color-white2, @color-silver);
|
|
color: @color-darkish-blue;
|
|
&:active {
|
|
background-image: linear-gradient(to bottom, @color-silver, @color-white2);
|
|
border: none !important;
|
|
box-shadow: inset @button-shadow !important;
|
|
}
|
|
&:hover {
|
|
box-shadow: inset 0px 0px 0px 2px #8eb5e2;
|
|
}
|
|
&.dark-blue {
|
|
background-color: @color-blue;
|
|
color: white;
|
|
}
|
|
|
|
&.btn-danger{
|
|
color:@color-scarlet;
|
|
}
|
|
|
|
button.dark-blue:active {
|
|
background-color: @color-darkish-blue-two;
|
|
}
|
|
}
|
|
|
|
button.btn.btn-success {
|
|
background-image: linear-gradient(to bottom, @button-success-color-from, @button-success-color-to);
|
|
color: white;
|
|
border: #001e48 1px solid;
|
|
&:active {
|
|
background-image: linear-gradient(to bottom, @button-success-color-to, @button-success-color-from) !important;
|
|
box-shadow: inset @button-shadow;
|
|
border: #001e48 1px solid !important;
|
|
color: #8eb5e2
|
|
}
|
|
}
|
|
|
|
button.btn.btn-success[disabled] {
|
|
border-radius: 2px;
|
|
border-radius: 2px;
|
|
box-shadow: none;
|
|
color: @color-warm-grey;
|
|
border: none;
|
|
&:hover {
|
|
box-shadow: none !important;
|
|
background-image: linear-gradient(to bottom, @button-success-color-from, @button-success-color-to) !important;
|
|
}
|
|
}
|
|
|
|
button.under {
|
|
width: 208px;
|
|
height: 45px;
|
|
object-fit: contain;
|
|
border-radius: 100px;
|
|
background-image: linear-gradient(to bottom, @button-machine-color-from, @button-machine-color-to);
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
|
border: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
img {
|
|
max-width: 178px;
|
|
max-height: 45px;
|
|
}
|
|
&.pressed:active, &:active{
|
|
background-image: none;
|
|
background-color: @button-machine-color-to;
|
|
}
|
|
&.pressed {
|
|
background-image: linear-gradient(to bottom, @button-machine-color-to, @button-machine-color-from);
|
|
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
|
|
button.square {
|
|
// width: @button-height;
|
|
// height: @button-height;
|
|
border-radius: 2px !important; // background-color: #4b4b4b;
|
|
&:hover {
|
|
background-color: @button-success-color-to;
|
|
}
|
|
}
|
|
|
|
.btn-spacer {
|
|
margin: 0 8px;
|
|
padding: 0 4px;
|
|
display: flex;
|
|
&.collapsed{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.btn-group {
|
|
margin: 0 8px;
|
|
padding: 0;
|
|
display: flex;
|
|
button {
|
|
border-radius: 0 !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
&:first-child {
|
|
border-top-left-radius: 2px !important;
|
|
border-bottom-left-radius: 2px !important;
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: 2px !important;
|
|
border-bottom-right-radius: 2px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.soft {
|
|
width: 96px;
|
|
height: 48px;
|
|
margin: 4px;
|
|
background-image: linear-gradient(to bottom, #f1f1f1, @color-silver);
|
|
box-sizing: border-box;
|
|
border: none;
|
|
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
|
color: @color-darkish-blue;
|
|
font-size: 14px;
|
|
border-radius: 2px;
|
|
|
|
|
|
&.icon{
|
|
display: flex;
|
|
padding: 1px 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
&.axes{
|
|
width: 54px;
|
|
font-size: 1.8em;
|
|
display: block;
|
|
font-weight: 600;
|
|
padding: 0px;
|
|
}
|
|
|
|
img {
|
|
width: 18px;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
display: inline;
|
|
vertical-align: bottom;
|
|
margin-right: 6px;
|
|
}
|
|
&.active {
|
|
background-image: linear-gradient(to bottom, @color-cerulean, @color-clear-blue) !important;
|
|
color: white !important;
|
|
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
|
img{
|
|
filter: grayscale(100%) invert(100) saturate(200);
|
|
}
|
|
}
|
|
&:active{
|
|
background-image: linear-gradient(to bottom, @color-silver, #f1f1f1);
|
|
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
&.spaced {
|
|
margin: 4px 8px;
|
|
}
|
|
&[disabled]:not(.readonly) {
|
|
background-color: #dddddd !important;
|
|
// background-image: none !important;
|
|
box-shadow: none !important;
|
|
color: @color-warm-grey;
|
|
img{
|
|
filter: grayscale(100%) invert(44%);
|
|
}
|
|
}
|
|
&.square {
|
|
width: 48px;
|
|
}
|
|
i.fa {
|
|
font-size: 24px;
|
|
}
|
|
&.readonly{
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border: 3px solid #4e585e;
|
|
color: #ddd;
|
|
cursor: default;
|
|
}
|
|
&.inverter {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border: 3px solid #657178;
|
|
color: white
|
|
}
|
|
}
|
|
|
|
.togglebutton {
|
|
vertical-align: middle;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.togglebutton,
|
|
.togglebutton label,
|
|
.togglebutton input,
|
|
.togglebutton .toggle {
|
|
user-select: none;
|
|
}
|
|
|
|
.togglebutton label {
|
|
cursor: pointer;
|
|
color: rgba(0, 0, 0, 0.26);
|
|
}
|
|
|
|
.form-group.is-focused .togglebutton label {
|
|
color: rgba(0, 0, 0, 0.26);
|
|
}
|
|
|
|
.form-group.is-focused .togglebutton label:hover,
|
|
.form-group.is-focused .togglebutton label:focus {
|
|
color: rgba(0, 0, 0, .54);
|
|
}
|
|
|
|
fieldset[disabled] .form-group.is-focused .togglebutton label {
|
|
color: rgba(0, 0, 0, 0.26);
|
|
}
|
|
|
|
.togglebutton label input[type=checkbox] {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.togglebutton label .toggle {
|
|
text-align: left;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.togglebutton label .toggle,
|
|
.togglebutton label input[type=checkbox][disabled]+.toggle {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 70px;
|
|
height: 24px;
|
|
background-color: #ddd;
|
|
border-radius: 15px;
|
|
margin-right: 15px;
|
|
transition: background 0.3s ease;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.5);
|
|
line-height: 24px;
|
|
text-align: center;
|
|
color: #979797;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.togglebutton label .toggle:after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-image: linear-gradient(to bottom, #1756ad, #002680);
|
|
border-radius: 20px;
|
|
position: relative;
|
|
box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.4);
|
|
left: 1px;
|
|
top: 2px;
|
|
position: absolute;
|
|
border: none;
|
|
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
|
}
|
|
|
|
.togglebutton label input[type=checkbox][disabled]+.toggle:after,
|
|
.togglebutton label input[type=checkbox][disabled]:checked+.toggle:after {
|
|
background-color: #BDBDBD;
|
|
}
|
|
|
|
.togglebutton label input[type=checkbox]+.toggle:active:after,
|
|
.togglebutton label input[type=checkbox][disabled]+.toggle:active:after {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.6), 0 0 0 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.togglebutton label input[type=checkbox]:checked+.toggle:after {
|
|
left: 48px;
|
|
}
|
|
|
|
.togglebutton label input[type=checkbox]:checked+.toggle {
|
|
content: "";
|
|
background-image: linear-gradient(to bottom, #3fa4ff, #1791ff);
|
|
color: #fff;
|
|
}
|
|
|
|
.custom-checkbox {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: flex;
|
|
// margin-left: 16px;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.custom-checkbox label {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 22px;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: @color-white2;
|
|
box-shadow: inset 0 1px 3px @color-black-50;
|
|
border-radius: 2px;
|
|
}
|
|
.custom-checkbox label:after {
|
|
opacity: 0;
|
|
content: '';
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 9px;
|
|
background: transparent;
|
|
top: 3px;
|
|
left: 2px;
|
|
border: 5px solid #1791ff;
|
|
border-top: none;
|
|
border-right: none;
|
|
transform: rotate(-48deg);
|
|
}
|
|
.custom-checkbox input[type=checkbox]:checked+label{
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 22px;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: @color-white2;
|
|
border: solid 1px @color-clear-blue;
|
|
border-radius: 2px;
|
|
}
|
|
.custom-checkbox input[type=checkbox]:checked+label:after {
|
|
opacity: 1;
|
|
}
|
|
.custom-checkbox-label {
|
|
display: flex;
|
|
margin-left: 8px;
|
|
font-size: 18px;
|
|
line-height: 1.11;
|
|
color: @color-greyish-brown;
|
|
}
|
|
|
|
// .togglebutton label input[type=checkbox]:checked+.toggle:after {
|
|
// border-color: #9c27b0;
|
|
// }
|
|
// .togglebutton label input[type=checkbox]:checked+.toggle:active:after {
|
|
// box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(156, 39, 176, 0.1);
|
|
// }
|