%PDF- %PDF-
Direktori : /home/bitrix/www/bitrix/components/bitrix/main.interface.form/templates/mobile/ |
Current File : //home/bitrix/www/bitrix/components/bitrix/main.interface.form/templates/mobile/style.css |
.mobile-grid{ font-family: "Helvetica Neue", Helvetica, sans-serif; background: rgba(223,226,228,.5); word-wrap: break-word; } /*.mobile-grid-section{margin-bottom:4px;}*/ .mobile-grid-section-child{ background: #fff;} .mobile-grid-section-child.mobile-grid-field-phone{ border-bottom: 1px solid #dee0e3; padding-bottom: 3px; padding-right: 0 !important; } .mobile-grid-section-child.mobile-grid-field-phone .mobile-grid-title{border:none;} .mobile-grid-section.mobile-grid-section-gray {background: #eff1f2;} .mobile-grid-section.mobile-grid-section-white{background: #fff;} .mobile-grid-restricted .mobile-grid-section{margin-bottom: 0;} /* Title */ .mobile-grid-title{ display: block; font-size: 11px; color: #57686c; margin: 0; padding: 1px 16px 1px; line-height: 20px; border-bottom: 1px solid #dee0e3; text-transform: lowercase; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-title {border-bottom-width: .5px} } .mobile-grid-title-required:after { content: " *"; color: red; display: inline; } .mobile-grid-restricted .mobile-grid-title { font-size: 14px; color: #778490; border: none; padding-top:3px; background: #fff; } .mobile-grid-restricted .mobile-grid-title-required:after{ content:""; } /* BLOCK */ .mobile-grid-block{ position: relative; display: block; font-size: 17px; line-height: 20px; outline: none; text-decoration: none; background-color: #fff; padding: 0 16px; box-sizing: border-box; border-bottom: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-block {border-bottom-width: .5px} } .mobile-grid-field-custom .mobile-grid-section-child:last-child .mobile-grid-block, .mobile-grid-body .mobile-grid-section-child:last-child .mobile-grid-block{ border-bottom:none;} .mobile-grid-restricted .mobile-grid-block{ padding: 7px 16px; } .mobile-grid-block a { font-size: 17px; } /*Del*/ del { display: block; width: 30px; height: 30px; background: #e7e6eb; position: absolute; z-index: 2; right: 13px; top: 0; bottom: 0; margin: auto; border-radius: 50%; } /*Input*/ .mobile-grid-data-text-container{position: relative;} .mobile-grid-data-text{ padding: 13px 0; border: none; width: 100%; display: block; font-size: 17px; color: #000; line-height: 20px; font-family: "Helvetica Neue", Helvetica, sans-serif; outline: none; margin: 0; } /*Select*/ .mobile-grid-data-select-container{position: relative;} .mobile-grid-restricted .mobile-grid-data-select-container{ padding: 0 16px;} .mobile-grid-data-select{ position: absolute; left: -1000px; opacity: 0; } .mobile-grid-data-select-container a, .mobile-grid-data-select-container span{ font-size: 17px; color: #357ecf; outline: none; padding:13px 0; text-decoration: none; display: block; } .mobile-grid-data-select-container:after, .mobile-grid-data-select-container:before{ position: absolute; content: ''; z-index: 2; background: #8b919d; top:50%; width: 2px; height: 10px; right: 16px; } .mobile-grid-data-select-container:after { margin-top: -7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile-grid-data-select-container:before{ margin-top: -1px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /*Checkbox*/ .mobile-grid-restricted .mobile-grid-data-checkbox-container, .mobile-grid-data-checkbox-container{ position: relative; padding: 7px 0 7px 16px } .mobile-grid-data-checkbox-container label { line-height: 20px; padding: 13px 50px 13px 0; color: #000; display: block; position: relative; border-bottom: 1px solid #dee0e3; } .mobile-grid-restricted .mobile-grid-data-checkbox-container label{ padding:7px 50px 7px 0;} .mobile-grid-data-checkbox-container label:last-child{ border-bottom:none;} .mobile-grid-data-checkbox-container input { position: absolute; opacity: 0; left: -100px; } .mobile-grid-data-checkbox-container span:after{ content: ''; border-radius: 0; border: none; width: 19px; height: 25px; background: url(images/mob-task-sprite.png) no-repeat 0 0; display: inline-block; position: absolute; z-index: 2; top: -8px; bottom: 0; right: 18px; margin: auto; background-size: 39px; } .mobile-grid-data-checkbox-container input input[type=checkbox].mobile-grid-field-priority:checked + span:after{ background-position: -19px 0; } .mobile-grid-data-radio-container label span:before, .mobile-grid-data-checkbox-container label span:before{ content: ''; position: absolute; right: 13px; top: 0; bottom: 0; margin: auto; width: 28px; height: 28px; background: #fff; border-radius: 50%; border: 1px solid #ccc; } .mobile-grid-data-checkbox-container label input[type=checkbox]:checked + span:after { background: url(images/task-sprite.png) no-repeat 0 -33px; background-size: 18px; } .mobile-grid-data-checkbox-container label span:after { position: absolute; top: -3px; bottom: 0; right: 19px; content: ''; z-index: 2; width: 17px; height: 14px; margin: auto; background: transparent; } .mobile-grid-data-radio-container label input[type=radio]:checked + span:before, .mobile-grid-data-checkbox-container label input[type=checkbox]:checked + span:before { background: #79cd00; border: 1px solid #79cd00; } .mobile-grid-data-radio-container label input[type=radio]:checked:disabled + span:before, .mobile-grid-data-checkbox-container label input[type=checkbox]:checked:disabled + span:before { background: #ccc; border: 1px solid #ccc; }.mobile-grid-data-checkbox-container label > * {pointer-events: none;} /*Textarea*/ .mobile-grid-data-textarea-container{position: relative;} .mobile-grid-data-textarea { line-height: 20px; min-height: 68px; padding: 13px 0; border: none; display: block; font-size: 17px; color: #000; max-width:100%; width:110%; font-family: "Helvetica Neue", Helvetica, sans-serif; outline: none; } /*Date*/ .mobile-grid-data-date-container{position: relative;} .mobile-grid-data-date{} .mobile-grid-data-date-container a, .mobile-grid-data-date-container div{ font-size: 17px; color: #357ecf; outline: none; padding:13px 0; text-decoration: none; word-wrap: break-word; } .mobile-grid-restricted .mobile-grid-data-date-container {padding: 0 16px;} .mobile-grid-restricted .mobile-grid-data-date-container a, .mobile-grid-restricted .mobile-grid-data-date-container div { font-size: 17px; color: #357ecf; outline: none; padding:7px 0; text-decoration: none; } /*User*/ .mobile-grid-data-user-container{padding: 0;} .mobile-grid-restricted .mobile-grid-data-user-container{padding-right: 0;} /*File*/ .mobile-grid-data-file-container{padding: 0;} .mobile-grid-restricted .mobile-grid-data-file-container{padding-right: 0;} /*Label*/ .mobile-grid-data-label-container{padding:13px 16px;} .mobile-grid-section-child .mobile-grid-data-label-container{padding:13px 0;} /* Phone */ /* Mail */ .mobile-grid-data-mail-container, .mobile-grid-data-phone-container{ position: relative; } .mobile-grid-data-mail-icon { width:24px; height:16px; } .mobile-grid-data-phone-icon{ width:21px; height:21px; } .mobile-grid-data-mail-icon, .mobile-grid-data-phone-icon{ position: absolute; right:16px; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mobile-grid-data-phone-container .mobile-grid-data-phone-icon { top: 38%; } /*Custom*/ .mobile-grid-data-custom-container {padding: 0} .mobile-grid-restricted .mobile-grid-data-custom-container {padding: 7px 0 7px 16px;} .mobile-grid-restricted .mobile-grid-data-custom-container .mobile-grid-title{padding: 0 0 3px;} .mobile-grid-restricted .mobile-grid-data-custom-container .mobile-grid-block{padding: 0 0 7px;} .mobile-grid-data-custom-container div:last-child{border: none;} /*OLD*/ /*.mobile-grid { font-family: "Helvetica Neue", Helvetica, sans-serif; background: rgba(223,226,228,.5); overflow: hidden; }*/ .mobile-grid-field { position: relative; margin-bottom: 8px; } .mobile-grid-field-title{ display: block; font-size: 11px; color: #57686c; margin: 0; padding: 1px 16px 1px; line-height: 20px; border-bottom:.5px solid #dee0e3; } .mobile-grid-field-required.mobile-grid-field-title:after { content: "*"; color: red; display: inline; } /* Group of data */ .mobile-grid-body { display: none; } .mobile-grid-field input[type=checkbox][value=section] { position: absolute; left: -1000px; } .mobile-grid-field input[type=checkbox][value=section]:checked ~ .mobile-grid-body { display: block; border-bottom: .5px solid #dee0e3; } .mobile-grid-field input[type=checkbox][value=section] ~ label { line-height: 20px; box-sizing: border-box; background: #fff; padding: 13px 16px; border-bottom:.5px solid #dee0e3; /*margin: 0 -2px;*/ font-size: 17px; color: #357ecf; outline: none; text-decoration: none; display: block; } .mobile-grid-field input[type=checkbox][value=section] ~ label{ position: relative;} .mobile-grid-field input[type=checkbox][value=section] ~ label:after, .mobile-grid-field input[type=checkbox][value=section] ~ label:before{ position: absolute; content: ''; z-index: 2; background: #8b919d; top:50%; width: 2px; height: 10px; right: 16px; } .mobile-grid-field input[type=checkbox][value=section] ~ label:after { margin-top: -7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile-grid-field input[type=checkbox][value=section] ~ label:before{ margin-top: -1px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mobile-grid-field input[type=checkbox][value=section]:checked ~ label:before { margin-top: -4px; margin-right: -3px; } .mobile-grid-field input[type=checkbox][value=section]:checked ~ label:after { margin-top: -4px; margin-right: 3px; } /* /Group of data */ /* Data types */ .mobile-grid-field-custom, .mobile-grid-field-label, .mobile-grid-field-text, .mobile-grid-field-textarea, .mobile-grid-field-select-user, .mobile-grid-field-select, .mobile-grid-field-radio, .mobile-grid-field-checkbox, .mobile-grid-field-file, .mobile-grid-field-date, .mobile-grid-field-contact-info-list, .mobile-grid-data-crm-container{ position: relative; display: block; font-size: 17px; line-height: 20px; outline: none; box-sizing: border-box; text-decoration: none; background: #fff; padding: 13px 16px; border-bottom:.5px solid #dee0e3; /*margin: 0 -2px;*/ } @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) { .mobile-grid-field-custom, .mobile-grid-field-label, .mobile-grid-field-text, .mobile-grid-field-textarea, .mobile-grid-field-select-user, .mobile-grid-field-select, .mobile-grid-field-radio, .mobile-grid-field-checkbox, .mobile-grid-field-file, .mobile-grid-field-date, .mobile-grid-field-contact-info-list, .mobile-grid-data-crm-container{ border-bottom:.33px solid #dee0e3; } } .mobile-grid-field .mobile-grid-field .mobile-grid-field-select, .mobile-grid-field .mobile-grid-field .mobile-grid-field-label, .mobile-grid-field .mobile-grid-field .mobile-grid-field-date { padding: 19px 18px 14px; } .mobile-grid-field .mobile-grid-field .mobile-grid-field-title { position: absolute; padding: 0 16px; z-index: 1; line-height: normal; top: 3px; border: none; } .mobile-grid-field .mobile-grid-field .mobile-grid-field-custom, .mobile-grid-field .mobile-grid-field .mobile-grid-field-label, .mobile-grid-field .mobile-grid-field .mobile-grid-field-text, .mobile-grid-field .mobile-grid-field .mobile-grid-field-textarea, .mobile-grid-field .mobile-grid-field .mobile-grid-field-select-user, .mobile-grid-field .mobile-grid-field .mobile-grid-field-select, .mobile-grid-field .mobile-grid-field .mobile-grid-field-radio, .mobile-grid-field .mobile-grid-field .mobile-grid-field-checkbox, .mobile-grid-field .mobile-grid-field .mobile-grid-field-file, .mobile-grid-field .mobile-grid-field .mobile-grid-field-date { border-bottom: .5px solid #dee0e3; } .mobile-grid-restricted .mobile-grid-field .mobile-grid-field .mobile-grid-field-date { margin-bottom: 0; } .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-custom, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-label, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-text, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-textarea, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-select-user, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-select, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-radio, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-checkbox, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-file, .mobile-grid-field .mobile-grid-field:last-child .mobile-grid-field-date { border:none; } .mobile-grid-field .placeholder { color: grey; } .mobile-grid-field-custom { color: #000000; padding: 0; margin-top:-1px; position: relative; border-top: .5px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-custom {border-top-width: .5px} } /* label */ .mobile-grid-field-label { color: #000000; overflow-x: auto; } /* text & textarea */ .mobile-grid-field-text input, .mobile-grid-field-text div, .mobile-grid-field-textarea textarea, .mobile-grid-field-textarea div{ padding: 0; border: none; width: 100%; display: block; font-size: 17px; color: #000; line-height: 20px; font-family: "Helvetica Neue", Helvetica, sans-serif; outline: none; } .mobile-grid-field-textarea textarea { line-height: 20px; min-height: 68px; } .mobile-grid-field-textarea div { max-height: 60px; overflow-y: hidden; white-space: pre; } .mobile-grid-field-textarea-more { font-size: 15px; color: #2f83e2; text-decoration: none; display: inline-block; padding-top: 5px; } /* select */ .mobile-grid-field-select select { position: absolute; left: -100px; opacity: 0; } .mobile-grid-field-select:before { position: absolute; top: 21px; right:20px; content: ''; z-index: 2; width: 2px; height:10px; background: #8b919d; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mobile-grid-field-select:after { position: absolute; top: 19px; right:16px; content: ''; z-index: 2; width: 10px; height: 2px; background: #8b919d; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mobile-grid-field-select a { font-size: 17px; color: #357ecf; outline: none; text-decoration: none; display: block; } .mobile-grid-field-select select { position: absolute; left: -1000px; opacity: 0; } /* user select */ .mobile-grid-field-select-user { padding: 0; } .mobile-grid-field-select-user-wrap > input[type=checkbox] { position: absolute; left: -999px; } .mobile-grid-field-select-user-wrap label > * { pointer-events: none; } .mobile-grid-field-select-user-wrap .mobile-grid-field-select-user-container { max-height: 196px; overflow-y: hidden; } .mobile-grid-restricted .mobile-grid-field-select-user-wrap .mobile-grid-field-select-user-container { max-height: 130px; } .mobile-grid-field-select-user-container .mobile-grid-field-select-user-item:last-child{ border-bottom: none; } .mobile-grid-field-select-user-wrap .mobile-grid-field-select-user-more { z-index: 3; height: 45px; box-sizing: border-box; display: block; background-color: white; border-top: 1px solid #dee0e3; /*border-bottom:1px solid #dee0e3;*/ padding-top: 11px; text-align: center; color: grey; font-size: 15px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-select-user-wrap .mobile-grid-field-select-user-more {border-top-width: .5px;} } .mobile-grid-restricted .mobile-grid-field-select-user-more { /* margin-bottom: 21px; border-bottom:1px solid #dee0e3;*/ } .mobile-grid-field-select-user-wrap > input[type="checkbox"][value="0"] ~ .mobile-grid-field-select-user-more, .mobile-grid-field-select-user-wrap > input[type="checkbox"][value="1"] ~ .mobile-grid-field-select-user-more, .mobile-grid-field-select-user-wrap > input[type="checkbox"][value="2"] ~ .mobile-grid-field-select-user-more, .mobile-grid-field-select-user-wrap > input[type="checkbox"][value="3"] ~ .mobile-grid-field-select-user-more, .mobile-grid-field-select-user-wrap > input[type=checkbox]:checked ~ .mobile-grid-field-select-user-more .unchecked, .mobile-grid-field-select-user-wrap > input[type=checkbox] ~ .mobile-grid-field-select-user-more .checked{ display: none; } .mobile-grid-field-select-user-wrap > input[type=checkbox]:checked ~ .mobile-grid-field-select-user-more .checked{ display: inherit; } .mobile-grid-field-select-user-wrap > input[type=checkbox]:checked ~ .mobile-grid-field-select-user-container { max-height: 10000px; transition: height 2s ease; } .mobile-grid-field-select-user-item { position: relative; line-height: 43px; margin-left: 16px; padding: 11px 50px 11px 55px; /*padding: 0 50px 0 55px;*/ color: #000; max-height: 90px; min-height:43px; font-size: 17px; border-bottom:1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-select-user-item {border-bottom-width: .5px} } /*@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3){ .mobile-grid-field-select-user-item {border-bottom-width: .33px} }*/ .mobile-grid-field-select-user-item span { white-space: nowrap; display: block; text-overflow: ellipsis; overflow: hidden; } .mobile-grid-field-select-user-item .avatar { position: absolute; width: 33px; height: 33px; /*background: #717e8a;*/ border-radius: 50%; top: 0; bottom: 0; left: 5px; margin: auto; text-align: center; line-height: 33px; } .mobile-grid-field-select-user-item .avatar img { width: 100%; } .mobile-grid-restricted .mobile-grid-field-select-user-item { padding: 0 50px 0 55px; margin: 0; border: none !important; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .mobile-grid-field-user-name { display: inline-block; vertical-align: middle; line-height: 43px; white-space: normal; } .mobile-grid-field-user-name span { display: block; color: #6f6f6f; font-size: 12px; line-height: normal; } .mobile-grid-field-select-user .mobile-grid-field .mobile-grid-field-label {border-top: .5px solid #dee0e3;} .mobile-grid-field-select-user select, .mobile-grid-field-select-users select { position: absolute; left: -1000px; opacity: 0; } /* radio & checkbox */ .mobile-grid-field-radio, .mobile-grid-field-checkbox { padding: 0 0 0 16px; } .mobile-grid-field-radio label, .mobile-grid-field-checkbox label { line-height: 20px; padding: 13px 50px 13px 0; color: #000; display: block; position: relative; border-bottom: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-radio label, .mobile-grid-field-checkbox label {border-bottom-width: .5px} } .mobile-grid-field-radio label:last-child, .mobile-grid-field-checkbox label:last-child { border: none; } .mobile-grid-field-radio input, .mobile-grid-field-checkbox input { position: absolute; opacity: 0; left: -100px; } .mobile-grid-field-radio label span:before, .mobile-grid-field-checkbox label span:before{ content: ''; position: absolute; right: 13px; top: 0; bottom:0; margin: auto; width: 28px; height:28px; background: #fff; border-radius: 50%; border: 1px solid #CCC; } .mobile-grid-field-radio label span:after { position: absolute; top: 0; bottom: 0; right: 23px; content: ''; z-index: 2; width: 10px; height: 10px; margin: auto; background: transparent; border-radius: 50%; } .mobile-grid-field-checkbox label > * { pointer-events: none; } .mobile-grid-field-checkbox label span:after{ position: absolute; top: -4px; bottom:0; right: 18px; content: ''; z-index: 2; width: 17px; height:14px; margin: auto; background: transparent; } .mobile-grid-field-radio label input[type=radio]:checked + span:before, .mobile-grid-field-checkbox label input[type=checkbox]:checked + span:before { background: #79cd00; border: 1px solid #79cd00; } .mobile-grid-field-radio label input[type=radio]:checked + span:after { background: #fff; } .mobile-grid-field-checkbox label input[type=checkbox]:checked + span:after { background: url(images/task-sprite.png) no-repeat 0 -33px; background-size: 18px; } /* File */ .mobile-grid-field-file { padding: 0; } .mobile-grid-field-file-item-inner { max-height: 57px; overflow: hidden; position: relative; margin-left: 16px; padding: 12px 50px 13px 0; color: #000; font-size: 17px; white-space: normal; line-height: 17px; vertical-align: middle; border-bottom: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-file-item-inner {border-bottom-width: .5px} } .mobile-grid-field-file-item:last-child .mobile-grid-field-file-item-inner { border: none; } .mobile-grid-field-file-item .mobile-grid-field-file-preview { display: none; width: 40px; height: 50px; border-radius: 0; vertical-align: middle; margin-right: 8px; float: left; } .mobile-grid-field-file-item .mobile-grid-field-file-preview .files-preview-border { background-color: #fff; display: block; overflow: hidden; } .mobile-grid-field-file-item .mobile-grid-field-file-preview .files-preview-alignment { display: inline-block; text-align: center; } .mobile-grid-field-file-item .mobile-grid-field-file-preview img, .mobile-grid-field-file-item .mobile-grid-field-file-preview canvas{ display: inline-block; border: none; max-height: 49px; max-width: 43px; margin: 0; } .mobile-grid-field-file-item .mobile-grid-field-file-icon { width: 40px; height:50px; border-radius: 0; display: inline-block; vertical-align: middle; background: url(images/blank.png) no-repeat -7px 0; background-size: 49px 50px; float: left; margin-right: 8px; } .mobile-grid-field-file-item.mobile-grid-field-file-inprogress i.mobile-grid-menu, .mobile-grid-field-file-item.mobile-grid-field-file-inprogress del { display: none; } /* file-image */ .mobile-grid-field-file-item.mobile-grid-field-file-image .mobile-grid-field-file-icon { display: none; } .mobile-grid-field-file-item.mobile-grid-field-file-image .mobile-grid-field-file-preview { display: inline-block; } /* file in progress */ .mobile-grid-field-file-item i.mobile-grid-wait { display: none; position: absolute; top: 0; bottom:0; right: 13px; margin: auto; width: 30px; height:30px; background: url(images/waiter-iphone.gif) left center no-repeat; background-size: cover; } .mobile-grid-field-file-item.mobile-grid-field-file-wait i.mobile-grid-wait { display: block; } .mobile-grid-field-file-item.mobile-grid-field-file-wait i.mobile-grid-menu, .mobile-grid-field-file-item.mobile-grid-field-file-wait del { display: none; } /* file error */ .mobile-grid-field-file-error .mobile-grid-field-file-size { display: none; } .mobile-grid-field-file-error .mobile-grid-field-file-error-text { display: block; } .mobile-grid-field-file-name { overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; padding: 7px 0 2px; } .mobile-grid-field-file-size { font-size: 13px; color: rgba(0,0,0,.5); } .mobile-grid-field-file-error-text { font-size: 13px; color: red; overflow: hidden; display: none; height: 17px; } /* DateTime*/ .mobile-grid-field-date a, .mobile-grid-field-date span { font-size: 17px; color: #357ecf; outline: none; text-decoration: none; } .mobile-grid-field-date input, .mobile-grid-field-datetime input { padding: 0 19px; border: none; width: 100%; display: block; font-size: 17px; color: #acb0b3; line-height: 46px; } /* CRM elements */ .mobile-grid-data-crm-container { margin: 0; padding: 0; } .mobile-grid-data-crm-container dl, .mobile-grid-data-crm-container dt, .mobile-grid-data-crm-container dd { display: block; margin: 0; padding:0; } .mobile-grid-data-crm-container dl.mobile-grid-field-crm-view { padding-top: 10px; } dl.mobile-grid-field-crm-view dt, dl.mobile-grid-field-crm-view dd { display: inline; padding: 0 5px 0 0; } .mobile-grid-field-crm-view a { font-size: 17px; line-height: 22px; color: #2f83e2; outline: none; text-decoration: none; } dl.mobile-grid-field-crm-edit{margin: 0; padding-left:16px;} dl.mobile-grid-field-crm-edit dt, dl.mobile-grid-field-crm-edit dd { display: block; position: relative; line-height: 20px; padding: 13px 50px 13px 0; color: #000; } dl.mobile-grid-field-crm-edit dt { padding-left: 10px; border-bottom: 1px solid #dee0e3; } dl.mobile-grid-field-crm-edit dd { margin-left: 40px; border-bottom: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ dl.mobile-grid-field-crm-edit dt, dl.mobile-grid-field-crm-edit dd {border-bottom-width: .5px} } dl.mobile-grid-field-crm-edit dd:last-child { margin-left: 0; padding-left: 40px; } dl.mobile-grid-field-crm-edit dt:only-child { display: none; } .mobile-grid-restricted .mobile-grid-data-crm-container { background-color: transparent; } /* Custom */ .mobile-grid-field-custom-item { position: relative; margin-left: 19px; padding: 11px 19px 13px 0; color: #000; max-height: 90px; overflow: hidden; font-size: 17px; white-space: nowrap; border-bottom: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-custom-item {border-bottom-width: .5px} } .mobile-grid-field-custom-item:first-child { border: none; } /* Contact info for crm only */ .mobile-grid-field-contact-info-list { padding: 0; } .mobile-grid-field-contact-info .mobile-grid-field-contact-info-title { outline: none; text-decoration: none; font-size: 12px; padding: 0 24px 0 18px; display: inline-block; vertical-align: middle; line-height: 16px; box-sizing: border-box; width: 100%; } a.mobile-grid-field-contact-info-title { color: #357ecf; } span.mobile-grid-field-contact-info-title { padding-right: 19px; } .mobile-grid-field-contact-info-title:after { content: ''; width: 1px; height: 30px; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background: #dbdee2; z-index:1; } .mobile-grid-field-contact-info { border-top: 1px solid #dee0e3; font-size: 0; position: relative; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-contact-info {border-top-width: .5px} } .mobile-grid-field-contact-info:first-child { border: none; } .mobile-grid-field-contact-info-list .mobile-grid-button {font-size: 12px;} .mobile-grid-field-contact-info .mobile-grid-field-select, .mobile-grid-field-contact-info .mobile-grid-field-label { border: none; display: inline-block; vertical-align: middle; width: 40%; padding: 13px 0; } .mobile-grid-field-contact-info .mobile-grid-field-select:before { width: 2px; height:6px; background: #bed2e4; top: 23px; right:11px; } .mobile-grid-field-contact-info .mobile-grid-field-select:after { width: 6px; height:2px; background: #bed2e4; top: 21px; right: 9px; } .mobile-grid-field-contact-info .mobile-grid-field-text, .mobile-grid-field-contact-info .mobile-grid-field-textarea { border: none; display: inline-block; vertical-align: middle; width: 60%; padding: 13px 12px; } .mobile-grid-field-contacts-list { border-top: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-contacts-list {border-top-width: .5px} } .mobile-grid-field-contact, .mobile-grid-field-contact a { color: #0c74d5; font-size: 17px; text-decoration: none; } /* /Data types */ /* Buttons */ .mobile-grid-button { position: relative; line-height: 45px; text-align: left; display: block; font-size: 15px; text-decoration: none; color: #2f83e2; background: #fff; padding: 0 16px; box-sizing: border-box; border-top:1px solid #dee0e3; margin-top:-1px; } div.mobile-grid-button { border-top:1px solid #dee0e3; position: relative; text-align: left; background: #fff; box-sizing: border-box; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-button{ margin-top:-0.5px; border-top-width: .5px } } .mobile-grid-restricted .mobile-grid-button { border:none !important; background: transparent; line-height:20px; padding:0; } div.mobile-grid-button a { padding: 0 16px 0 0; line-height: 45px; font-size: 15px; text-decoration: none; color: #2f83e2; } a.mobile-grid-button:first-child { border: none; } a.mobile-grid-button.edit:before { content: ''; display: inline-block; width: 18px; height:18px; margin-right: 6px; vertical-align: middle; background: url(images/task-sprite.png) no-repeat 0 0; background-size: 18px; } .mobile-grid-button.disabled { color: grey; } input[type=file].mobile-grid-button-file { display: none; } @media only screen { input[type=file].mobile-grid-button-file { position: absolute; display: block; opacity: 0; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; width: 100%; } } .mobile-grid-field-del, .mobile-grid del { display: inline-block; width: 30px; height:30px; background: #e7e6eb; position: absolute; z-index: 2; right: 13px; top: 0; bottom:0; margin: auto; border-radius: 50%; } .mobile-grid-field-del:before, .mobile-grid del:before, .mobile-grid-field-del:after, .mobile-grid del:after { position: absolute; content: ''; background: #fff; width: 3px; height:14px; right:13px; top:50%; } .mobile-grid-field-del:after, .mobile-grid del:after { margin-top: -7px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mobile-grid-field-del:before, .mobile-grid del:before{ margin-top: -7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile-grid-field-accept { line-height: 20px; display: inline-block; width: 30px; height:30px; background: #e7e6eb; position: absolute; z-index: 2; right: 13px; top: 0; bottom: 0; margin: auto; border-radius: 50%; } .mobile-grid-field-accept:before { content:''; position: absolute; left: 7px; top: 9px; width: 17px; height:14px; background: url(images/task-sprite.png) no-repeat 1px -34px; background-size: 18px; } i.mobile-grid-menu { position: absolute; top: 0; bottom:0; right: 0; margin: auto; width: 53px; height:55px; } i.mobile-grid-menu:after { content: ""; position: absolute; left: 0; right: 0; bottom:0; top: 0; margin: auto; width: 5px; height:5px; border-radius: 50%; background: #c1c9cf; box-shadow: -9px 0 0 #c1c9cf, 9px 0 0 #c1c9cf; } .mobile-grid-button-panel { position: fixed; bottom:0; left: 0; right: 0; margin: auto; z-index: 3; background: #fff; display: block; width: 100%; padding: 0; box-sizing: border-box; border-top: 1px solid #dee0e3; box-shadow: 0 -5px 14px 0 rgba(0,0,0,0.16); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-button-panel {border-top-width: .5px} } .mobile-grid-button-panel.mobile-grid-button-panel-regular { position: inherit; bottom:0; left: 0; right: 0; } .mobile-grid-button-panel a { line-height: 55px; text-align: center; display: inline-block; font-size: 18px; width: 49%; text-decoration: none; color: #000; box-sizing: border-box; border-right: 1px solid #c0c7cd; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-button-panel a {border-right-width: .5px} } .mobile-grid-button-panel a:last-child{ border: none; } .mobile-grid-button-panel .mobile-grid-button-dis { color: rgba(87,104,108,.6); cursor: default; } .mobile-grid-field-button { display: inline-block; border-radius: 2px; cursor: pointer; font-family: "OpenSans-Bold", Helvetica, Arial, sans-serif; font-size: 15px; outline: none; padding: 0 18px; vertical-align: middle; text-decoration: none; text-shadow: none; white-space: nowrap; -webkit-font-smoothing: antialiased; -webkit-transition: background-color 0.2s linear, color 0.2s linear; transition: background-color 0.2s linear, color 0.2s linear; box-shadow: inset 0 0 0 1px #b5bec6; background: none; color: #535c69; height: 39px; line-height: 39px; margin: 22px auto; } .mobile-grid-field-button:hover { background: #cfd4d8; color: #535c69; } /* /Buttons */ /* Custom */ ol.mobile-grid-field-tasklinks, ol.mobile-grid-field-tasklinks li{ list-style-type: none; padding:0; margin: 0; } ol.mobile-grid-field-tasklinks { background: #fff; } .mobile-grid-field-button-container { background: #f0f3f5; text-align: center; } /* / Custom */ .mobile-grid-restricted { background: #fff; } .mobile-grid-restricted .mobile-grid-field { border-bottom: .5px solid #dee0e3; margin: 0 -1px 0 15px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-restricted .mobile-grid-field {border-bottom-width: .5px} } .mobile-grid-restricted .mobile-grid-field:last-child { border: none; } .mobile-grid-restricted .mobile-grid-field .mobile-grid-field { border: none; margin-left: 0; } .mobile-grid-field-divider { margin-left:16px; padding: 12px 55px 12px 0; display: block; position: relative; } .mobile-grid-field-divider i.mobile-grid-menu { height:26px; width: 35px; background: #fff; right: 10px; } .mobile-grid-field-divider:before { width:100%; content: ''; position: absolute; display: block; height:1px; background: #bcc3cb; } .mobile-grid-restricted .mobile-grid-field-divider { border:none; margin:0; } .mobile-grid-restricted .mobile-grid-field-title { font-size: 14px; color: #778490; padding-left: 0; border: none; margin-bottom: -9px; } .mobile-grid-restricted .mobile-grid-field-label, .mobile-grid-restricted .mobile-grid-field-text, .mobile-grid-restricted .mobile-grid-field-textarea, .mobile-grid-restricted .mobile-grid-field-select, .mobile-grid-restricted .mobile-grid-field-date, .mobile-grid-restricted .mobile-grid-field-custom, .mobile-grid-restricted .mobile-grid-field-file, .mobile-grid-restricted .mobile-grid-field-radio, .mobile-grid-restricted .mobile-grid-field-checkbox, .mobile-grid-restricted .mobile-grid-field .mobile-grid-field .mobile-grid-field-label { border: none; padding-left: 0; margin-left: -1px; width: auto; background: transparent; } .mobile-grid-restricted .bx-tasks-title .mobile-grid-field-label { padding-top: 9px; } .mobile-grid-restricted .mobile-grid-field-radio, .mobile-grid-restricted .mobile-grid-field-checkbox { padding: 0; } .mobile-grid-restricted .mobile-grid-field-custom { margin-left: 0; } .mobile-grid-restricted .mobile-grid-field .mobile-grid-field .mobile-grid-field-title { padding-left: 0; color: #000; font-size: 13px; } .mobile-grid-restricted .mobile-grid-field-select-user { width: auto; border: none; padding-left:2px; background: transparent; } .mobile-grid-restricted .mobile-grid-field-select-user-item-inner, .mobile-grid-restricted .mobile-grid-field-file-item-inner { border: none; margin-left: 0; } .mobile-grid-restricted .mobile-grid-button a, .mobile-grid-restricted a.mobile-grid-button { padding-left: 0; background: transparent; line-height: 30px; } .mobile-grid-restricted .mobile-grid-field-tasks-checklist-item { margin-left: 0; border: none; padding: 11px 45px 11px 32px; } .mobile-grid-restricted .mobile-grid-field-radio label, .mobile-grid-restricted .mobile-grid-field-checkbox label { border: none; padding: 13px 50px 13px 0; } .mobile-grid-restricted .mobile-grid-data-crm-container span.mobile-grid-field-crm { padding: 0; } .mobile-grid-restricted .mobile-grid-field .mobile-grid-field .mobile-grid-field-label, .mobile-grid-restricted .mobile-grid-field .mobile-grid-field .mobile-grid-field-select { padding-left: 0; border: none; } .mobile-grid-block.mobile-grid-data-crm-container .mobile-grid-field-custom { border: none; } .mobile-grid-field-icon { position: absolute; max-width: 20px; right: 16px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } .mobile-grid-field-icon-phone { margin-top: -3px; } .mobile-grid-field-desc { position: relative; background: #fff; padding: 14px 16px; border-top: .5px solid #dee0e3; border-bottom:.5px solid #dee0e3; } .mobile-grid-restricted .mobile-grid-field-desc { padding-left:0; border-top:none; border-bottom: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-restricted .mobile-grid-field-desc {border-bottom-width: .5px} } .mobile-grid-field-desc-item { line-height: 16px; overflow: hidden; } .mobile-grid-field-desc-item-value { font-size: 18px; color: #000; float: right; } .mobile-grid-field-desc-item-value span { font-size: 9px; text-transform: uppercase; } .mobile-grid-field-desc-item-title { font-size: 15px; color: #7c7c7c; } .mobile-grid-field-desc-item-total .mobile-grid-field-desc-item-value { font-weight: bold; } .mobile-grid-field-textarea-name { position: relative; line-height: 20px; padding: 13px 55px 11px 16px; color: #000; max-height: 78px; overflow: hidden; font-size: 18px; border-bottom: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-textarea-namec {border-bottom-width: .5px} } .mobile-grid-field-textarea-photo { width: 33px; height: 33px; background: #717e8a; border-radius: 50%; text-align: center; line-height: 33px; display: inline-block; vertical-align: middle; float: left; margin: 0 6px 0 0; position: relative; } .mobile-grid-field-textarea-photo img { position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto; width: 20px; height: 20px; } .mobile-grid-field-textarea-name .mobile-grid-field-textarea-name-title { vertical-align: middle; line-height: 18px; max-height: 18px; overflow: hidden; display: block; position: relative; padding-right: 12px; } .mobile-grid-field-textarea-price { position: absolute; font-size: 12px; font-weight: bold; bottom: 4px; } .mobile-grid-field-textarea-price span { font-size: 7px; text-transform: uppercase; font-weight: normal; } .mobile-grid-field-textarea-amt { position: relative; line-height: 28px; color: #307cd2; font-size: 16px; padding: 9px 16px; background: #fff; border-bottom: 1px solid #dee0e3; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ .mobile-grid-field-textarea-amt {border-bottom-width: .5px} } .mobile-grid-restricted .mobile-grid-field-textarea-amt { padding-left:0; } .mobile-grid-field-textarea-amt:before, .mobile-grid-field-textarea-amt:after { content: ''; position: absolute; height: 1px; background: #fff; width: 19px; left: 0; top: -2px; z-index: 2; } .mobile-grid-field-textarea-amt:after { top: auto; bottom: -1px; } .mobile-grid-field-textarea-amt:last-child:after { content: none; } .mobile-grid-field-amt-minus, .mobile-grid-field-amt-plus { position: relative; display: inline-block; vertical-align: middle; width: 28px; height: 28px; background: #ecedf2; border-radius: 50%; } .mobile-grid-field-amt-minus:after, .mobile-grid-field-amt-plus:after, .mobile-grid-field-amt-plus:before { position: absolute; content: ''; height: 2px; width: 16px; background: #878f94; top: 0; bottom:0; left: 0; right: 0; margin: auto; } .mobile-grid-field-amt-qt { display: inline-block; vertical-align: middle; line-height: 26px; padding: 0 20px; } .mobile-grid-field-amt-plus:before { width: 2px; height: 16px; } .mobile-grid-field-textarea-sum { position: relative; font-size: 16px; font-weight: bold; color: #000; float: right; padding-right: 13px; line-height: 27px; background: #fff; } .mobile-grid-field-textarea-sum:before { content: '='; position: absolute; top: 0; bottom: 0; margin: auto; left: -14px; color: #c1c9cf; } .mobile-grid-field-textarea-sum span { font-size: 9px; text-transform: uppercase; } .mobile-grid-field .mobile-grid-field-custom #mobile-crm-contact-edit-company .mobile-grid-field{ margin-bottom: 0; } .mobile-grid-field .mobile-grid-field-custom #mobile-crm-contact-edit-company .mobile-grid-field .mobile-grid-field-label{ border-top: 0; padding-bottom: 2px; }