From 05ea08223b025106eb647f3f85dc0bca5cf9c98d Mon Sep 17 00:00:00 2001 From: Paolo Possanzini Date: Mon, 30 Jul 2018 16:28:38 +0200 Subject: [PATCH] fix --- Step/wwwroot/assets/styles/base/modals.less | 2519 ++++++++++--------- Step/wwwroot/assets/styles/style.css | 44 +- 2 files changed, 1285 insertions(+), 1278 deletions(-) diff --git a/Step/wwwroot/assets/styles/base/modals.less b/Step/wwwroot/assets/styles/base/modals.less index 270feee3..6faa5b10 100644 --- a/Step/wwwroot/assets/styles/base/modals.less +++ b/Step/wwwroot/assets/styles/base/modals.less @@ -6,8 +6,7 @@ @login: login; @loader: loader; @backdrop: backdrop; -@font-family: 'Work Sans', -sans-serif; +@font-family: "Work Sans", sans-serif; @modal-min-width: 500px; @modal-min-height: 400px; @modal-confirm-delete-width: 500px; @@ -28,1336 +27,1342 @@ sans-serif; @modal-iframe-height: 800px; @modal-iframe-width: 1800px; @modal-user-info-height: 610px; -@modal-login-top: @modal-login-height /2; -@modal-login-left: @modal-login-width /2; +@modal-login-top: @modal-login-height / 2; +@modal-login-left: @modal-login-width / 2; @modal-create-maintenance-width: 896px; @modal-create-maintenance-height: 696px; @modal-machine-height: 730px; @modal-machine-width: 600px; -@modal-machine-top: @modal-machine-height /2; -@modal-machine-left: @modal-machine-width /2; +@modal-machine-top: @modal-machine-height / 2; +@modal-machine-left: @modal-machine-width / 2; @modal-loader-height: 392px; @modal-loader-width: 896px; -@modal-loader-top: @modal-loader-height /2; -@modal-loader-left: @modal-loader-width /2; +@modal-loader-top: @modal-loader-height / 2; +@modal-loader-left: @modal-loader-width / 2; @progress-back-color: #1791ff; @progress-white-color: #fff; .@{modal} { - min-width: @modal-min-width; - height: @modal-min-height; - box-shadow: @shadows; - z-index: 1000; - background-color: @color-background-white; - position: absolute; - -webkit-user-select:none; - header { - border-bottom: 2px solid @color-silver; - height: @modal-header-height; - line-height: @modal-header-height; - position: relative; - box-sizing: content-box; - button.close { - position: absolute; - width: 28px; - height: 28px; - border-radius: 50%; - border: none; - background-color: #fff; - color: @color-darkish-blue; - top: calc(50% - 20px); - right: 14px; - font-size: 16px; - cursor: pointer; - } - button.close:active { - background-color: @color-clear-blue ; - color: #fff; - } + min-width: @modal-min-width; + height: @modal-min-height; + box-shadow: @shadows; + z-index: 1000; + background-color: @color-background-white; + position: absolute; + -webkit-user-select: none; + header { + border-bottom: 2px solid @color-silver; + height: @modal-header-height; + line-height: @modal-header-height; + position: relative; + box-sizing: content-box; + button.close { + position: absolute; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: #fff; + color: @color-darkish-blue; + top: calc(50% - 20px); + right: 14px; + font-size: 16px; + cursor: pointer; } - footer { - align-self: flex-end; - height: @modal-header-height; - line-height: @modal-header-height; - border-top: 2px solid @color-silver; + button.close:active { + background-color: @color-clear-blue; + color: #fff; } + } + footer { + align-self: flex-end; + height: @modal-header-height; + line-height: @modal-header-height; + border-top: 2px solid @color-silver; + } } .@{modal}.@{login}, .@{modal}.user-info { - width: @modal-login-width; - height: @modal-user-info-height; - top: calc(~'50%' - @modal-user-info-height /2); - left: calc(~'50%' - @modal-login-width /2); - header { - background-color: @color-darkish-blue; - color: @color-white; - font-family: @font-family; - font-weight: 600; - font-size: 24px; - text-align: left; - padding: 0px 23px; - } - .user-details { - width: 250px; - margin: auto; - margin-bottom: 20px; - span, - strong { - text-align: center; - display: block; - margin: 0 0 5px 0; - font-size: 18px; - } + width: @modal-login-width; + height: @modal-user-info-height; + top: calc(~"50%" - @modal-user-info-height / 2); + left: calc(~"50%" - @modal-login-width / 2); + header { + background-color: @color-darkish-blue; + color: @color-white; + font-family: @font-family; + font-weight: 600; + font-size: 24px; + text-align: left; + padding: 0px 23px; + } + .user-details { + width: 250px; + margin: auto; + margin-bottom: 20px; + span, + strong { + text-align: center; + display: block; + margin: 0 0 5px 0; + font-size: 18px; } + } } .@{modal}.machine-info { - width: @modal-machine-width; - height: @modal-machine-height; - top: calc(~'50%' - @modal-machine-height /2); - left: calc(~'50%' - @modal-machine-width /2); - header { - background-color: @color-darkish-blue; - color: @color-white; - font-family: @font-family; - font-weight: 600; - font-size: 24px; + width: @modal-machine-width; + height: @modal-machine-height; + top: calc(~"50%" - @modal-machine-height / 2); + left: calc(~"50%" - @modal-machine-width / 2); + header { + background-color: @color-darkish-blue; + color: @color-white; + font-family: @font-family; + font-weight: 600; + font-size: 24px; + text-align: left; + padding: 0px 23px; + } + img { + display: block; + width: 88px; + height: 88px; + margin: auto; + margin-top: 48px; + margin-bottom: 40px; + } + .details { + text-align: center; + color: @color-greyish-brown; + & > * { + display: block; + margin-bottom: 5px; + height: 20px; + line-height: 20px; + } + & > label { + text-align: right; + strong { + display: inline-block; + width: 50%; text-align: left; - padding: 0px 23px; + } } - img { - display: block; - width: 88px; - height: 88px; - margin: auto; - margin-top: 48px; - margin-bottom: 40px; - } - .details { - text-align: center; - color: @color-greyish-brown; - & > * { - display: block; - margin-bottom: 5px; - height: 20px; - line-height: 20px; - } - & > label{ - text-align: right; - strong{ - display: inline-block; - width: 50%; - text-align: left; - } - } - & > hr{ - border: none; - } + & > hr { + border: none; } + } } .@{modal}.@{loader} { - width: @modal-loader-width; - height: @modal-loader-height; - top: calc(~'50%' - @modal-loader-height /2); - left: calc(~'50%' - @modal-loader-width /2); - header { - background-color: @color-darkish-blue; - color: @color-white; - font-family: @font-family; - font-weight: 600; - font-size: 24px; - text-align: left; - padding: 0px 23px; + width: @modal-loader-width; + height: @modal-loader-height; + top: calc(~"50%" - @modal-loader-height / 2); + left: calc(~"50%" - @modal-loader-width / 2); + header { + background-color: @color-darkish-blue; + color: @color-white; + font-family: @font-family; + font-weight: 600; + font-size: 24px; + text-align: left; + padding: 0px 23px; + } + h2 { + font-size: 18px; + text-align: left; + color: @color-input-light; + width: 592px; + margin: auto; + margin-top: 76px; + margin-bottom: 76px; + } + .progress-line { + height: 30px; + width: 592px; + margin: auto; + i { + // width: 25px; + // height: 25px; + font-size: 25px; + margin-right: 15px; + display: block; + float: left; + color: @progress-back-color; } - h2 { - font-size: 18px; - text-align: left; - color: @color-input-light; - width: 592px; - margin: auto; - margin-top: 76px; - margin-bottom: 76px; + progress { + width: 552px; + height: 24px; + font-size: 14px; + float: left; + background-color: white; // color: @progress-white-color; + position: relative; } - .progress-line { - height: 30px; - width: 592px; - margin: auto; - i { - // width: 25px; - // height: 25px; - font-size: 25px; - margin-right: 15px; - display: block; - float: left; - color: @progress-back-color; - } - progress { - width: 552px; - height: 24px; - font-size: 14px; - float: left; - background-color: white; // color: @progress-white-color; - position: relative; - } - progress:after { - display: block; - content: attr(value) + " %"; - position: absolute; - height: 24px; - top: 0; - left: 10px; - line-height: 24px; - color: #fff; - font-weight: bold; - } - progress[value]::-webkit-progress-value { - color: @progress-white-color; - background-color: @progress-back-color; - border-radius: 12px; - } - progress[value]::-webkit-progress-bar { - background-color: #fff; - border-radius: 12px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); - } + progress:after { + display: block; + content: attr(value) + " %"; + position: absolute; + height: 24px; + top: 0; + left: 10px; + line-height: 24px; + color: #fff; + font-weight: bold; } + progress[value]::-webkit-progress-value { + color: @progress-white-color; + background-color: @progress-back-color; + border-radius: 12px; + } + progress[value]::-webkit-progress-bar { + background-color: #fff; + border-radius: 12px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + } + } } .@{backdrop} { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100vw; - height: 100vh; - overflow: hidden; - -webkit-backdrop-filter: blur(10px); - background-color: @color-backdrop; - z-index: 900; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; + overflow: hidden; + -webkit-backdrop-filter: blur(10px); + background-color: @color-backdrop; + z-index: 900; - &.internal{ - height: calc(~'100vh - 80px'); - } + &.internal { + height: calc(~"100vh - 80px"); + } } .@{modal}.modal-confirm-delete { - height: @modal-confirm-delete-height; - width: @modal-confirm-delete-width; - top: calc(~'50%' - @modal-confirm-delete-height /2); - left: calc(~'50%' - @modal-confirm-delete-width /2); - header { - background-color: @color-darkish-blue; - color: @color-white; - font-family: @font-family; - font-weight: 600; - font-size: 24px; - text-align: left; - padding: 0px 23px; - } - .body{ - text-align: center; - margin-top: 30px; - font-size: 18px; - color: @color-greyish-brown; - } - .modal-confirm-delete-footer{ - // height: 20px; - border-top: 2px solid @color-silver; - } + height: @modal-confirm-delete-height; + width: @modal-confirm-delete-width; + top: calc(~"50%" - @modal-confirm-delete-height / 2); + left: calc(~"50%" - @modal-confirm-delete-width / 2); + header { + background-color: @color-darkish-blue; + color: @color-white; + font-family: @font-family; + font-weight: 600; + font-size: 24px; + text-align: left; + padding: 0px 23px; + } + .body { + text-align: center; + margin-top: 30px; + font-size: 18px; + color: @color-greyish-brown; + } + .modal-confirm-delete-footer { + // height: 20px; + border-top: 2px solid @color-silver; + } } -.@{modal}.create-maintenance{ - width: @modal-create-maintenance-width; - height: @modal-create-maintenance-height; - top: calc(~'50%' - @modal-create-maintenance-height /2); - left: calc(~'50%' - @modal-create-maintenance-width /2); - header{ - font-size: 20px; - color: @color-cyan-blue; - padding-left: 23px; - button.close { - position: absolute; - width: 28px; - height: 28px; - border-radius: 50%; - border: none; - background-color: @color-darkish-blue; - color: #fff; - top: calc(50% - 20px); - right: 14px; - font-size: 16px; - cursor: pointer; - } - button.close:active { - background-color: @color-clear-blue ; - color: #fff; - } - } - .typology{ - display: flex; - flex-flow: column; - .typology_lbl{ - margin-top: 22px; - margin-left: 24px; - font-size: 14px; - line-height: 1.29; - color: @color-warm-grey; - } - .radiobutton{ - margin-top: 17px; - font-size: 18px; - label[for=datefixed]{ - margin-right: 209px; - } - [type="radio"]:checked, - [type="radio"]:not(:checked) { - visibility: hidden; - } - [type="radio"]:checked + label, - [type="radio"]:not(:checked) + label - { - position: relative; - padding-left: 45px; - cursor: pointer; - line-height: 25px; - display: inline-block; - color: @color-cyan-blue; - } - [type="radio"]:checked + label:before, - [type="radio"]:not(:checked) + label:before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: 24px; - height: 24px; - border: 1px solid #ddd; - border-radius: 100%; - background: #fff; - } - - [type="radio"][disabled]:checked + label, - [type="radio"][disabled]:not(:checked) + label { - cursor: not-allowed; - } - - [type="radio"]:checked + label:after, - [type="radio"]:not(:checked) + label:after { - content: ''; - width: 18px; - height: 18px; - background-image: linear-gradient(to bottom, #1756ad, #002680); - position: absolute; - top: 4px; - left: 4px; - border-radius: 100%; - -webkit-transition: all 0.2s ease; - transition: all 0.2s ease; - } - - [type="radio"][disabled]:checked + label:after, - [type="radio"][disabled]:not(:checked) + label:after { - background: @color-gunmetal; - } - - [type="radio"]:checked + label{ - font-weight: 600; - } - [type="radio"]:not(:checked) + label:after { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); - } - [type="radio"]:checked + label:after { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - } - } - .title, .description{ - display: flex; - flex-flow: column; - .title_lbl, .description_lbl{ - margin-top: 22px; - margin-left: 24px; - font-size: 14px; - color: @color-warm-grey; - margin-bottom: 4px; - } - input{ - font-size: 18px; - width: 416px; - height: 48px; - margin-left: 24px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - border: solid 1px @color-silver; - } - input[type=text]{ - padding: 10px; - box-sizing: border-box; - } - textarea{ - border-radius: 2px; - height: 97px; - margin-left: 24px; - margin-right: 24px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - border: solid 1px @color-silver; - padding: 10px; - box-sizing: border-box; - resize: none; - } - } - .time{ - display: flex; - flex-flow: row; - .date, .end_time{ - display: flex; - flex-flow: column; - .date_lbl, .end_time_lbl{ - margin-top: 22px; - margin-left: 24px; - font-size: 14px; - color: @color-warm-grey; - margin-bottom: 4px; - } - input[type=date], input[type=time]{ - width: 209px; - height: 48px; - font-size: 18px; - margin-left: 24px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - border: solid 1px @color-silver; - } - input[type="date"]::-webkit-inner-spin-button{ - display: none; - } - input[type="date"]::-webkit-calendar-picker-indicator { - color: rgba(0, 0, 0, 0); - opacity: 1; - display: block; - background: url(/assets/icons/_png/calendar-25x25.png) no-repeat; - width: 20px; - height: 20px; - border-width: thin; - } - input[type=time]{ - width: 112px; - } - input[type=time]::-webkit-inner-spin-button, - input[type=time]::-webkit-outer-spin-button { - display: none; - } - } - } - .repeat{ - display: flex; - flex-flow: column; - .repeat_lbl{ - margin-top: 22px; - margin-left: 24px; - font-size: 14px; - color: @color-warm-grey; - margin-bottom: 4px; - } - .repeat_input{ - display: flex; - flex-flow: row; - input[type=text], select{ - width: 56px; - height: 48px; - font-size: 18px; - margin-left: 24px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - border: solid 1px @color-silver; - } - select{ - width: 144px; - box-shadow: 0 1px 2px 0 @color-black-40; - margin-left: 16px; - padding-left: 16px; - } - select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: url(/assets/icons/_png/carets-up-down-blu-25x25.png) no-repeat 99% 50%; - } - } - } - -} - -.@{modal}.info-equipment-box{ - width: 896px; - height: 680px; - border-radius: 2px; - background-color: @color-background-white; - top: calc(~'50%' - @modal-info-equipment-box-height /2); - left: calc(~'50%' - @modal-info-equipment-box-width /2); - header{ - font-size: 20px; - color: @color-cyan-blue; - padding-left: 23px; - } +.@{modal}.create-maintenance { + width: @modal-create-maintenance-width; + height: @modal-create-maintenance-height; + top: calc(~"50%" - @modal-create-maintenance-height / 2); + left: calc(~"50%" - @modal-create-maintenance-width / 2); + header { + font-size: 20px; + color: @color-cyan-blue; + padding-left: 23px; button.close { - position: absolute; - width: 28px; - height: 28px; - border-radius: 50%; - border: none; - background-color: @color-darkish-blue; - color: #fff; - top: calc(50% - 20px); - right: 14px; - font-size: 16px; - cursor: pointer; + position: absolute; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: @color-darkish-blue; + color: #fff; + top: calc(50% - 20px); + right: 14px; + font-size: 16px; + cursor: pointer; } button.close:active { - background-color: @color-clear-blue ; - color: #fff; + background-color: @color-clear-blue; + color: #fff; } - // .info-equipment-header{ - // width: 100%; - // height: 50px; - // color: @color-darkish-blue; - // border-bottom: solid 2px @color-white2; - // .info-equipment-header-label{ - // font-size: 20px; - // padding: 16px 0 0 24px; - // } - // >.fa{ - // float: right; - // font-size: 28px; - // margin-top: 16px; - // margin-right: 16px; - // } - // } - .tab-box-right{ - height: 81px; - width:100%; - background-color: @color-whitethree; - display: flex; - flex-direction: row; - border: none !important; - .tab{ - flex-grow:0; - flex-shrink:0; - float: left !important; - width: 200px !important; - height: 100% !important; - margin: 0 !important; - border: none !important; - border-right: solid 1px @color-label-grey !important; - background-color: @color-whitethree; - font-size: 18px !important; - line-height: 1 !important; - color: @color-greyish-brown !important; - position: relative; - &.plus{ - border-right: none !important; - .btn{ - float: left !important; - margin: 0; - width: 48px; - height: 48px; - position: absolute; - top: calc(~'50% - 24px'); - margin-left: 20px; - padding: 0; - .fa { - vertical-align: middle; - font-size: 21px; - } - } - } - } - .active{ - background-color: @color-white; - } - .tab-box-scroll{ - width: 100%; - overflow-y: hidden; - overflow-x: auto; - display: flex; - flex-direction: row; - flex-basis: auto; - &::-webkit-scrollbar{ - width: 5px; - height: 5px; - } - &::-webkit-scrollbar-thumb { - border-radius: 5px; - height: 1px; - background-color: rgba(0, 0, 0, 0.3); - } - } + } + .typology { + display: flex; + flex-flow: column; + .typology_lbl { + margin-top: 22px; + margin-left: 24px; + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + .radiobutton { + margin-top: 17px; + font-size: 18px; + label[for="datefixed"] { + margin-right: 209px; + } + [type="radio"]:checked, + [type="radio"]:not(:checked) { + visibility: hidden; + } + [type="radio"]:checked + label, + [type="radio"]:not(:checked) + label { + position: relative; + padding-left: 45px; + cursor: pointer; + line-height: 25px; + display: inline-block; + color: @color-cyan-blue; + } + [type="radio"]:checked + label:before, + [type="radio"]:not(:checked) + label:before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 24px; + height: 24px; + border: 1px solid #ddd; + border-radius: 100%; + background: #fff; + } + [type="radio"][disabled]:checked + label, + [type="radio"][disabled]:not(:checked) + label { + cursor: not-allowed; + } + + [type="radio"]:checked + label:after, + [type="radio"]:not(:checked) + label:after { + content: ""; + width: 18px; + height: 18px; + background-image: linear-gradient(to bottom, #1756ad, #002680); + position: absolute; + top: 4px; + left: 4px; + border-radius: 100%; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + } + + [type="radio"][disabled]:checked + label:after, + [type="radio"][disabled]:not(:checked) + label:after { + background: @color-gunmetal; + } + + [type="radio"]:checked + label { + font-weight: 600; + } + [type="radio"]:not(:checked) + label:after { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } + [type="radio"]:checked + label:after { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } } - .info-equipment-body{ - height: calc(~'100% - 52px'); + } + .title, + .description { + display: flex; + flex-flow: column; + .title_lbl, + .description_lbl { + margin-top: 22px; + margin-left: 24px; + font-size: 14px; + color: @color-warm-grey; + margin-bottom: 4px; + } + input { + font-size: 18px; + width: 416px; + height: 48px; + margin-left: 24px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + border: solid 1px @color-silver; + } + input[type="text"] { + padding: 10px; + box-sizing: border-box; + } + textarea { + border-radius: 2px; + height: 97px; + margin-left: 24px; + margin-right: 24px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + border: solid 1px @color-silver; + padding: 10px; + box-sizing: border-box; + resize: none; + } + } + .time { + display: flex; + flex-flow: row; + .date, + .end_time { + display: flex; + flex-flow: column; + .date_lbl, + .end_time_lbl { + margin-top: 22px; + margin-left: 24px; + font-size: 14px; + color: @color-warm-grey; + margin-bottom: 4px; + } + input[type="date"], + input[type="time"] { + width: 209px; + height: 48px; + font-size: 18px; + margin-left: 24px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + border: solid 1px @color-silver; + } + input[type="date"]::-webkit-inner-spin-button { + display: none; + } + input[type="date"]::-webkit-calendar-picker-indicator { + color: rgba(0, 0, 0, 0); + opacity: 1; + display: block; + background: url(/assets/icons/_png/calendar-25x25.png) no-repeat; + width: 20px; + height: 20px; + border-width: thin; + } + input[type="time"] { + width: 112px; + } + input[type="time"]::-webkit-inner-spin-button, + input[type="time"]::-webkit-outer-spin-button { + display: none; + } + } + } + .repeat { + display: flex; + flex-flow: column; + .repeat_lbl { + margin-top: 22px; + margin-left: 24px; + font-size: 14px; + color: @color-warm-grey; + margin-bottom: 4px; + } + .repeat_input { + display: flex; + flex-flow: row; + input[type="text"], + select { + width: 56px; + height: 48px; + font-size: 18px; + margin-left: 24px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + border: solid 1px @color-silver; + } + select { + width: 144px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin-left: 16px; + padding-left: 16px; + } + select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: url(/assets/icons/_png/carets-up-down-blu-25x25.png) + no-repeat 99% 50%; + } + } + } +} + +.@{modal}.info-equipment-box { + width: 896px; + height: 680px; + border-radius: 2px; + background-color: @color-background-white; + top: calc(~"50%" - @modal-info-equipment-box-height / 2); + left: calc(~"50%" - @modal-info-equipment-box-width / 2); + header { + font-size: 20px; + color: @color-cyan-blue; + padding-left: 23px; + } + button.close { + position: absolute; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: @color-darkish-blue; + color: #fff; + top: calc(50% - 20px); + right: 14px; + font-size: 16px; + cursor: pointer; + } + button.close:active { + background-color: @color-clear-blue; + color: #fff; + } + // .info-equipment-header{ + // width: 100%; + // height: 50px; + // color: @color-darkish-blue; + // border-bottom: solid 2px @color-white2; + // .info-equipment-header-label{ + // font-size: 20px; + // padding: 16px 0 0 24px; + // } + // >.fa{ + // float: right; + // font-size: 28px; + // margin-top: 16px; + // margin-right: 16px; + // } + // } + .tab-box-right { + height: 81px; + width: 100%; + background-color: @color-whitethree; + display: flex; + flex-direction: row; + border: none !important; + .tab { + flex-grow: 0; + flex-shrink: 0; + float: left !important; + width: 200px !important; + height: 100% !important; + margin: 0 !important; + border: none !important; + border-right: solid 1px @color-label-grey !important; + background-color: @color-whitethree; + font-size: 18px !important; + line-height: 1 !important; + color: @color-greyish-brown !important; + position: relative; + &.plus { + border-right: none !important; + .btn { + float: left !important; + margin: 0; + width: 48px; + height: 48px; + position: absolute; + top: calc(~"50% - 24px"); + margin-left: 20px; + padding: 0; + .fa { + vertical-align: middle; + font-size: 21px; + } + } + } + } + .active { + background-color: @color-white; + } + .tab-box-scroll { + width: 100%; + overflow-y: hidden; + overflow-x: auto; + display: flex; + flex-direction: row; + flex-basis: auto; + &::-webkit-scrollbar { + width: 5px; + height: 5px; + } + &::-webkit-scrollbar-thumb { + border-radius: 5px; + height: 1px; + background-color: rgba(0, 0, 0, 0.3); + } + } + } + .info-equipment-body { + height: calc(~"100% - 52px"); + width: 100%; + display: flex; + flex-flow: row; + .info-equipment-body-left { + width: 320px; + height: 100%; + display: flex; + flex-flow: wrap; + justify-content: center; + img { + width: 280px; + height: 280px; + margin-top: 36px; + background-color: @color-whitegrey; + } + .tools { + width: 100%; + height: 100px; + margin-top: 20px; + text-align: center; + } + button { + width: 280px; + } + .fa { + margin-right: 10px; + } + .explain { + margin-top: 20px; + text-align: left; + width: 280px; + display: inline-block; + color: #4b4b4b; + font-size: 15px; + font-weight: 600; + } + } + .info-equipment-body-right { + width: calc(~"100% - 320px"); + height: calc(~"100% - 135px"); + table { + width: 97%; + height: 467px; + display: block; + margin-top: 32px; + tbody { + .info-equipment-category { + text-align: center; + margin-top: 32px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + tr { + display: flex; + width: 100%; + flex-flow: row; + td.columnleft, + td.columnright { + height: 32px; + background-color: @color-white2; + margin: 4px; + font-size: 18px; + line-height: 1.11; + display: flex; + align-items: center; + color: @color-greyish-brown; + span { + margin-left: 16px; + } + } + td.columnleft { + width: 256px; + font-weight: 600; + } + td.columnright { + width: 216px; + } + } + } + } + } + } +} + +.height555 { + height: 555px !important; +} + +.@{modal}.load-depot { + width: 696px; + height: 462px; + border-radius: 2px; + background-color: @color-background-white; + top: calc(~"50%" - @modal-load-depot-height / 2); + left: calc(~"50%" - @modal-load-depot-width / 2); + header { + font-size: 20px; + color: @color-cyan-blue; + padding-left: 23px; + } + button.close { + position: absolute; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: @color-darkish-blue; + color: #fff; + top: calc(50% - 20px); + right: 14px; + font-size: 16px; + cursor: pointer; + } + button.close:active { + background-color: @color-clear-blue; + color: #fff; + } + .load-depot-box { + height: calc(~"100%" - 230px); + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: @color-cyan-blue; + margin-top: 20px; + flex-flow: column; + .load-depot-box-select { + margin-top: 15px; + } + .input-box { + height: 70px; + .title { + margin: 0 15px; + font-size: 16px; + } + select.arrow { + height: 36px; + font-size: 16px; + } + } + } + footer { + .pull-right { + .btn { + padding: 0 10px; + } + } + } +} + +.@{modal}.modal-iframe { + width: @modal-iframe-width; + height: @modal-iframe-height; + border-radius: 2px; + background-color: @color-background-white; + top: calc(~"50%" - @modal-iframe-height / 2); + left: calc(~"50%" - @modal-iframe-width / 2); + header { + font-size: 20px; + color: @color-cyan-blue; + padding-left: 23px; + button.close { + position: absolute; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: @color-darkish-blue; + color: #fff; + top: calc(50% - 20px); + right: 14px; + font-size: 16px; + cursor: pointer; + } + button.close:active { + background-color: @color-clear-blue; + color: #fff; + } + } + iframe { + position: absolute; + height: calc(~"100%" - @modal-header-height + 2px); + width: 100%; + border: none; + } +} + +.@{modal}.modal-load-program { + width: @modal-load-program-width; + height: @modal-load-program-height; + top: calc(~"50%" - @modal-load-program-height / 2); + left: calc(~"50%" - @modal-load-program-width / 2); + background-color: @color-background-white; + + header { + display: flex; + align-items: center; + padding-left: 24px; + height: 81px; + font-size: 20px; + color: @color-darkish-blue; + } + .modal-load-program-header { + height: 80px; + width: 100%; + display: flex; + flex-flow: column; + // .title{ + // height: 81px; + // display: flex; + // align-items: center; + // } + .box-search { + width: 100%; + height: 80px; + display: flex; + flex-flow: row; + align-items: center; + background-color: @color-label-grey; + .path { + display: flex; + flex-flow: row; + width: 600px; + color: @color-white; + .child { + display: flex; + flex-flow: row; + div + .fa.fa-chevron-right:first-child { + display: none; + } + .fa { + margin: 0px 22px; + } + } + .child:last-child { + font-weight: 600; + } + } + .search { + display: flex; + width: 100%; + justify-content: flex-end; + input { + width: 688px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px @color-black-50; + border: solid 1px @color-white3; + background-color: @color-whitetwo; + } + } + } + } + .modal-load-program-body { + height: 631px; + width: 100%; + display: flex; + flex-flow: row; + hr { + width: 5%; + } + .first-column { + height: calc(~"100% - 78px"); + min-width: 295px; + border-right: solid 2px @color-whitethree; + display: flex; + flex-flow: column; + padding-top: 78px; + .card-folder-path { + width: 280px; + display: flex; + margin-top: 8px 0 8px 5px; + } + } + .second-column { + height: calc(~"100% - 19px"); + min-width: 445px; + border-right: solid 2px @color-whitethree; + display: flex; + flex-flow: column; + padding-top: 19px; + .content { + width: 94%; + height: 100%; + .card-folder-path { + width: 371px; + display: flex; + margin-top: 8px 0 8px 8px; + } + } + .group-btn { + display: flex; + flex-flow: row; + justify-content: center; + margin-bottom: 16px; + input { + width: 288px; + height: 48px; + padding: 0; + box-sizing: border-box; + font-size: 18px; + } + input[type="text"] { + padding-left: 5px; + } + i { + width: 44px; + height: 44px; + padding: 0; + margin-top: 4px; + color: @color-darkish-blue; + } + } + } + .third-column { + height: calc(~"100% - 19px"); + min-width: 447px; + border-right: solid 2px @color-whitethree; + display: flex; + flex-flow: column; + padding-top: 19px; + .content { + width: 94%; + height: 100%; + .card-folder-path { + width: 371px; + display: flex; + margin-top: 8px 0 8px 8px; + } + } + .label-folder-empty { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + color: @color-greyish-brown; + font-size: 20px; + } + .group-btn { + display: flex; + flex-flow: row; + justify-content: center; + margin-bottom: 16px; + input { + width: 288px; + height: 48px; + padding: 0; + box-sizing: border-box; + font-size: 18px; + } + input[type="text"] { + padding-left: 5px; + } + i { + width: 44px; + height: 44px; + padding: 0; + margin-top: 4px; + color: @color-darkish-blue; + } + } + } + .selected-item { + width: 580px; + height: 100%; + display: flex; + flex-flow: column; + justify-content: flex-end; + padding: 0 16px 0 22px; + .selected-item-header { + height: 78px; width: 100%; display: flex; flex-flow: row; - .info-equipment-body-left{ - width: 320px; - height: 100%; - display: flex; - flex-flow: wrap; - justify-content: center; - img{ - width: 280px; - height: 280px; - margin-top: 36px; - background-color: @color-whitegrey; - } - .tools{ - width: 100%; - height: 100px; - margin-top: 20px; - text-align: center; - } - button{ - width: 280px; - } - .fa{ - margin-right: 10px; - } - .explain{ - margin-top: 20px; - text-align: left; - width: 280px; - display: inline-block; - color: #4b4b4b; - font-size: 15px; - font-weight: 600; - } + align-items: center; + .selected-item-title { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + color: @color-darkish-blue; + font-size: 20px; + // margin-left: 24px; } - .info-equipment-body-right{ - width: calc(~'100% - 320px'); - height: calc(~'100% - 135px'); - table{ - width: 97%; - height: 467px; - display: block; - margin-top: 32px; - tbody{ - .info-equipment-category{ - text-align: center; - margin-top: 32px; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - } - tr{ - display: flex; - width:100%; - flex-flow: row; - td.columnleft,td.columnright{ - height: 32px; - background-color: @color-white2; - margin: 4px; - font-size: 18px; - line-height: 1.11; - display: flex; - align-items: center; - color: @color-greyish-brown; - span{ - margin-left: 16px; - } - } - td.columnleft{ - width: 256px; - font-weight: 600; - } - td.columnright{ - width: 216px; - } - } - } - } + .group-button { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + i { + font-size: 24px; + } } - } -} - -.height555{ - height: 555px !important; -} - -.@{modal}.load-depot{ - width: 696px; - height: 462px; - border-radius: 2px; - background-color: @color-background-white; - top: calc(~'50%' - @modal-load-depot-height /2); - left: calc(~'50%' - @modal-load-depot-width /2); - header{ - font-size: 20px; - color: @color-cyan-blue; - padding-left: 23px; - } - button.close { + } + .selected-item-body { + width: 100%; + height: calc(~"100% - 78px"); + position: relative; + border-top: solid 2px @color-whitethree; + display: flex; + flex-flow: column; + .selected-item-body-image { + display: flex; + width: 100%; + // margin: auto + max-height: 336px; + align-items: center; + img { + display: block; + margin: auto; + max-height: 336px; + } + } + .selected-item-body-description { + display: flex; + width: 100%; + margin-top: 20px; + overflow-x: hidden; + height: calc(~"100% - 380px"); + flex-flow: column; + .title { + font-size: 18px; + line-height: 1; + color: @color-darkish-blue; + } + .text { + font-size: 18px; + color: @color-greyish-brown; + } + } + } + .notselecteditem { position: absolute; - width: 28px; - height: 28px; - border-radius: 50%; - border: none; - background-color: @color-darkish-blue; - color: #fff; - top: calc(50% - 20px); - right: 14px; - font-size: 16px; - cursor: pointer; - } - button.close:active { - background-color: @color-clear-blue ; - color: #fff; - } - .load-depot-box{ - height: calc(~'100%' - 230px); + right: 0; + width: 580px; + height: 631px; + background-color: @color-white2; + padding: 0; + color: @color-greyish-brown; + font-size: 24px; + align-items: center; display: flex; align-items: center; justify-content: center; - font-size: 18px; - color: @color-cyan-blue; - margin-top: 20px; - flex-flow: column; - .load-depot-box-select{ - margin-top: 15px; - } - .input-box{ - height: 70px; - .title{ - margin: 0 15px; - font-size: 16px; - } - select.arrow{ - height: 36px; - font-size: 16px; - } - } - } - footer{ - .pull-right{ - .btn{ - padding: 0 10px; - } - } + } } + } + .modal-load-program-footer { + height: 79px; + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + border-top: solid 2px @color-whitethree; + } } -.@{modal}.modal-iframe{ - width: @modal-iframe-width; - height: @modal-iframe-height; - border-radius: 2px; - background-color: @color-background-white; - top: calc(~'50%' - @modal-iframe-height /2); - left: calc(~'50%' - @modal-iframe-width /2); - header{ - font-size: 20px; - color: @color-cyan-blue; - padding-left: 23px; - button.close { - position: absolute; - width: 28px; - height: 28px; - border-radius: 50%; - border: none; - background-color: @color-darkish-blue; - color: #fff; - top: calc(50% - 20px); - right: 14px; - font-size: 16px; - cursor: pointer; - } - button.close:active { - background-color: @color-clear-blue ; - color: #fff; - } - } - iframe{ - position: absolute; - height: calc(~'100%' - @modal-header-height + 2px); - width:100%; - border: none; - } -} - -.@{modal}.modal-load-program{ - width: @modal-load-program-width; - height: @modal-load-program-height; - top: calc(~'50%' - @modal-load-program-height /2); - left: calc(~'50%' - @modal-load-program-width /2); - background-color: @color-background-white; - - header{ +.@{modal}.modal-job-add-parameter { + width: @modal-job-add-parameter-width; + height: @modal-job-add-parameter-height; + top: calc(~"50%" - @modal-job-add-parameter-height / 2); + left: calc(~"50%" - @modal-job-add-parameter-width / 2); + background-color: @color-background-white; + header { + padding-left: 22px; + font-size: 24px; + font-weight: 600; + color: @color-darkish-blue; + button.close { + display: flex; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: #002680; + color: #fff; + font-size: 16px; + float: right; + cursor: pointer; + .fa { display: flex; - align-items: center; - padding-left: 24px; - height: 81px; - font-size: 20px; - color: @color-darkish-blue; + margin-left: auto; + margin-right: auto; + } } - .modal-load-program-header{ - height: 80px; + } + .job-add-parameter-body { + height: 464px; + width: 100%; + display: flex; + flex-flow: column; + justify-content: flex-start; + align-items: center; + .box:first-child { + margin-top: 15px; + margin-bottom: 8px; + } + .box { + display: flex; + margin: 8px; + width: 656px; + height: 80px; + border-radius: 2px; + background-color: @color-background-white; + box-shadow: 0 1px 1px 0 @color-black-50; + flex-flow: row; + align-items: center; + .box-title { width: 100%; display: flex; - flex-flow: column; - // .title{ - // height: 81px; - // display: flex; - // align-items: center; - // } - .box-search{ - width: 100%; - height: 80px; - display: flex; - flex-flow: row; - align-items: center; - background-color: @color-label-grey; - .path{ - display: flex; - flex-flow: row; - width: 600px; - color: @color-white; - .child{ - display: flex; - flex-flow: row; - div + .fa.fa-chevron-right:first-child{ - display: none; - } - .fa{ - margin: 0px 22px; - } - } - .child:last-child{ - font-weight: 600; - } - } - .search{ - display: flex; - width: 100%; - justify-content: flex-end; - input{ - width: 688px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px @color-black-50; - border: solid 1px @color-white3; - background-color: @color-whitetwo; - } - } - } - } - .modal-load-program-body{ - height: 631px; - width: 100%; - display: flex; - flex-flow: row; - hr{ - width: 5% - } - .first-column{ - height: calc(~'100% - 78px'); - min-width: 295px; - border-right: solid 2px @color-whitethree; - display: flex; - flex-flow: column; - padding-top: 78px; - .card-folder-path{ - width: 280px; - display: flex; - margin-top: 8px 0 8px 5px; - } - } - .second-column{ - height: calc(~'100% - 19px'); - min-width: 445px; - border-right: solid 2px @color-whitethree; - display: flex; - flex-flow: column; - padding-top: 19px; - .content{ - width: 94%; - height: 100%; - .card-folder-path{ - width: 371px; - display: flex; - margin-top: 8px 0 8px 8px; - } - } - .group-btn{ - display: flex; - flex-flow: row; - justify-content: center; - margin-bottom: 16px; - input { - width:288px; - height: 48px; - padding: 0; - box-sizing: border-box; - font-size: 18px; - } - input[type=text]{ - padding-left: 5px; - } - i{ - width: 44px; - height: 44px; - padding: 0; - margin-top: 4px; - color: @color-darkish-blue; - } - } - } - .third-column{ - height: calc(~'100% - 19px'); - min-width: 447px; - border-right: solid 2px @color-whitethree; - display: flex; - flex-flow: column; - padding-top: 19px; - .content{ - width: 94%; - height: 100%; - .card-folder-path{ - width: 371px; - display: flex; - margin-top: 8px 0 8px 8px; - } - } - .label-folder-empty{ - display: flex; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; - color: @color-greyish-brown; - font-size: 20px; - } - .group-btn{ - display: flex; - flex-flow: row; - justify-content: center; - margin-bottom: 16px; - input { - width:288px; - height: 48px; - padding: 0; - box-sizing: border-box; - font-size: 18px; - } - input[type=text]{ - padding-left: 5px; - } - i{ - width: 44px; - height: 44px; - padding: 0; - margin-top: 4px; - color: @color-darkish-blue; - } - } - } - .selected-item{ - width: 580px; - height: 100%; - display: flex; - flex-flow: column; - justify-content: flex-end; - padding: 0 16px 0 22px; - .selected-item-header{ - height: 78px; - width: 100%; - display: flex; - flex-flow: row; - align-items: center; - .selected-item-title{ - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: flex-start; - color: @color-darkish-blue; - font-size: 20px; - // margin-left: 24px; - } - .group-button{ - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - i{ - font-size: 24px; - } - } - } - .selected-item-body{ - width: 100%; - height: calc(~'100% - 78px'); - position: relative; - border-top: solid 2px @color-whitethree; - display: flex; - flex-flow: column; - .selected-item-body-image{ - display: flex; - width: 100%; - max-height: 421px; - align-items: center; - img{ - max-height: 421px; - } - } - .selected-item-body-description{ - display: flex; - width: 100%; - margin-top: 20px; - overflow-x: hidden; - height: calc(~'100% - 450px'); - flex-flow: column; - .title{ - font-size: 18px; - line-height: 1; - color: @color-darkish-blue; - } - .text{ - font-size: 18px; - color: @color-greyish-brown; - } - } - } - .notselecteditem{ - position: absolute; - right: 0; - width: 580px; - height: 631px; - background-color: @color-white2; - padding: 0; - color: @color-greyish-brown; - font-size: 24px; - align-items: center; - display: flex; - align-items: center; - justify-content: center; - } - } - } - .modal-load-program-footer{ - height: 79px; - width: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - border-top: solid 2px @color-whitethree; - } -} - -.@{modal}.modal-job-add-parameter{ - width: @modal-job-add-parameter-width; - height: @modal-job-add-parameter-height; - top: calc(~'50%' - @modal-job-add-parameter-height /2); - left: calc(~'50%' - @modal-job-add-parameter-width /2); - background-color: @color-background-white; - header{ - padding-left: 22px; - font-size: 24px; - font-weight: 600; - color: @color-darkish-blue; - button.close{ - display: flex; - width: 28px; - height: 28px; - border-radius: 50%; - border: none; - background-color: #002680; - color: #fff; - font-size: 16px; - float: right; - cursor: pointer; - .fa { - display: flex; - margin-left: auto; - margin-right: auto; - } - } - } - .job-add-parameter-body{ - height: 464px; - width: 100%; - display: flex; - flex-flow: column; justify-content: flex-start; - align-items: center; - .box:first-child{ - margin-top: 15px; - margin-bottom: 8px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + label { + margin-left: 15px; } - .box{ - display: flex; - margin: 8px; - width: 656px; - height: 80px; - border-radius: 2px; - background-color: @color-background-white; - box-shadow: 0 1px 1px 0 @color-black-50; - flex-flow: row; - align-items: center; - .box-title{ - width: 100%; - display: flex; - justify-content: flex-start; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - label{ - margin-left: 15px; - } - } - .control{ - width: 100%; - display: flex; - justify-content: flex-end; - select{ - width: 304px; - height: 48px; - border-radius: 2px; - margin-right: 16px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - background-color: @color-background-white; - border: solid 1px @color-silver; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - padding-left: 16px; - } - input{ - width: 304px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - background-color: @color-background-white; - border: solid 1px @color-silver; - margin: 16px; - } - } - } - .items-list{ - width: 475px; - min-height: 191px; - display: flex; - flex-flow: column; - .group-item{ - width: 100%; - min-height: 128px; - display: flex; - flex-flow: column; - .item{ - width: 100%; - height: 48px; - display: flex; - flex-flow: row; - align-items: center; - .number{ - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - margin-right: 16px; - } - .input-text-box{ - margin-right: 8px; - input{ - width: 304px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - border: solid 1px @color-silver; - } - } - .group-button{ - button.btn{ - padding: 0 12px; - .fa{ - font-size: 24px; - } - } - } - } - .item:first-child{ - margin-top: 12px; - } - } - .add-item{ - width: 100%; - display: flex; - } - } - } - .job-add-parameter-footer{ + } + .control { width: 100%; - height: 78px; display: flex; - border-top: solid 2px @color-label-grey; - flex-flow: row; - align-items: center; justify-content: flex-end; + select { + width: 304px; + height: 48px; + border-radius: 2px; + margin-right: 16px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + background-color: @color-background-white; + border: solid 1px @color-silver; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + padding-left: 16px; + } + input { + width: 304px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + background-color: @color-background-white; + border: solid 1px @color-silver; + margin: 16px; + } + } } - + .items-list { + width: 475px; + min-height: 191px; + display: flex; + flex-flow: column; + .group-item { + width: 100%; + min-height: 128px; + display: flex; + flex-flow: column; + .item { + width: 100%; + height: 48px; + display: flex; + flex-flow: row; + align-items: center; + .number { + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-right: 16px; + } + .input-text-box { + margin-right: 8px; + input { + width: 304px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + border: solid 1px @color-silver; + } + } + .group-button { + button.btn { + padding: 0 12px; + .fa { + font-size: 24px; + } + } + } + } + .item:first-child { + margin-top: 12px; + } + } + .add-item { + width: 100%; + display: flex; + } + } + } + .job-add-parameter-footer { + width: 100%; + height: 78px; + display: flex; + border-top: solid 2px @color-label-grey; + flex-flow: row; + align-items: center; + justify-content: flex-end; + } } -.@{modal}.modal-edit-job{ - width: @modal-edit-job-width; - height: @modal-edit-job-height; - border-radius: 2px; - top: calc(~'50%' - 392px); - left: calc(~'50%' - @modal-edit-job-width /2); - background-color: @color-background-white; - header{ +.@{modal}.modal-edit-job { + width: @modal-edit-job-width; + height: @modal-edit-job-height; + border-radius: 2px; + top: calc(~"50%" - 392px); + left: calc(~"50%" - @modal-edit-job-width / 2); + background-color: @color-background-white; + header { + display: flex; + align-items: center; + height: 79px; + padding-left: 23px; + font-size: 24px; + font-weight: 600; + color: @color-darkish-blue; + button.close { + display: flex; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: #002680; + color: #fff; + font-size: 16px; + float: right; + cursor: pointer; + .fa { display: flex; - align-items: center; - height: 79px; - padding-left: 23px; - font-size: 24px; - font-weight: 600; - color: @color-darkish-blue; - button.close{ - display: flex; - width: 28px; - height: 28px; - border-radius: 50%; - border: none; - background-color: #002680; - color: #fff; - font-size: 16px; - float: right; - cursor: pointer; - .fa { - display: flex; - margin-left: auto; - margin-right: auto; - } - } + margin-left: auto; + margin-right: auto; + } } - .modal-edit-job-body{ - height: 712px; + } + .modal-edit-job-body { + height: 712px; + width: 100%; + display: flex; + flex-flow: column; + .tab-box { + height: 81px; + width: 100%; + background-color: @color-whitethree; + display: flex; + flex-direction: row; + border: none !important; + .tab { + flex-grow: 0; + flex-shrink: 0; + float: left !important; + width: 238px !important; + height: 100% !important; + margin: 0 !important; + padding: 0; + border: none !important; + border-right: solid 1px @color-label-grey !important; + background-color: @color-whitethree; + font-size: 18px !important; + line-height: 1 !important; + color: @color-greyish-brown !important; + position: relative; + &.plus { + border-right: none !important; + .btn { + float: left !important; + margin: 0; + width: 48px; + height: 48px; + position: absolute; + top: calc(~"50% - 24px"); + margin-left: 20px; + padding: 0; + .fa { + vertical-align: middle; + font-size: 21px; + } + } + } + } + .tab:last-child { + border-right: none !important; + } + .active { + background-color: @color-white; + border-top: solid 2px @color-clear-blue !important; + } + .tab-box-scroll { + width: 100%; + overflow-y: hidden; + overflow-x: auto; + display: flex; + flex-direction: row; + flex-basis: auto; + &::-webkit-scrollbar { + width: 5px; + height: 5px; + } + &::-webkit-scrollbar-thumb { + border-radius: 5px; + height: 1px; + background-color: rgba(0, 0, 0, 0.3); + } + } + } + .modal-edit-job-box { + width: 100%; + height: calc(~"100% - 81px"); + display: flex; + flex-flow: column; + justify-content: flex-start; + .box-tag-tool { + height: 100%; + width: 100%; + .tag-tool-first { + margin-top: 40px; + } + } + .box-tag-params { + height: 100%; width: 100%; display: flex; flex-flow: column; - .tab-box{ - height: 81px; - width:100%; - background-color: @color-whitethree; - display: flex; - flex-direction: row; - border: none !important; - .tab{ - flex-grow:0; - flex-shrink:0; - float: left !important; - width: 238px !important; - height: 100% !important; - margin: 0 !important; - padding:0; - border: none !important; - border-right: solid 1px @color-label-grey !important; - background-color: @color-whitethree; - font-size: 18px !important; - line-height: 1 !important; - color: @color-greyish-brown !important; - position: relative; - &.plus{ - border-right: none !important; - .btn{ - float: left !important; - margin: 0; - width: 48px; - height: 48px; - position: absolute; - top: calc(~'50% - 24px'); - margin-left: 20px; - padding: 0; - .fa { - vertical-align: middle; - font-size: 21px; - } - } - } - } - .tab:last-child{ - border-right: none !important; - } - .active{ - background-color: @color-white; - border-top: solid 2px @color-clear-blue !important; - } - .tab-box-scroll{ - width: 100%; - overflow-y: hidden; - overflow-x: auto; - display: flex; - flex-direction: row; - flex-basis: auto; - &::-webkit-scrollbar{ - width: 5px; - height: 5px; - } - &::-webkit-scrollbar-thumb { - border-radius: 5px; - height: 1px; - background-color: rgba(0, 0, 0, 0.3); - } - } - + align-items: center; + .input-box { + width: 656px; + margin: 4px 0px; } - .modal-edit-job-box{ - width: 100%; - height: calc(~'100% - 81px'); - display: flex; - flex-flow: column; - justify-content: flex-start; - .box-tag-tool{ - height: 100%; - width: 100%; - .tag-tool-first{ - margin-top: 40px; - } - } - .box-tag-params{ - height: 100%; - width: 100%; - display: flex; - flex-flow: column; - align-items: center; - .input-box{ - width: 656px; - margin: 4px 0px; - } - .input-box.tag-params-first{ - margin-top: 36px; - margin-bottom: 51px; - } - .input-box .control input{ - width: 96px; - } - } + .input-box.tag-params-first { + margin-top: 36px; + margin-bottom: 51px; } + .input-box .control input { + width: 96px; + } + } } - .modal-edit-job-footer{ - height: 78px; - border-top: solid 2px @color-label-grey; - width: 100%; - .group-btn{ - height: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - } + } + .modal-edit-job-footer { + height: 78px; + border-top: solid 2px @color-label-grey; + width: 100%; + .group-btn { + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; } + } } diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index ef629136..86ce4644 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -267,7 +267,7 @@ margin-top: 17px; font-size: 18px; } -.modal.create-maintenance .typology .radiobutton label[for=datefixed] { +.modal.create-maintenance .typology .radiobutton label[for="datefixed"] { margin-right: 209px; } .modal.create-maintenance .typology .radiobutton [type="radio"]:checked, @@ -285,7 +285,7 @@ } .modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label:before, .modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label:before { - content: ''; + content: ""; position: absolute; left: 0; top: 0; @@ -301,7 +301,7 @@ } .modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label:after, .modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label:after { - content: ''; + content: ""; width: 18px; height: 18px; background-image: linear-gradient(to bottom, #1756ad, #002680); @@ -354,8 +354,8 @@ box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); border: solid 1px #bbbcbc; } -.modal.create-maintenance .title input[type=text], -.modal.create-maintenance .description input[type=text] { +.modal.create-maintenance .title input[type="text"], +.modal.create-maintenance .description input[type="text"] { padding: 10px; box-sizing: border-box; } @@ -390,10 +390,10 @@ color: #878787; margin-bottom: 4px; } -.modal.create-maintenance .time .date input[type=date], -.modal.create-maintenance .time .end_time input[type=date], -.modal.create-maintenance .time .date input[type=time], -.modal.create-maintenance .time .end_time input[type=time] { +.modal.create-maintenance .time .date input[type="date"], +.modal.create-maintenance .time .end_time input[type="date"], +.modal.create-maintenance .time .date input[type="time"], +.modal.create-maintenance .time .end_time input[type="time"] { width: 209px; height: 48px; font-size: 18px; @@ -416,14 +416,14 @@ height: 20px; border-width: thin; } -.modal.create-maintenance .time .date input[type=time], -.modal.create-maintenance .time .end_time input[type=time] { +.modal.create-maintenance .time .date input[type="time"], +.modal.create-maintenance .time .end_time input[type="time"] { width: 112px; } -.modal.create-maintenance .time .date input[type=time]::-webkit-inner-spin-button, -.modal.create-maintenance .time .end_time input[type=time]::-webkit-inner-spin-button, -.modal.create-maintenance .time .date input[type=time]::-webkit-outer-spin-button, -.modal.create-maintenance .time .end_time input[type=time]::-webkit-outer-spin-button { +.modal.create-maintenance .time .date input[type="time"]::-webkit-inner-spin-button, +.modal.create-maintenance .time .end_time input[type="time"]::-webkit-inner-spin-button, +.modal.create-maintenance .time .date input[type="time"]::-webkit-outer-spin-button, +.modal.create-maintenance .time .end_time input[type="time"]::-webkit-outer-spin-button { display: none; } .modal.create-maintenance .repeat { @@ -441,7 +441,7 @@ display: flex; flex-flow: row; } -.modal.create-maintenance .repeat .repeat_input input[type=text], +.modal.create-maintenance .repeat .repeat_input input[type="text"], .modal.create-maintenance .repeat .repeat_input select { width: 56px; height: 48px; @@ -846,7 +846,7 @@ box-sizing: border-box; font-size: 18px; } -.modal.modal-load-program .modal-load-program-body .second-column .group-btn input[type=text] { +.modal.modal-load-program .modal-load-program-body .second-column .group-btn input[type="text"] { padding-left: 5px; } .modal.modal-load-program .modal-load-program-body .second-column .group-btn i { @@ -895,7 +895,7 @@ box-sizing: border-box; font-size: 18px; } -.modal.modal-load-program .modal-load-program-body .third-column .group-btn input[type=text] { +.modal.modal-load-program .modal-load-program-body .third-column .group-btn input[type="text"] { padding-left: 5px; } .modal.modal-load-program .modal-load-program-body .third-column .group-btn i { @@ -950,18 +950,20 @@ .modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image { display: flex; width: 100%; - max-height: 421px; + max-height: 336px; align-items: center; } .modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image img { - max-height: 421px; + display: block; + margin: auto; + max-height: 336px; } .modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description { display: flex; width: 100%; margin-top: 20px; overflow-x: hidden; - height: calc(100% - 450px); + height: calc(100% - 380px); flex-flow: column; } .modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .title {