Paolo Possanzini
118 lines
3.8 KiB
Plaintext
118 lines
3.8 KiB
Plaintext
// out: false, sourceMap: false, main: ../style.less
|
|
@import "colors.less";
|
|
@footer-height: 80px;
|
|
@footer-button-size: 63px;
|
|
@footer-button-big-size: 82px;
|
|
@footer-button-ball-size: 10px;
|
|
@footer-button-halfball-size: @footer-button-ball-size / 2;
|
|
@footer-button-margin: 19px;
|
|
@footer-padding: 0 0 9px 8px;
|
|
@footer-machine-area-size: 300px;
|
|
footer {
|
|
position: absolute;
|
|
z-index: 300;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
.machine-area {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: @footer-machine-area-size;
|
|
height: @footer-height;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
background-image: @color-footer-background-image;
|
|
box-shadow: @color-footer-box-shadow;
|
|
right: @footer-machine-area-size;
|
|
margin: 0;
|
|
border-top-right-radius: @footer-height / 2;
|
|
border-bottom-right-radius: @footer-height /2;
|
|
line-height: @footer-height;
|
|
padding: @footer-padding;
|
|
height: @footer-height;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
button {
|
|
cursor: pointer;
|
|
display: flex;
|
|
margin-left: @footer-button-margin;
|
|
margin-right: @footer-button-margin;
|
|
border: none;
|
|
width: @footer-button-size;
|
|
height: @footer-button-size;
|
|
border-radius: @footer-button-size /2;
|
|
background-image: @color-button-oval-background-image;
|
|
box-shadow: @color-button-oval-box-shadow;
|
|
}
|
|
button.main-production {
|
|
background-image: url(../icons/png/main-production-96x96.png);
|
|
background-size: cover;
|
|
}
|
|
button.tools-manager {
|
|
background-image: url(../icons/png/main-tooling-96x96.png);
|
|
background-size: cover;
|
|
}
|
|
button.report-manager{
|
|
background-image: url(../icons/png/main-reports-96x96.png);
|
|
background-size: cover;
|
|
}
|
|
button.alarms-manager{
|
|
background-image: url(../icons/png/main-alarms-96x96.png);
|
|
background-size: cover;
|
|
}
|
|
button.maintenance-manager{
|
|
background-image: url(../icons/png/main-maintenance-96x96.png);
|
|
background-size: cover;
|
|
}
|
|
button.utilities{
|
|
background-image: url(../icons/png/utilities-96x96.png);
|
|
background-size: cover;
|
|
}
|
|
button.scada{
|
|
background-image: url(../icons/png/scada-96x96.png);
|
|
background-size: cover;
|
|
}
|
|
// button:hover,
|
|
button.big {
|
|
position: relative;
|
|
height: @footer-button-big-size;
|
|
width: @footer-button-big-size;
|
|
border-radius: @footer-button-big-size /2;
|
|
}
|
|
button.big:after {
|
|
content: " ";
|
|
background-color: white;
|
|
width: @footer-button-ball-size;
|
|
height: @footer-button-ball-size;
|
|
display: block;
|
|
border-radius: 50%;
|
|
-webkit-animation: fa-spin 2s infinite linear;
|
|
animation: fa-spin 2s infinite linear;
|
|
position: absolute;
|
|
left: -@footer-button-halfball-size;
|
|
top: calc(~'50% - @{footer-button-halfball-size}');
|
|
transform-origin: (@footer-button-big-size /2 + @footer-button-halfball-size) @footer-button-halfball-size;
|
|
}
|
|
button.big::before {
|
|
content: " ";
|
|
background-color: white;
|
|
width: 16px;
|
|
height: 4px;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -8px;
|
|
left: calc(50% - 8px);
|
|
border-radius: 13px;
|
|
}
|
|
}
|
|
}
|