Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix avvio produzione modal

Browse Source
This commit is contained in:
Alessio
2020-04-29 09:46:31 +02:00
parent ad8681991b
commit fbc6e22bf7
4 changed files with 384 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/avvio-prod.less
+12 -6
View File
@@ -5,19 +5,25 @@
@modal: modal;
.@{modal}.avvio-produzione-info {
margin-top: 100px;
width: 653px;
height: 616px;
// section.body{
section.body{
// section{
section{
justify-content: center;
// .specific{
.specific{
// }
.tast{
margin-left: 25%;
}
}
// }
}
// }
}
}
Thermo.Active/wwwroot/assets/styles/base/layout.less
+1 -1
View File
@@ -1,4 +1,5 @@
// out: false, sourceMap: false, main: ../style.less
@import "setup.less";
@import "colors.less";
@import "modals.less";
@import "pirometro.less";
@@ -9,7 +10,6 @@
@import "circlegantt.less";
@import "arretramento-riscaldi.less";
@import "avvio-prod.less";
@import "setup.less";
@import "ciclo.less";
@import "raffreddamento.less";
@import "processo.less";
Thermo.Active/wwwroot/assets/styles/base/tastierino.less
-1
View File
@@ -4,7 +4,6 @@
@import "fonts.less";
.tast{
margin-left: 25%;
height: 261px;
width: 293px;
background-color:@color-silver;
Thermo.Active/wwwroot/assets/styles/style.css
+371 -365
View File
@@ -1,6 +1,373 @@
@import url(../../libs/font-awesome/css/font-awesome.css);
@import url(../../libs/glyphicons/styles/glyphicons.css);
@import "iziToast.min.css";
.setup {
padding-top: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column nowrap;
width: 100vw;
height: 100vh;
}
.setup hr {
flex-shrink: 0;
background-color: #979797;
width: 2px;
height: 100%;
margin: 0;
margin-left: 5px;
}
.setup .modal {
width: 1820px;
height: 980px;
}
.setup .modal section.body {
height: calc(100% - 66px);
}
.setup .modal section.body section {
height: 100%;
flex-flow: row nowrap;
padding: 14px;
display: flex;
justify-content: flex-start;
width: calc(100% - 28px);
height: calc(100% - 28px - 82px);
}
.setup .modal section.body section .auto {
overflow-y: auto;
overflow-x: hidden;
}
.setup .modal section.body section aside {
display: flex;
justify-content: start;
flex-direction: column;
height: 100%;
width: 520px;
flex: 0 0 520px;
overflow-y: scroll;
padding-right: 10px;
}
.setup .modal section.body section aside hr {
flex-shrink: 0;
background-color: #979797;
width: 100%;
height: 2px;
margin-left: 0px;
}
.setup .modal section.body section .specific {
display: flex;
flex-direction: column;
}
.setup .modal section.body section .specific .svg-area {
display: flex;
justify-content: center;
}
.setup .modal section.body section .specific .svg-area .input-circles {
display: flex;
flex-direction: column;
}
.setup .modal section.body section .specific .svg-area .input-circles span {
object-fit: contain;
font-size: 22px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: white;
background-color: #979797;
}
.setup .modal section.body section .specific .svg-area .input-circles .circle {
width: 141px;
height: 60px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: flex-start;
object-fit: contain;
border-radius: 40.5px;
border: solid 4px #9b9b9b;
}
.setup .modal section.body section .specific .svg-area .input-circles input {
width: 40px;
height: 21px;
margin: auto;
object-fit: contain;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #6d6d6d;
border: none;
}
.setup .modal section.body section .specific .svg-area .input-circles label {
margin: auto;
object-fit: contain;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #6d6d6d;
}
.setup .modal section.body section .specific .svg-area .input-circles img {
margin: auto;
width: 20px;
height: 20px;
object-fit: contain;
}
.setup .modal section.body footer {
height: 82px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.setup .modal header {
background-color: #fff;
color: #002680;
font-weight: 600;
font-size: 24px;
text-align: left;
padding: 0px 23px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
}
.modal.setup-info header {
padding-left: 31px;
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
color: darkblue;
}
.tab-header {
display: flex;
flex-flow: row;
align-items: stretch;
justify-content: flex-start;
}
.tab-header button {
background: none;
border: 1px solid #bbbcbc;
padding: 0 38px;
border-bottom: none;
font-size: 20px;
background-color: #bbbcbc;
color: #002680;
}
.tab-header button.active {
background-color: #fff;
font-weight: bold;
border-top: 2px solid #002680;
}
.modal.setup-info {
width: 1639px;
height: 695px;
background-color: #fff;
margin: 150px 193px;
box-shadow: none;
}
.modal.setup-info section {
height: 100%;
}
.modal.setup-info section .Rectangle {
width: calc(100% - 200px);
height: calc(100% - 200px);
background-color: #BBBCBC;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
padding: 100px;
}
.setup-button {
cursor: pointer;
display: grid;
width: 200px;
height: 128px;
grid-template-columns: 50px 1fr;
grid-template-rows: 1fr 50px;
position: relative;
}
.setup-button span,
.setup-button label {
grid-column: 1;
display: flex;
align-items: flex-end;
color: #fff;
z-index: 2;
justify-content: center;
font-weight: 500;
font-size: 18px;
padding-left: 10px;
}
.setup-button label {
grid-column: 2;
color: #002680;
justify-content: flex-start;
}
.setup-button img {
grid-column: 2;
grid-row: 2;
z-index: 2;
margin: auto;
}
.setup-button i {
grid-column: 2;
grid-row: 2;
z-index: 2;
margin: auto;
transform: scale(1.5);
}
.setup-button i.fa-check-circle {
color: #90BF3D;
}
.setup-button i.fa-minus-circle {
color: #7A7C74;
}
.setup-button .background-top,
.setup-button .background-bottom {
position: absolute;
left: 0;
width: 100%;
height: 50%;
transform: skewX(12px);
}
.setup-button .background-top:after,
.setup-button .background-bottom:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 35px;
background-color: #002680;
}
.setup-button .background-top {
background-image: linear-gradient(to bottom, #fff, #e6e6e6);
top: 0;
transform: skewX(20deg);
}
.setup-button .background-bottom {
background-image: linear-gradient(to bottom, #e6e6e6, #e2e2e2);
bottom: 0;
transform: skewX(-20deg);
}
.box {
margin-bottom: 30px;
box-sizing: border-box;
clear: both;
}
.box .header {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 100%;
font-size: 24px;
font-weight: bold;
color: #fff;
background-color: #979797;
}
.box .body {
padding: 20px;
display: flex;
flex-flow: column;
justify-items: center;
padding-bottom: 10px;
border: 2px solid #979797;
}
.box .submit {
margin: auto;
width: 90px;
height: 48px;
object-fit: contain;
border-radius: 8px;
border: none;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
}
.box .submit label {
object-fit: contain;
font-size: 18px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #002680;
}
.input-area {
margin: 10px auto;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 48px;
}
.input-area.col {
flex-flow: column;
align-items: flex-start;
height: auto;
}
.input-area h3 {
font-weight: normal;
color: #002680;
margin: 18px 0;
}
.input-area .buttons {
width: 100%;
display: flex;
flex-flow: row;
margin-bottom: 18px;
}
.input-area .buttons:last-child {
margin-bottom: 0;
}
.input-area label {
color: #002680;
font-size: 24px;
font-weight: 500;
flex: 1;
}
.input-area .rect {
object-fit: contain;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #6d6d6d;
text-align: center;
width: 98px;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}
.input-area select {
min-width: 150px;
height: 48px;
background-color: #fff;
padding: 0 20px;
font-size: 1rem;
}
.setup-play {
cursor: pointer;
margin: auto;
display: flex;
}
.text-success {
color: #002680;
}
@@ -3986,7 +4353,6 @@
margin: 16px;
}
.tast {
margin-left: 25%;
height: 261px;
width: 293px;
background-color: #bbbcbc;
@@ -4141,375 +4507,15 @@
height: 411px;
}
.modal.avvio-produzione-info {
margin-top: 100px;
width: 653px;
height: 616px;
}
.setup {
padding-top: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column nowrap;
width: 100vw;
height: 100vh;
}
.setup hr {
flex-shrink: 0;
background-color: #979797;
width: 2px;
height: 100%;
margin: 0;
margin-left: 5px;
}
.setup .modal {
width: 1820px;
height: 980px;
}
.setup .modal section.body {
height: calc(100% - 66px);
}
.setup .modal section.body section {
height: 100%;
flex-flow: row nowrap;
padding: 14px;
display: flex;
justify-content: flex-start;
width: calc(100% - 28px);
height: calc(100% - 28px - 82px);
}
.setup .modal section.body section .auto {
overflow-y: auto;
overflow-x: hidden;
}
.setup .modal section.body section aside {
display: flex;
justify-content: start;
flex-direction: column;
height: 100%;
width: 520px;
flex: 0 0 520px;
overflow-y: scroll;
padding-right: 10px;
}
.setup .modal section.body section aside hr {
flex-shrink: 0;
background-color: #979797;
width: 100%;
height: 2px;
margin-left: 0px;
}
.setup .modal section.body section .specific {
display: flex;
flex-direction: column;
}
.setup .modal section.body section .specific .svg-area {
display: flex;
.modal.avvio-produzione-info section.body section {
justify-content: center;
}
.setup .modal section.body section .specific .svg-area .input-circles {
display: flex;
flex-direction: column;
}
.setup .modal section.body section .specific .svg-area .input-circles span {
object-fit: contain;
font-size: 22px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: white;
background-color: #979797;
}
.setup .modal section.body section .specific .svg-area .input-circles .circle {
width: 141px;
height: 60px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: flex-start;
object-fit: contain;
border-radius: 40.5px;
border: solid 4px #9b9b9b;
}
.setup .modal section.body section .specific .svg-area .input-circles input {
width: 40px;
height: 21px;
margin: auto;
object-fit: contain;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #6d6d6d;
border: none;
}
.setup .modal section.body section .specific .svg-area .input-circles label {
margin: auto;
object-fit: contain;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #6d6d6d;
}
.setup .modal section.body section .specific .svg-area .input-circles img {
margin: auto;
width: 20px;
height: 20px;
object-fit: contain;
}
.setup .modal section.body footer {
height: 82px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.setup .modal header {
background-color: #fff;
color: #002680;
font-weight: 600;
font-size: 24px;
text-align: left;
padding: 0px 23px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
}
.modal.setup-info header {
padding-left: 31px;
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
color: darkblue;
}
.tab-header {
display: flex;
flex-flow: row;
align-items: stretch;
justify-content: flex-start;
}
.tab-header button {
background: none;
border: 1px solid #bbbcbc;
padding: 0 38px;
border-bottom: none;
font-size: 20px;
background-color: #bbbcbc;
color: #002680;
}
.tab-header button.active {
background-color: #fff;
font-weight: bold;
border-top: 2px solid #002680;
}
.modal.setup-info {
width: 1639px;
height: 695px;
background-color: #fff;
margin: 150px 193px;
box-shadow: none;
}
.modal.setup-info section {
height: 100%;
}
.modal.setup-info section .Rectangle {
width: calc(100% - 200px);
height: calc(100% - 200px);
background-color: #BBBCBC;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
padding: 100px;
}
.setup-button {
cursor: pointer;
display: grid;
width: 200px;
height: 128px;
grid-template-columns: 50px 1fr;
grid-template-rows: 1fr 50px;
position: relative;
}
.setup-button span,
.setup-button label {
grid-column: 1;
display: flex;
align-items: flex-end;
color: #fff;
z-index: 2;
justify-content: center;
font-weight: 500;
font-size: 18px;
padding-left: 10px;
}
.setup-button label {
grid-column: 2;
color: #002680;
justify-content: flex-start;
}
.setup-button img {
grid-column: 2;
grid-row: 2;
z-index: 2;
margin: auto;
}
.setup-button i {
grid-column: 2;
grid-row: 2;
z-index: 2;
margin: auto;
transform: scale(1.5);
}
.setup-button i.fa-check-circle {
color: #90BF3D;
}
.setup-button i.fa-minus-circle {
color: #7A7C74;
}
.setup-button .background-top,
.setup-button .background-bottom {
position: absolute;
left: 0;
width: 100%;
height: 50%;
transform: skewX(12px);
}
.setup-button .background-top:after,
.setup-button .background-bottom:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 35px;
background-color: #002680;
}
.setup-button .background-top {
background-image: linear-gradient(to bottom, #fff, #e6e6e6);
top: 0;
transform: skewX(20deg);
}
.setup-button .background-bottom {
background-image: linear-gradient(to bottom, #e6e6e6, #e2e2e2);
bottom: 0;
transform: skewX(-20deg);
}
.box {
margin-bottom: 30px;
box-sizing: border-box;
clear: both;
}
.box .header {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 100%;
font-size: 24px;
font-weight: bold;
color: #fff;
background-color: #979797;
}
.box .body {
padding: 20px;
display: flex;
flex-flow: column;
justify-items: center;
padding-bottom: 10px;
border: 2px solid #979797;
}
.box .submit {
margin: auto;
width: 90px;
height: 48px;
object-fit: contain;
border-radius: 8px;
border: none;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
}
.box .submit label {
object-fit: contain;
font-size: 18px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #002680;
}
.input-area {
margin: 10px auto;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 48px;
}
.input-area.col {
flex-flow: column;
align-items: flex-start;
height: auto;
}
.input-area h3 {
font-weight: normal;
color: #002680;
margin: 18px 0;
}
.input-area .buttons {
width: 100%;
display: flex;
flex-flow: row;
margin-bottom: 18px;
}
.input-area .buttons:last-child {
margin-bottom: 0;
}
.input-area label {
color: #002680;
font-size: 24px;
font-weight: 500;
flex: 1;
}
.input-area .rect {
object-fit: contain;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #6d6d6d;
text-align: center;
width: 98px;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}
.input-area select {
min-width: 150px;
height: 48px;
background-color: #fff;
padding: 0 20px;
font-size: 1rem;
}
.setup-play {
cursor: pointer;
margin: auto;
display: flex;
.modal.avvio-produzione-info section.body section .specific .tast {
margin-left: 25%;
}
.modal.ciclo-info section .specific {
padding: 0 10px;