Current Path : /var/www/www-root/data/www/www.monolith-realty.ru/bitrix/js/ui/forms/ |
Current File : /var/www/www-root/data/www/www.monolith-realty.ru/bitrix/js/ui/forms/ui.forms.css |
:root { /*size*/ --ui-field-size-lg: var(--ui-size-6xl); --ui-field-size-md: var(--ui-size-5xl); --ui-field-size-sm: var(--ui-size-3xl); --ui-field-size-xs: var(--ui-size-xl2); /*color*/ --ui-field-color-success: #9dcf00; --ui-field-color-danger: #ff5752; --ui-field-color-primary: #66afe9; --ui-field-color-focused: #2fc6f6; --ui-field-color-link: #0b66c3; --ui-field-color-warning: #ff5752; --ui-field-color-orange: #ffa900; --ui-field-color-disabled: rgba(244, 244, 244, .65625); --ui-field-color-disabled-secondary: rgba(198, 205, 211, .372424); --ui-field-color-light-gray: #fdfdfd; --ui-field-color-border-default: 198, 205, 211; --ui-field-color-gray-37: rgba(198, 205, 211, .37); --ui-field-color-gray-17: rgba(82, 92, 105, .17); --ui-field-color-gray-06: rgba(82, 92, 105, .06); --ui-field-color-white-50: rgba(255, 255, 255, .5); --ui-field-color-white-44: rgba(255, 255, 255, .44); --ui-field-color-white-14: rgba(255, 255, 255, .14); --ui-field-size: var(--ui-field-size-md); --ui-field-border-radius: var(--ui-border-radius-3xs); --ui-field-spacing: 12px; } /*region Base style*/ .ui-ctl { position: relative; display: flex; flex-direction: column; box-sizing: border-box; max-width: 100%; width: 320px; vertical-align: middle; align-items: flex-start; justify-content: center; min-height: var(--ui-field-size); } .ui-ctl-element { z-index: 1; display: block; overflow: hidden; box-sizing: border-box; margin: 0; padding: 0 11px; width: 100%; height: var(--ui-field-size); outline: none; border: 1px solid rgb(var(--ui-field-color-border-default)); border-radius: var(--ui-border-radius-2xs); background-color: var(--ui-color-palette-white-base); color: var(--ui-color-palette-black-base); vertical-align: middle; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: 400 14px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); transition: border .3s ease, background-color .3s ease, color .3s ease, padding .3s ease; flex: 1; appearance: none; } .ui-ctl-element.--error, .ui-tag-selector-outer-container.--error { border-color: var(--ui-field-color-danger); } .ui-ctl-element::placeholder { color: var(--ui-color-palette-gray-40); } div.ui-ctl-element { line-height: calc(var(--ui-field-size) - 2px); } .ui-ctl-element:hover { border-color: var(--ui-field-color-primary); color: #535c69; } .ui-ctl-element:focus, .ui-ctl-element:active { outline: none; border-color: var(--ui-field-color-primary); color: #535c69; } .ui-ctl + .ui-ctl { margin-left: var(--ui-field-spacing); } /*region Fix for IOS background */ .bx-ios input.ui-ctl-element, .bx-ios input.ui-ctl-element:hover, .bx-ios input.ui-ctl-element:active { background-image: linear-gradient(transparent, transparent) } /*endregion*/ /*endregion*/ .ui-ctl-spacing-right .ui-ctl { margin-right: var(--ui-field-spacing); margin-left: 0; } .ui-ctl-spacing-right .ui-ctl:last-child { margin-right: 0; } .ui-ctl-spacing-left .ui-ctl { margin-left: var(--ui-field-spacing); margin-right: 0; } .ui-ctl-spacing-left .ui-ctl:first-child { margin-left: 0; } /*region Single modifications*/ .ui-ctl-inline { display: inline-flex !important; width: auto; } .ui-ctl-inline + .ui-ctl-inline { margin-left: 10px; } .ui-ctl-block { display: flex !important; } .ui-ctl-custom { width: auto; } .ui-ctl-no-border .ui-ctl-element { border-color: var(--ui-color-background-transparent) !important; background-color: var(--ui-color-background-transparent) !important; } .ui-ctl-underline .ui-ctl-element { border-top-color: var(--ui-color-background-transparent) !important; border-right-color: var(--ui-color-background-transparent) !important; border-left-color: var(--ui-color-background-transparent) !important; border-radius: 0 !important; background-color: var(--ui-color-background-transparent) !important; } .ui-ctl-no-padding .ui-ctl-element { padding-right: 0 !important; padding-left: 0 !important; } /*endregion*/ /*region Round*/ .ui-ctl-round .ui-ctl-element { padding-right: calc(var(--ui-field-size) / 2); padding-left: calc(var(--ui-field-size) / 2); border-radius: calc(var(--ui-field-size) / 2); } /*endregion*/ /*region Size*/ /*region Height*/ .ui-ctl-md { --ui-field-size: var(--ui-field-size-md); } .ui-ctl-lg { --ui-field-size: var(--ui-field-size-lg); } .ui-ctl-sm { --ui-field-size: var(--ui-field-size-sm); } .ui-ctl-xs { --ui-field-size: var(--ui-field-size-xs); } /*endregion*/ /*region Width*/ .ui-ctl-w100 { max-width: 100% !important; width: 100% !important; } .ui-ctl + .ui-ctl.ui-ctl-w100 { --ui-field-spacing: 0; } .ui-ctl-w75 { max-width: 75% !important; width: 75% !important; } .ui-ctl-w50 { max-width: 50% !important; width: 50% !important; } .ui-ctl-w33 { max-width: 33.33% !important; width: 33.33% !important; } .ui-ctl-w25 { max-width: 25% !important; width: 25% !important; } .ui-ctl-w10 { max-width: 10% !important; width: 10% !important; } .ui-ctl-wa { max-width: initial; width: auto; } .ui-ctl-wd { max-width: 320px; width: 320px; } /*endregion*/ /*endregion*/ /*region Color*/ /*region Primary form and :hover*/ .ui-ctl-element:hover, .ui-ctl-element:focus, .ui-ctl-hover .ui-ctl-element, .ui-ctl-active .ui-ctl-element, .ui-ctl-hover .ui-ctl-element, .ui-ctl-hover .ui-ctl-element:hover, .ui-ctl-hover .ui-ctl-element:focus { border-color: var(--ui-field-color-primary); } /*endregion*/ /*region Focused form*/ .ui-ctl-focused .ui-ctl-element, .ui-ctl-focused .ui-ctl-element:hover, .ui-ctl-focused .ui-ctl-element:focus { border-color: var(--ui-field-color-focused); } /*endregion*/ /*region Success form*/ .ui-ctl-success .ui-ctl-element, .ui-ctl-success .ui-ctl-element:hover, .ui-ctl-success .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-success { border-color: var(--ui-field-color-success); } /*endregion*/ /*region Warning field*/ .ui-ctl-warning .ui-ctl-element, .ui-ctl-warning .ui-ctl-element:hover, .ui-ctl-warning .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-warning { border-color: var(--ui-field-color-warning); } /*endregion*/ /*region Orange field*/ .ui-ctl-orange .ui-ctl-element, .ui-ctl-orange .ui-ctl-element:hover, .ui-ctl-orange .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-orange { border-color: var(--ui-field-color-orange); } /*region Link form*/ .ui-ctl-link .ui-ctl-element, .ui-ctl-link .ui-ctl-element:hover, .ui-ctl-link .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-link { border-color: var(--ui-field-color-link); border-style: dashed; } /*endregion*/ /*region White special round form*/ .ui-ctl-white-special-round .ui-ctl-element, .ui-ctl-white-special-round .ui-ctl-element:hover, .ui-ctl-white-special-round .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-white-special-round { border-color: var(--ui-color-palette-white-base); border-radius: var(--ui-border-radius-3xl); } /*endregion*/ /*region Default light form*/ .ui-ctl-default-light .ui-ctl-element, .ui-ctl-default-light .ui-ctl-element:hover, .ui-ctl-default-light .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-default-light { border-color: rgba(var(--ui-field-color-border-default), var(--ui-opacity-70)); background-color: rgba(var(--ui-color-palette-white-base-rgb), var(--ui-opacity-70)); } /*endregion*/ /*region White form*/ .ui-ctl-white .ui-ctl-element, .ui-ctl-white .ui-ctl-element:hover, .ui-ctl-white .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-white { border-color: var(--ui-color-palette-white-base); background-color: var(--ui-color-palette-white-base); } /*endregion*/ /*region Transp form*/ .ui-ctl-transp .ui-ctl-element, .ui-ctl-transp .ui-ctl-element:hover, .ui-ctl-transp .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-transp { border-color: rgb(var(--ui-field-color-border-default)); background-color: rgba(var(--ui-color-palette-white-base-rgb), var(--ui-opacity-50)); } /*endregion*/ /*region Transp white form*/ .ui-ctl-transp-white .ui-ctl-element, .ui-ctl-transp-white .ui-ctl-element:hover, .ui-ctl-transp-white .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-transp-white { border-color: rgba(var(--ui-color-palette-white-base-rgb), .44); background-color: rgba(var(--ui-color-palette-white-base-rgb), .143824); color: rgba(var(--ui-color-palette-white-base-rgb), 1); } .ui-ctl-transp-white .ui-ctl-element::placeholder { color: rgba(var(--ui-color-palette-white-base-rgb), var(--ui-opacity-50)); } /*endregion*/ /*region Transp gray form*/ .ui-ctl-transp-gray .ui-ctl-element, .ui-ctl-transp-gray .ui-ctl-element:hover, .ui-ctl-transp-gray .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-transp-gray { border-color: rgba(var(--ui-color-palette-gray-90-rgb), .17223); background-color: rgba(var(--ui-color-palette-gray-90-rgb), .0560806); } /*endregion*/ /*region Transp white borderless form*/ .ui-ctl-transp-white-borderless .ui-ctl-element, .ui-ctl-transp-white-borderless .ui-ctl-element:hover, .ui-ctl-transp-white-borderless .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-transp-white-borderless { border: none; background-color: rgba(var(--ui-color-palette-white-base-rgb), .143824); color: rgba(var(--ui-color-palette-white-base-rgb), 1); } .ui-ctl-transp-white-borderless .ui-ctl-element::placeholder { color: rgba(var(--ui-color-palette-white-base-rgb), var(--ui-opacity-50)); } /*endregion*/ /*endregion*/ /*region Disabled field*/ .ui-ctl-element[disabled], .ui-ctl-element[disabled]:hover, .ui-ctl-element[disabled]:active, .ui-ctl-element[disabled="disabled"], .ui-ctl-element[disabled="disabled"]:hover, .ui-ctl-element[disabled="disabled"]:active, .ui-ctl-disabled .ui-ctl-element, .ui-ctl-disabled .ui-ctl-element:hover, .ui-ctl-disabled .ui-ctl-element:focus, .ui-ctl-inactive .ui-ctl-element, .ui-ctl-inactive .ui-ctl-element:hover, .ui-ctl-inactive .ui-ctl-element:focus, .ui-ctl.ui-ctl__combined-input.ui-ctl-inactive, .ui-ctl.ui-ctl__combined-input.ui-ctl-disabled { border-color: var(--ui-field-color-disabled-secondary); background-color: var(--ui-field-color-disabled); color: #a9adb2; resize: none !important; cursor: not-allowed; } /*endregion*/ /*region Inactive form*/ .ui-ctl-inactive .ui-ctl-element, .ui-ctl-inactive .ui-ctl-element:hover, .ui-ctl-inactive .ui-ctl-element:focus { border-color: var(--ui-color-overlay-base); background-color: rgba(var(--ui-field-color-border-default), var(--ui-opacity-50)); } /*endregion*/ /*endregion*/ /*region Before & After*/ .ui-ctl-before, .ui-ctl-after, .ui-ctl-ext-after, .ui-ctl-ext-before, .ui-ctl-icon { position: absolute; top: 1px; z-index: 10; display: block; border: none; background-color: var(--ui-color-background-transparent); width: var(--ui-field-size); height: calc(var(--ui-field-size) - 2px); } .ui-ctl-before { left: 1px; } .ui-ctl-ext-before-icon.ui-ctl-before-icon .ui-ctl-ext-before { left: var(--ui-field-size); } .ui-ctl-after, .ui-ctl-ext-after { right: -2px; } .ui-ctl-ext-after-icon.ui-ctl-after-icon .ui-ctl-after { right: var(--ui-field-size); } .ui-ctl-ext-before-icon, .ui-ctl-before-icon .ui-ctl-element { padding-left: var(--ui-field-size) !important; } .ui-ctl-ext-after-icon, .ui-ctl-after-icon .ui-ctl-element { padding-right: var(--ui-field-size) !important; } .bx-firefox .ui-ctl-after-icon .ui-ctl-element { padding-right: calc(var(--ui-field-size) - 5px) !important; } /*endregion*/ /*region COMBINED INPUT */ .ui-ctl.ui-ctl__combined-input { flex-direction: row; align-items: center; padding: 0 5px; border: 1px solid rgb(var(--ui-field-color-border-default)); border-radius: var(--ui-border-radius-3xs); transition: border .3s ease; } .ui-ctl.ui-ctl__combined-input:hover { border-color: var(--ui-field-color-primary); } .ui-ctl.ui-ctl__combined-input .ui-ctl-icon { position: static; padding: 0; width: 26px; background-repeat: no-repeat; background-position: center; } .ui-ctl.ui-ctl__combined-input .ui-ctl-element { order: 0; padding: 0 4px; height: calc(var(--ui-field-size) - 2px); border: none; border-radius: var(--ui-border-radius-none); } .ui-ctl.ui-ctl__combined-input .ui-ctl-before { order: -1; } .ui-ctl.ui-ctl__combined-input .ui-ctl-after { order: 1; } .ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-before, .ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-after { position: relative; display: flex; align-items: center; width: auto; } .ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-before { padding-right: 3px; margin-right: 3px; } .ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-before:after, .ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-after:before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 18px; background-color: var(--ui-color-palette-gray-20); transform: translateY(-50%); z-index: 10; } .ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-after:before { left: 0; right: auto; } .ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-after { padding-left: 3px; margin-left: 3px; } /*endregion*/ /*region icons*/ .ui-ctl-after[class*=ui-ctl-icon-], .ui-ctl-before[class*=ui-ctl-icon-], .ui-ctl-ext-before[class*=ui-ctl-icon-], .ui-ctl-ext-after[class*=ui-ctl-icon-] { background-position: center; background-size: 16px auto; background-repeat: no-repeat; /*opacity: .78;*/ transition: 250ms linear opacity; /*animation: ui-ctl-show-icon 500ms 1;*/ pointer-events: none; } .ui-ctl.ui-ctl__combined-input .ui-ctl-icon, .ui-ctl.ui-ctl__combined-input.ui-ctl-after[class*=ui-ctl-icon-], .ui-ctl.ui-ctl__combined-input.ui-ctl-before[class*=ui-ctl-icon-], .ui-ctl.ui-ctl__combined-input.ui-ctl-ext-before[class*=ui-ctl-icon-], .ui-ctl.ui-ctl__combined-input.ui-ctl-ext-after[class*=ui-ctl-icon-] { pointer-events: auto; } @keyframes ui-ctl-show-icon { 0% { opacity: 0; } 100% { opacity: .78; } } /*.ui-ctl:hover .ui-ctl-before[class*=ui-ctl-icon-],*/ /*.ui-ctl:hover .ui-ctl-after[class*=ui-ctl-icon-],*/ /*.ui-ctl:hover .ui-ctl-ext-after[class*=ui-ctl-icon-] {*/ /* opacity: 1;*/ /*}*/ .ui-ctl .ui-ctl-icon-clear.ui-ctl-after[class*=ui-ctl-icon-]:hover, .ui-ctl.ui-ctl__combined-input .ui-ctl-icon.ui-ctl-icon-clear:hover, .ui-ctl.ui-ctl__combined-input .ui-ctl-icon.ui-ctl-icon-clear:hover { opacity: 1; } .ui-ctl-icon-btn, button.ui-ctl-before, button.ui-ctl-ext-before, button.ui-ctl-after, button.ui-ctl-ext-after, a.ui-ctl-before, a.ui-ctl-ext-before, a.ui-ctl-after, a.ui-ctl-ext-after { outline: none !important; cursor: pointer; pointer-events: auto !important; } button.ui-ctl-before:active, button.ui-ctl-after:active { background-color: #e0e5ea; } /*calendar*/ .ui-ctl-icon-dots { background-image: url(/bitrix/js/ui/forms/images/dots.svg); } /*calendar*/ .ui-ctl-icon-calendar { background-image: url(/bitrix/js/ui/forms/images/calendar.svg); } /*calendar*/ .ui-ctl-icon-calendar-dot { background-image: url(/bitrix/js/ui/forms/images/calendar-dot.svg); } /*clock*/ .ui-ctl-icon-clock { background-image: url(/bitrix/js/ui/forms/images/clock.svg); } .ui-ctl.ui-ctl__combined-input .ui-ctl-icon.ui-ctl-icon-clock { background-size: 16px auto; } /*search*/ .ui-ctl-icon-search { background-image: url(/bitrix/js/ui/forms/images/search.svg); } /*phone*/ .ui-ctl-icon-phone { background-image: url(/bitrix/js/ui/forms/images/phone.svg); } /*mail*/ .ui-ctl-icon-mail { background-image: url(/bitrix/js/ui/forms/images/mail.svg); } /*chain*/ .ui-ctl-icon-chain { background-image: url(/bitrix/js/ui/forms/images/chain.svg); } /*unchain*/ .ui-ctl-icon-unchain { background-image: url(/bitrix/js/ui/forms/images/unchain.svg); } .ui-ctl-icon-change { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2215%22%20height%3D%2218%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M9.928%205.836H1.073V4.415h8.855V.895l4.24%204.241-4.24%204.24v-3.54zm-4.91%206.692h8.886v1.42H5.018v3.52l-4.24-4.24%204.24-4.24v3.54z%22%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E') } /*forward*/ .ui-ctl-icon-forward { background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2213%22%20height%3D%2213%22%3E%3Cpath%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22%20opacity%3D%221%22%20d%3D%22M4.89%201.551l3.962%203.961H.383v1.977h8.469L4.89%2011.45l1.398%201.398L12.636%206.5%206.288.153z%22/%3E%3C/svg%3E); } /*arrow-down*/ .ui-ctl-icon-arrow-down { background-image: url(/bitrix/js/ui/forms/images/arrow-down.svg); background-size: 14px auto; } /*close-special*/ .ui-ctl-icon-close-special { background-image: url(/bitrix/js/ui/forms/images/close-special.svg); } /*location*/ .ui-ctl-icon-location { background-image: url(/bitrix/js/ui/forms/images/location.svg); } .ui-ctl-icon-forward.ui-ctl-before[class*=ui-ctl-icon-], .ui-ctl-icon-forward.ui-ctl-after[class*=ui-ctl-icon-] { background-size: 14px auto; opacity: .56; } /*endregion*/ /*angle*/ .ui-ctl-icon-angle { background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23828B95'%3E%3Cpath d='M7.071 10.858l1.414-1.414 5.657 5.656-1.414 1.414z'/%3E%3Cpath d='M16.97 9.444l1.415 1.414-5.657 5.657-1.414-1.415z'/%3E%3C/g%3E%3C/svg%3E"); } .ui-ctl-icon-angle.ui-ctl-before[class*=ui-ctl-icon-], .ui-ctl-icon-angle.ui-ctl-after[class*=ui-ctl-icon-] { background-size: 26px auto; } /*endregion*/ /*crm-dynamic*/ .ui-ctl-icon-crm-dynamic.ui-ctl-before[class*=ui-ctl-icon-], .ui-ctl-icon-crm-dynamic.ui-ctl-after[class*=ui-ctl-icon-] { background-size: 18px auto; } .ui-ctl-icon-crm-dynamic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2380868E' opacity='.7'/%3E%3Cpath fill='%23FFF' d='M10.989 7.778a.321.321 0 01.378.171l.313.657a.023.023 0 00.021.013c.34-.012.671.039.983.146l.49-.548a.322.322 0 01.413-.057l.368.233a.321.321 0 01.124.397l-.283.67a.023.023 0 00.004.025c.146.155.274.329.382.518l.733-.084a.321.321 0 01.346.23l.12.42a.321.321 0 01-.17.379l-.654.311a.023.023 0 00-.013.021c.01.273-.022.542-.091.799a.023.023 0 00.008.024l.58.461a.32.32 0 01.082.408l-.212.381a.32.32 0 01-.388.147l-.7-.248a.023.023 0 00-.025.006c-.18.192-.39.36-.624.496a.023.023 0 00-.011.022l.082.722a.321.321 0 01-.23.346l-.42.12a.32.32 0 01-.378-.17l-.32-.67a2.738 2.738 0 01-.955-.131.023.023 0 00-.024.006l-.488.545a.322.322 0 01-.412.057l-.368-.234a.321.321 0 01-.124-.396l.282-.667a.023.023 0 00-.005-.025 2.738 2.738 0 01-.393-.525.023.023 0 00-.022-.011l-.727.083a.321.321 0 01-.346-.23l-.12-.42a.321.321 0 01.171-.38l.66-.314a.023.023 0 00.013-.02c-.008-.273.023-.54.092-.797a.023.023 0 00-.008-.024l-.559-.444a.322.322 0 01-.082-.408l.212-.381a.322.322 0 01.389-.147l.671.238c.009.003.018 0 .024-.006.183-.196.394-.366.632-.504a.023.023 0 00.011-.022l-.082-.723a.32.32 0 01.23-.345zm1.608-4.803c.522 0 .946.423.946.945v3.112a4.342 4.342 0 00-.945-.284V3.92H4.972V13.97h2.633c.194.343.428.66.696.946H4.973a.946.946 0 01-.945-.946V3.92c0-.522.423-.945.945-.945h7.624zm.638 8.313a1.451 1.451 0 00-2.142-1.187c-.446.237-.787.852-.752 1.356a1.451 1.451 0 002.142 1.187c.495-.263.791-.797.752-1.356zM9.62 7.23c-.48.248-.913.574-1.283.96h-.054a.473.473 0 01-.473-.473v-.014c0-.262.212-.473.473-.473H9.62zm-2.756 0a.473.473 0 110 .945h-.28a.473.473 0 110-.945h.28zm4.064-1.891c.26 0 .472.211.472.472v.015a.473.473 0 01-.472.473H8.283a.473.473 0 01-.473-.473v-.015c0-.26.212-.472.473-.472h2.645zm-4.064 0a.473.473 0 110 .945h-.28a.473.473 0 110-.945h.28z'/%3E%3C/g%3E%3C/svg%3E"); } .ui-ctl-icon-search.ui-ctl-before[class*=ui-ctl-icon-] { opacity: var(--ui-opacity-50); } /*endregion*/ /*crm*/ .ui-ctl-icon-crm-contact { background-size: 16px auto; background-image: url(/bitrix/js/ui/forms/images/crm-contact.svg); } .ui-ctl-icon-crm-lead { background-image: url(/bitrix/js/ui/forms/images/crm-lead.svg); } .ui-ctl-icon-crm-deal { background-image: url(/bitrix/js/ui/forms/images/crm-deal.svg); } .ui-ctl-icon-crm-company { background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%229%22%20fill%3D%22%2380868E%22%20opacity%3D%22.7%22/%3E%3Cg%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M11.575%207.291V4.04a.5.5%200%200%200-.5-.5H5.189a.5.5%200%200%200-.5.5v9.656a.5.5%200%200%200%20.504.5l8.107-.068a.5.5%200%200%200%20.496-.5V7.791a.5.5%200%200%200-.5-.5h-1.721zm-1.262%205.493h-.938v-1.741h-2.67v1.741h-.937V4.813h4.612l-.067%207.971zm2.411-.335h-1.34v-1.34h1.34v1.34zm0-2.612h-1.34v-1.34h1.34v1.34z%22/%3E%3Cpath%20d%3D%22M6.906%205.818h2.437v1.339H6.906zM6.906%208.43h2.457v1.34H6.906z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E) no-repeat; } /*Loader*/ .ui-ctl-icon-loader { background-image: url(/bitrix/js/ui/forms/images/loader.svg); } /*clear*/ .ui-ctl-icon-clear { background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.279 1.78L7.343 5.716l3.936 3.936L9.65 11.28 5.716 7.342 1.781 11.28.153 9.65 4.09 5.715.153 1.781 1.781.153l3.935 3.935L9.651.153l1.628 1.628z' fill='%23525C69' fill-rule='evenodd'/%3E%3C/svg%3E"); } .ui-ctl-icon-clear.ui-ctl-before[class*=ui-ctl-icon-], .ui-ctl-icon-clear.ui-ctl-after[class*=ui-ctl-icon-], .ui-ctl.ui-ctl__combined-input .ui-ctl-icon.ui-ctl-icon-clear { background-size: 10px auto; opacity: var(--ui-opacity-50); cursor: pointer; } /*endregion*/ /*border*/ .ui-ctl-icon-border:after { content: ''; position: absolute; top: 50%; transform: translate(0, -50%); right: 8px; width: 1px; height: 18px; background: #edeef2; } /*endregion*/ /*region Types*/ .ui-ctl-row { flex-direction: row; align-items: center; } .ui-ctl-row + .ui-ctl-row { margin-top: 12px; } .ui-ctl-column { flex-direction: column; align-content: flex-start; } .ui-ctl-label-text { padding: 0 0 7px; font: var(--ui-font-size-sm)/17px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); font-size: var(--ui-font-size-md); color: var(--ui-color-base-90); } .ui-ctl-label-text-error { color: var(--ui-color-text-alert); } .ui-ctl-row .ui-ctl-label-text { padding: 0 10px; } /*region Type Dropdown*/ /*.ui-ctl-dropdown div.ui-ctl-element { padding-top: 10px; }*/ /* Comment on task 223275 */ /*endregion*/ /*region Type Multiple Select*/ .ui-ctl-multiple-select { height: auto; } .ui-ctl-multiple-select .ui-ctl-element { overflow-y: auto; padding: 0; } .ui-ctl-multiple-select .ui-ctl-element option { padding: 0 11px; height: 18.5px; transition: 250ms linear all; } .ui-ctl-multiple-select { min-height: calc(var(--ui-field-size) * 3); height: calc(var(--ui-field-size) * 3); } .ui-ctl-multiple-select select.ui-ctl-element { min-height: calc(var(--ui-field-size) * 3 - 2px); height: calc(var(--ui-field-size) * 3 - 2px); } /*endregion*/ /*region Type Finder Select*/ .ui-ctl-finer { height: auto; } .ui-ctl-finer div.ui-ctl-element { display: flex; padding-right: 30px; padding-left: 0; height: auto; flex-wrap: wrap; } .ui-ctl-option-selected { position: relative; z-index: 2; display: inline-block; margin: 3px 0 3px 3px; padding: 0 30px 0 9px; height: calc(var(--ui-field-size) - 8px); border-radius: var(--ui-border-radius-3xs); background: var(--ui-color-tag-1); vertical-align: middle; font: var(--ui-font-size-lg)/calc(var(--ui-field-size) - 8px) var(--ui-font-family-primary, var(--ui-font-family-helvetica)); transition: background .2s; } /*endregion*/ /*region Textarea*/ .ui-ctl-textarea { display: block; max-width: 100%; max-height: 100%; width: 491px; height: auto; } .ui-ctl-textarea.ui-ctl-sm { width: 292px; } .ui-ctl-textarea textarea.ui-ctl-element, .ui-ctl > div.ui-ctl-element[contenteditable] { display: block; overflow: auto; padding-top: 6px; padding-bottom: 6px; min-width: 0; max-width: 100%; max-height: 100%; width: 100%; height: auto; white-space: normal; line-height: normal; flex: auto; } .ui-ctl-no-resize textarea.ui-ctl-element { resize: none; } .ui-ctl-resize-y textarea.ui-ctl-element { resize: vertical; } .ui-ctl-resize-x textarea.ui-ctl-element { resize: horizontal; } .ui-ctl-textarea { min-height: calc(var(--ui-field-size) * 3); height: calc(var(--ui-field-size) * 3); } .ui-ctl-textarea textarea.ui-ctl-element { /*min-height: calc(var(--ui-field-size) * 3.5 - 2px);*/ height: calc(var(--ui-field-size) * 3.5 - 2px); white-space: pre-wrap; } .ui-ctl-textarea.ui-ctl-sm textarea.ui-ctl-element { min-height: calc(var(--ui-field-size) * 3 - 2px); height: calc(var(--ui-field-size) * 3 - 2px); } /*endregion*/ /*region Datetime variables*/ .ui-ctl-time, .ui-ctl-date, .ui-ctl-datetime { --icon-width-after: 11px; --icon-width-before: 11px; } .ui-ctl-time.ui-ctl-after-icon, .ui-ctl-date.ui-ctl-after-icon, .ui-ctl-datetime.ui-ctl-after-icon { --icon-width-after: var(--ui-field-size); } .ui-ctl-date.ui-ctl-before-icon, .ui-ctl-time.ui-ctl-before-icon, .ui-ctl-datetime.ui-ctl-before-icon { --icon-width-before: var(--ui-field-size); } /*endregion*/ /*region Datetime*/ .ui-ctl-datetime { max-width: calc(125px + var(--icon-width-before) + var(--icon-width-after)); width: calc(125px + var(--icon-width-before) + var(--icon-width-after)); } /*.ui-ctl-datetime div.ui-ctl-element { padding-top: 10px; }*/ /*endregion*/ /*region Date*/ .ui-ctl-date { max-width: calc(80px + var(--icon-width-before) + var(--icon-width-after)); width: calc(80px + var(--icon-width-before) + var(--icon-width-after)); } .ui-ctl-date div.ui-ctl-element { padding-top: 10px; line-height: normal; } /*endregion*/ /*region Time*/ .ui-ctl-time { max-width: calc(45px + var(--icon-width-before) + var(--icon-width-after)); width: calc(45px + var(--icon-width-before) + var(--icon-width-after)); } .ui-ctl-time div.ui-ctl-element { padding-top: 10px; } /*endregion*/ /*region File link*/ .ui-ctl-file-link { display: inline-flex; width: auto; height: auto; } .ui-ctl-file-link .ui-ctl-element { display: none; } .ui-ctl-file-link .ui-ctl-label-text { display: inline; margin: 0; padding: 0; outline: none; border: none; border-bottom: 1px dashed; color: #7a818a; vertical-align: middle; text-decoration: none; text-shadow: none; white-space: nowrap; font: var(--ui-font-size-sm) var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular); cursor: pointer; transition: color .2s, border-color .2s; -webkit-font-smoothing: antialiased; } .ui-ctl-file-link .ui-ctl-label-text:hover { border-bottom-color: var(--ui-color-background-transparent); color: #535c69; } .ui-ctl-file-link .ui-ctl-label-text:active { } /*endregion*/ /*region File Button*/ .ui-ctl-file-btn { display: inline-flex; width: auto; height: var(--ui-field-size-md); } .ui-ctl-file-btn .ui-ctl-element { display: none; } .ui-ctl-file-btn .ui-ctl-label-text { display: inline-block; margin: 0; padding: 0 18px; outline: none; border: none; border-radius: var(--ui-field-border-radius); background: #ecedef; box-shadow: 0 0 0 1px rgb(var(--ui-field-color-border-default)) inset; color: #7a818a; vertical-align: middle; text-decoration: none; text-transform: uppercase; text-shadow: none; white-space: nowrap; font: var(--ui-font-size-xs) var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-bold); line-height: calc(var(--ui-field-size) - 2px); cursor: pointer; transition: background-color .2s, color .2s; -webkit-font-smoothing: antialiased; } .ui-ctl-file-btn .ui-ctl-label-text:hover { background: #cfd4d8; color: #535c69; } .ui-ctl-file-btn .ui-ctl-label-text:active { background: #868d95; box-shadow: none !important; color: var(--ui-color-on-primary); } /*endregion*/ /*region File Drop*/ .ui-ctl-file-drop { display: inline-flex; width: 640px; height: 300px; border: 2px dashed rgb(var(--ui-field-color-border-default)); border-radius: 2px; background: #ecedef; cursor: pointer; transition: background-color .2s; align-items: center; justify-content: center; } .ui-ctl-file-drop .ui-ctl-element { display: none; } .ui-ctl-file-drop .ui-ctl-label-text { margin: 0; padding: 0; outline: none; border: none; vertical-align: middle; } .ui-ctl-file-drop .ui-ctl-label-text span, .ui-ctl-file-drop .ui-ctl-label-text small { display: block; color: #7a818a; text-align: center; text-decoration: none; text-transform: var(--ui-text-transform-uppercase); text-shadow: none; white-space: nowrap; font: var(--ui-font-size-xs) var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-bold); transition: color 0.2s linear; -webkit-font-smoothing: antialiased; } .ui-ctl-file-drop .ui-ctl-label-text small { padding-top: 10px; text-transform: var(--ui-text-transform-none); font-size: var(--ui-font-size-xs); } .ui-ctl-file-drop:hover { background: #cfd4d8; color: #535c69; } .ui-ctl-file-drop:active { background: #868d95; box-shadow: none !important; color: var(--ui-color-primary-alt); } /*endregion*/ /*region Checkbox*/ .ui-ctl-checkbox { flex-direction: row; margin-bottom: 7px; align-items: center; justify-content: flex-start; } .ui-ctl-checkbox .ui-ctl-element { display: inline; margin: 0 8px 0 0; padding: 0; width: auto; height: auto; appearance: checkbox; flex: none; } .ui-ctl-checkbox .ui-ctl-label-text { padding-bottom: 0; } /*endregion*/ /*region Checkbox*/ .ui-ctl-checkbox-selector { padding: 0; width: auto; flex-direction: row; margin-bottom: 7px; display: inline-flex; align-items: stretch; justify-content: flex-start; cursor: pointer; min-height: var(--ui-field-size); min-width: var(--ui-field-size); } .ui-ctl-checkbox-selector .ui-ctl-inner { background-color: var(--ui-color-background-primary); padding: 7px; width: 100%; height: var(--ui-field-size); min-width: var(--ui-field-size); border: 1px solid var(--ui-field-color-disabled); border-radius: var(--ui-border-radius-3xs); display: flex; align-items: center; transition: .17s; justify-content: flex-start; position: relative; box-sizing: border-box; } .ui-ctl-checkbox-selector .ui-ctl-inner:hover, .ui-ctl-checkbox-selector .ui-ctl-element:checked + .ui-ctl-inner , .ui-ctl-checkbox-selector.selected .ui-ctl-element + .ui-ctl-inner { border-color: var(--ui-field-color-focused); } .ui-ctl-checkbox-selector .ui-ctl-inner::before { content: ''; display: block; border: 1px solid var(--ui-color-primary-alt); border-bottom: none; border-left: none; position: absolute; right: -1px; top: -1px; width: 0; height: 0; transition: 180ms linear all; } .ui-ctl-checkbox-selector .ui-ctl-element:checked + .ui-ctl-inner::before, .ui-ctl-checkbox-selector.selected .ui-ctl-element + .ui-ctl-inner::before { width: 6px; height: 6px; } .ui-ctl-checkbox-selector .ui-ctl-inner::after { content: ''; display: block; border: 1px solid var(--ui-field-color-focused); border-top: none; border-right: none; position: absolute; right: -2px; top: -1px; width: 0; height: 0; transition: .18s; transform: rotate(-45deg); opacity: 0; box-sizing: border-box; } .ui-ctl-checkbox-selector .ui-ctl-element:checked + .ui-ctl-inner::after, .ui-ctl-checkbox-selector.selected .ui-ctl-element + .ui-ctl-inner::after { width: 5px; height: 3px; opacity: 1; } .ui-ctl-checkbox-selector .ui-ctl-element { display: none; } .ui-ctl-checkbox-selector .ui-ctl-label-img { display: block; background-position: center; background-size: cover; width: 22px; height: 22px; min-width: 22px; min-height: 22px; box-sizing: border-box; } .ui-ctl-checkbox-selector .ui-ctl-label-text { text-overflow: ellipsis; overflow: hidden; color: var(--ui-color-base-default); padding: 0 7px; } .ui-ctl-checkbox-selector .ui-ctl-label-img + .ui-ctl-label-text { padding-left: 7px; } /*endregion*/ /*region Radiobox*/ .ui-ctl-radio { flex-direction: row; margin-bottom: 7px; align-items: center; justify-content: flex-start; } .ui-ctl-radio .ui-ctl-element { display: inline; margin: 0 5px 2px 0; padding: 0; width: auto; height: auto; appearance: radio; flex: none; } .ui-ctl-radio .ui-ctl-label-text { padding-bottom: 0; } /*endregion*/ /*region Radio*/ .ui-ctl-radio-selector { padding: 0; width: auto; flex-direction: row; margin-bottom: 7px; display: inline-flex; align-items: stretch; justify-content: flex-start; cursor: pointer; min-height: var(--ui-field-size-sm); min-width: var(--ui-field-size-sm); } .ui-ctl-radio-selector .ui-ctl-inner { background-color: #fff; padding: 7px 6px; width: 100%; border: 1px solid var(--ui-field-color-disabled); border-radius: var(--ui-border-radius-3xs); height: var(--ui-field-size-sm); min-width: var(--ui-field-size-sm); display: flex; align-items: center; transition: .17s; justify-content: center; position: relative; box-sizing: border-box; } .ui-ctl-radio-selector .ui-ctl-inner:hover, .ui-ctl-radio-selector .ui-ctl-element:checked + .ui-ctl-inner, .ui-ctl-radio-selector.selected .ui-ctl-element + .ui-ctl-inner { border-color: var(--ui-field-color-focused); } .ui-ctl-radio-selector .ui-ctl-inner::before { content: ''; display: block; border-radius: var(--ui-border-radius-circle); background-color: var(--ui-field-color-focused); border-bottom: none; border-left: none; position: absolute; right: 0; top: 0; width: 0; height: 0; transition: .18s; } .ui-ctl-radio-selector .ui-ctl-element:checked + .ui-ctl-inner::before, .ui-ctl-radio-selector.selected .ui-ctl-element + .ui-ctl-inner::before { width: 11px; height: 11px; right: -3px; top: -3px; } .ui-ctl-radio-selector .ui-ctl-inner::after { content: ''; display: block; /*border: 1.5px solid var(--ui-field-color-focused);*/ border: 1.5px solid var(--ui-color-on-primary); border-top: none; border-right: none; position: absolute; right: 0; top: 0; width: 0; height: 0; transition: .18s; transform: rotate(-45deg); opacity: 0; box-sizing: border-box; } .ui-ctl-radio-selector .ui-ctl-element:checked + .ui-ctl-inner::after, .ui-ctl-radio-selector.selected .ui-ctl-element + .ui-ctl-inner::after { width: 5px; height: 3px; opacity: 1; } .ui-ctl-radio-selector .ui-ctl-element { display: none; } .ui-ctl-radio-selector .ui-ctl-label-img { display: block; background-position: center; background-size: cover; width: 21px; height: 20px; min-width: 20px; min-height: 20px; box-sizing: border-box; } .ui-ctl-radio-selector .ui-ctl-label-text { text-overflow: ellipsis; overflow: hidden; color: var(--ui-color-base-90); padding: 0 2px 1px; font-size: 13px; white-space: nowrap; max-width: 300px; } .ui-ctl-radio-selector .ui-ctl-label-img + .ui-ctl-label-text { padding-left: 7px; } /*endregion*/ /*endregion*/ /*region Tag*/ .ui-ctl-tag { position: absolute; right: 12px; top: -6px; background-color: var(--ui-color-palette-blue-50); color: var(--ui-color-on-primary-alt); font: var(--ui-font-weight-bold) 7px/13px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); vertical-align: middle; text-align: center; padding: 0 6px; height: 13px; border-radius: 6.5px; z-index: 10; pointer-events: none; text-transform: var(--ui-text-transform-uppercase); } .ui-ctl-tag.--tag_light-blue { background-color: var(--ui-color-palette-blue-30); color: var(--ui-color-palette-gray-90); } .ui-ctl-tag.--tag_light { background-color: #fdfdfd; color: var(--ui-color-palette-gray-50); } .ui-ctl-ext-before-icon .ui-ctl-tag { right: 50px; } /*endregion*/ /*region Popup*/ .ui-ctl-popup { position: absolute; top: -36px; right: 0; background: #ff5752; padding: 0 20px; border-radius: var(--ui-border-radius-2xs); color: var(--ui-color-primary-alt); z-index: 2; font: var(--ui-font-size-sm)/31px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); transition: .2s; box-sizing: border-box; max-width: 100%; } .ui-ctl-popup-text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; display: block; } .ui-ctl-popup:after { content: ''; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); border: 8px solid var(--ui-color-background-transparent); border-top-color: var(--ui-color-text-alert); } .ui-ctl-popup-show { opacity: 1; transform: translateY(0); } .ui-ctl-popup-hide { opacity: 0; transform: translateY(-30%); } /*endregion*/ /* region Container*/ .ui-ctl-container { position: relative; display: inline-flex; flex-direction: column; } .ui-ctl-top { display: flex; justify-content: space-between; margin-bottom: 6px; } .ui-ctl-title, .ui-ctl-bottom { font: var(--ui-font-size-sm) var(--ui-font-family-primary, var(--ui-font-family-helvetica)); color: var(--ui-color-palette-gray-50); } .ui-ctl-control { margin-right: 12px; } .ui-ctl-control:last-child { margin-right: 0; } .ui-ctl-control.--ui-ctl__link { color: var(--ui-color-link-primary-base); border-bottom: 1px dashed rgba(var(--ui-color-link-primary-base-rgb), var(--ui-opacity-40)); } .ui-ctl-control.--ui-ctl__link-gray { border-bottom: 1px dashed rgba(var(--ui-color-palette-gray-70-rgb), var(--ui-opacity-40)); color: var(--ui-color-palette-gray-70); } .ui-ctl-bottom { margin-top: 6px; font-style: italic; } /* region States */ .ui-ctl-success .ui-ctl-bottom { font-style: normal; color: var(--ui-field-color-success); } .ui-ctl-warning .ui-ctl-bottom { font-style: normal; color: var(--ui-field-color-warning); } /*endregion*/ /*endregion*/ /* region Control & Entity */ .ui-ctl__entity { text-align: center; } .ui-ctl__combined-input .ui-ctl__entity:first-child { margin: 0 19px 0 7px; } .ui-ctl__entity_value { position: relative; margin-right: 4px; cursor: pointer; } .ui-ctl__control { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: auto; width: 26px; text-align: center; } .ui-ctl__control_item { display: inline-flex; border: none; cursor: pointer; } .ui-ctl__control.--arrow .ui-ctl__control_item { width: 26px; height: 15px; border: none; background: var(--ui-color-background-transparent) url(/bitrix/js/ui/forms/images/arrow-down.svg) center no-repeat; transition: opacity .3s; transform: rotate(180deg); } .ui-ctl__control.--arrow .ui-ctl__control_item + .ui-ctl__control_item { transform: rotate(0deg); } .ui-ctl__control.--arrow .ui-ctl__control_item:hover { opacity: var(--ui-opacity-40); } .ui-ctl-sm .ui-ctl__control.--arrow { height: 22px; } .ui-ctl__entity_value.--ui-ctl__link-gray { border-bottom: 1px dashed rgba(var(--ui-color-palette-gray-50-rgb), var(--ui-opacity-40)); color: var(--ui-color-palette-gray-50); cursor: pointer; } .ui-ctl__entity_value.--arrow:after { content: ''; position: absolute; display: block; top: 2px; right: -14px; width: 12px; height: 15px; background: var(--ui-color-background-transparent) url(/bitrix/js/ui/forms/images/arrow-down.svg) center no-repeat; opacity: .5; } /*endregion*/ /* Alert */ .ui-ctl__alert { display: none; position: absolute; top: -17px; right: 0; padding: 6px 16px; border-radius: var(--ui-border-radius-3xs); color: var(--ui-color-palette-white-base); } .ui-ctl__alert:before { content: ''; position: absolute; left: 50%; bottom: -11px; width: 0; height: 0; border-style: solid; border-width: 11px 11.5px 0 11.5px; transform: translateX(-50%); } .ui-ctl-warning .ui-ctl__alert { display: block; background-color: var(--ui-color-palette-red-50); } .ui-ctl-warning .ui-ctl__alert:before { border-color: var(--ui-color-palette-red-50) var(--ui-color-background-transparent) var(--ui-color-background-transparent) var(--ui-color-background-transparent); } /*endregion*/