@import "~/app-resources/less/theme.less"; @header-height: 55px; @keyframes collapsMenuBar { 0% { height: 28px; width: 28px; } 50% { top: -80px; left: -120px; height: 120px; width: 120px; background-color: @color-light-red; } 100% { height: 28px; width: 28px; } } @keyframes slideUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, -@header-height, 0); transform: translate3d(0, -@header-height, 0); } } @keyframes slideDown { 0% { -webkit-transform: translate3d(0, -@header-height, 0); transform: translate3d(0, -@header-height, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } #vat-container { //background: @color-white-smoke; position: relative; width: 100%; height: 100%; overflow: hidden; .right { text-align: right; } .slideup { animation: slideUp 1s; } .slidedown { animation: slideDown 1s; } .red-color { color: @color-light-red; } .vat-header { background: @color-background; position: relative; height: @header-height; border-bottom-width: 1px; border-bottom-color: @color-light-gray; border-bottom-style: solid; box-shadow: 0 1px 9px @color-light-gray; z-index: 100; &.collapsed { height: 0; display: none; } > div { padding-top: 10px; } input { width: 150px; padding-right: 13px; background: url(/app-resources/images/vat/down.png) no-repeat scroll right center transparent; } .vat-title { display: inline-block; height: 24px; line-height: 24px; vertical-align: middle; border: none; padding-left: 20px; font-size:16px; font-weight: 600; margin:0px 10px 0px 10px; font-weight:bold; } .vat-subheader { display: inline-block; height: 24px; line-height: 24px; vertical-align: middle; border: none; padding-left: 20px; select { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent; } } select::-ms-expand { display: none; } #vat-menu-buttons { margin-left: 0px; padding-left: 10px; a { color: #2f2f2f; display: inline-block; font-size: 14px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; text-align: center; text-transform: none; text-decoration: none; border-bottom: 3px solid white; outline: none; span { border: @thin-border solid @color-gray; display: inline-block; height: 20px; margin-right: 10px; width: 20px; border-radius: 50%; background: none; vertical-align: middle; font-size: 12px; } } a:hover { text-decoration: none; border-bottom: @thick-border solid @color-light-red; } a.active { border-bottom: 3px solid @color-light-red; span { border: 0; display: inline-block; height: 20px; margin-right: 10px; width: 20px; border-radius: 50%; color: #FFF !important; background: @color-light-red; padding-top: 0.5px; } } } } .btnAnimation { animation: collapsMenuBar 1s; } #menuCollapseBtn { float: right; position: relative; right: 50px; z-index: 100; a { position: absolute; border: @thin-border solid @color-light-gray; display: inline-block; height: 24px; width: 24px; text-align: center; border-radius: 50%; background: @color-white; font-size: 20px; text-transform: none; text-decoration: none; outline: none; i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; vertical-align: middle; color: @color-light-gray; } } #a-up { top: -16px; i { top: 0; } } #a-down { top: -10px; i { top: 3px; } } #a-up:hover { top: -18px; height: 28px; width: 28px; color: @color-white; background-color: @color-light-red; border-width: 0; i { top: 2px; } } #a-down:hover { top: -10px; height: 28px; width: 28px; color: @color-white; background-color: @color-light-red; border-width: 0; i { top: 4px; } } } .vat-content { //background: @color-white-smoke; height: calc(~"100% - @{header-height}"); margin-top: 0; position: relative; transition: height 1s linear; -webkit-transition: height 1s linear; /*z-index: 99;*/ &.expanded { height: 100%; } } } .project-statuts-title { i { color: #CF2D1B; display: inline-block; font-size: 15px; vertical-align: middle; margin-right: 5px; } .project-statuts-title-i-inactive { color: gray; } } .model-project-status { width: 320px; /*height: 800px;*/ max-height:800px; .modal-dialog { width: 100%; height: 90%; margin: 20px auto; overflow-x:auto; overflow-y:auto; .modal-content { width: 100%; /*height: 100%;*/ .modal-body { height: 90%; } } } .ul-status { width: 100%; list-style: none; margin: 0; padding: 0; li { /*height: 50px;*/ line-height: 20px; i { color: #CF2D1B; display: inline-block; font-size: 15px; vertical-align: middle; margin-right: 5px; } ul { width: 100%; list-style: none; margin: 5px; /*padding: 5px;*/ padding-left:25px; li { margin-top:-20px; margin-bottom: 15px; i { font-size: 12px; } } } } .verticalLine { border-left: thin dashed #CF2D1B; border-left-width: 2px; height: 25px; margin-top: -3px; margin-left: 5px; } .verticalLine-add-bottom-line { border-bottom:thin dashed #CF2D1B; border-bottom-width:2px; width:20px; } .vertical-bottom-line { border-left: thin dashed #CF2D1B; border-left-width: 2px; height: 25px; margin-top: -3px; margin-left: 5px; } .i-inactive { color: lightgray; } .verticalLine-inactive { border-left-color: lightgray; border-bottom-color:lightgray; } .approve-detail-data { color:gray; } } } /* #vat-menu-buttons :not(.active) span { border: 0; display: inline-block; height: 20px; padding-right: 0px; margin-right: 10px; width: 20px; border-radius: 50%; background: #c7c8ca; } #vat-menu-buttons a.active ~ a span { border: 1px solid gray; display: inline-block; height: 20px; padding-right: 0px; margin-right: 10px; width: 20px; border-radius: 50%; background: none; vertical-align: middle; } #vat-menu-buttons a span { font-size: 12px; } */