Current Path : /var/www/www-root/data/www/www.monolith-realty.ru/bitrix/js/ui/label/src/ |
Current File : /var/www/www-root/data/www/www.monolith-realty.ru/bitrix/js/ui/label/src/style.css |
:root { --ui-label-height: var(--ui-size-lg); --ui-label-background-color: #c2c5ca; --ui-label-background-color-hover: var(--ui-label-background-color); --ui-label-color: var(--ui-color-palette-white-base-rgb); --ui-label-link-dashed-color: rgba(255, 255, 255, 0.51); --ui-label-font-weight: var(--ui-font-weight-bold); --ui-label-font: var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); } .ui-label { display: inline-flex; align-items: center; max-width: 100%; background-color: transparent; padding: 0 8px; margin-right: 10px; height: var(--ui-label-height); border-radius: calc(var(--ui-label-height) / 2); border: 1px solid var(--ui-label-background-color); transition: 250ms linear all; box-sizing: border-box; } .ui-label-inner { /*font: 12px/calc(var(--ui-label-height) - 2px) var(--ui-label-font);*/ font: var(--ui-font-size-5xs)/var(--ui-font-size-5xs) var(--ui-label-font); font-weight: var(--ui-label-font-weight); color: rgba(var(--ui-label-color), 1); transition: 250ms linear all; max-width: 100%; /*overflow: hidden;*/ white-space: nowrap; text-overflow: ellipsis; } .ui-label span.ui-label-inner { overflow: hidden !important; margin: unset !important; font-family: var(--ui-label-font) !important; line-height: normal !important;; } a.ui-label:hover, .ui-label-link:hover { background-color: var(--ui-label-background-color-hover); cursor: pointer; } a.ui-label .ui-label-inner, .ui-label-link .ui-label-inner { border-bottom: 1px dashed transparent; } a.ui-label:hover .ui-label-inner, .ui-label-link:hover .ui-label-inner { border-bottom: 1px dashed var(--ui-label-link-dashed-color); } .ui-label.ui-label-fill { background-color: var(--ui-label-background-color); border-color: transparent !important; } .ui-label:not(.ui-label-fill) { --ui-label-color: #757c87; --ui-label-link-dashed-color: rgba(51, 51, 51, 0.4); } a.ui-label:not(.ui-label-fill):hover, .ui-label-link:not(.ui-label-fill):hover { --ui-label-background-color-hover: #f5f5f5; border-color: var(--ui-label-background-color); } /*region Colors*/ .ui-label-default { --ui-label-background-color-hover: var(--ui-color-base-20); --ui-label-background-color: var(--ui-color-base-15); --ui-label-color: var(--ui-color-base-80-rgb); } .ui-label-danger { --ui-label-background-color: var(--ui-color-palette-red-25); --ui-label-background-color-hover: var(--ui-color-palette-red-40); --ui-label-color: var(--ui-color-palette-red-80-rgb); } .ui-label-success { --ui-label-background-color: var(--ui-color-palette-green-30); --ui-label-background-color-hover: var(--ui-color-palette-green-40); --ui-label-color: var(--ui-color-palette-green-80-rgb); } .ui-label-warning { --ui-label-background-color: var(--ui-color-palette-orange-50); --ui-label-background-color-hover: var(--ui-color-palette-orange-60); } .ui-label-primary { --ui-label-background-color-hover: var(--ui-color-palette-blue-40); --ui-label-background-color: var(--ui-color-palette-blue-25); --ui-label-color: var(--ui-color-palette-blue-70-rgb); } .ui-label-secondary { --ui-label-background-color: var(--ui-color-accent-aqua); --ui-label-background-color-hover: var(--ui-color-accent-aqua); } .ui-label-lightgreen { --ui-label-background-color: var(--ui-color-palette-green-30); --ui-label-background-color-hover: var(--ui-color-palette-green-40); --ui-label-color: var(--ui-color-palette-green-80-rgb); } .ui-label-lightblue { --ui-label-background-color-hover: var(--ui-color-palette-blue-40); --ui-label-background-color: var(--ui-color-palette-blue-25); --ui-label-color: var(--ui-color-palette-blue-70-rgb); } .ui-label-orange { --ui-label-background-color: var(--ui-color-palette-orange-25); --ui-label-background-color-hover: var(--ui-color-palette-orange-40); --ui-label-color: var(--ui-color-palette-orange-80-rgb); } .ui-label-lightorange { --ui-label-background-color: rgba(255, 169, 0, 0.37); --ui-label-background-color-hover: rgba(255, 169, 0, 0.37); --ui-label-color: var(--ui-color-palette-orange-80-rgb); } .ui-label-lightred { --ui-label-background-color: rgba(255, 87, 82, 0.17); --ui-label-background-color-hover: rgba(255, 87, 82, 0.17); --ui-label-color: var(--ui-color-palette-red-80-rgb); } .ui-label-yellow { --ui-label-background-color: var(--ui-color-accent-yellow); --ui-label-color: var(--ui-color-palette-orange-80-rgb); } .ui-label-lightyellow { --ui-label-background-color: rgba(242, 228, 28, 0.42); --ui-label-background-color-hover: rgba(242, 228, 28, 0.42); --ui-label-color: var(--ui-color-palette-orange-90-rgb); } .ui-label-lavender { --ui-label-background-color: rgba(231, 216, 250, 1); --ui-label-background-color-hover: rgba(231, 216, 250, 1); --ui-label-color: 142, 82, 236; } .ui-label-copilot-light { --ui-label-background-color: var(--ui-color-copilot-secondary, #b095dc); --ui-label-background-color-hover: var(--ui-color-copilot-secondary, #b095dc); --ui-label-color: var(--ui-color-on-primary-rgb); } .ui-label-copilot-light-reverse { --ui-label-background-color: var(--ui-color-background-primary); --ui-label-background-color-hover: var(--ui-color-background-primary); --ui-label-color: var(--ui-color-copilot-primary-rgb); } .ui-label-copilot-light-reverse:not(.ui-label-fill) { --ui-label-color: var(--ui-color-copilot-primary-rgb); } .ui-label-light { --ui-label-background-color: var(--ui-color-base-15, #E6E7E9); --ui-label-background-color-hover: rgba(168, 173, 180, 0.91); --ui-label-color: var(--ui-color-base-80-rgb); --ui-label-link-dashed-color: var(--ui-color-base-80, #6a737f); } .ui-label-tag-light { --ui-label-background-color: #EAEBED; --ui-label-background-color-hover: #DCDEE1; --ui-label-color: var(--ui-color-palette-gray-90-rgb); --ui-label-font-weight: var(--ui-label-font-weight, 400); } .ui-label-tag-secondary { --ui-label-background-color: #bcedfc; --ui-label-background-color-hover: #bcedfc; --ui-label-color: var(--ui-color-palette-black-base-rgb); --ui-label-font-weight: var(--ui-label-font-weight, 400); } /*endregion*/ /*region Size*/ .ui-label-lg { --ui-label-height: 25px; } .ui-label-md { --ui-label-height: var(--ui-size-lg); } .ui-label-sm { --ui-label-height: 18px; } .ui-label-xs { --ui-label-height: 14px; } .ui-label-xs .ui-label-inner { font-size: var(--ui-font-size-6xs); line-height: var(--ui-font-line-height-sm); font-weight: var(--ui-font-weight-bold); } /*endregion*/ .ui-label-status { display: inline-flex; justify-content: center; align-items: center; position: relative; width: 12px; height: 12px; margin: 0 5px 0 -2px; } .ui-label-status .main-ui-loader { margin-top: -1px; } .bx-win .ui-label-status .main-ui-loader { margin-top: -3px; } .ui-label-status.--icon { border-radius: 100%; background: rgba(var(--ui-label-color), .1); } .ui-label-status:empty { display: none; } .ui-label-status .main-ui-loader-svg-circle { stroke-width: 4; stroke: rgba(var(--ui-label-color), 1); } .ui-label-status .ui-icon-set { --ui-icon-set__icon-color: rgba(var(--ui-label-color), 1); } .ui-label-icon { display: block; width: 21px; height: 100%; margin-right: -6px; opacity: .7; cursor: pointer; transition: .1s; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.787%201L5%203.787%202.213%201%201%202.213%203.787%205%201%207.787%202.213%209%205%206.213%207.787%209%209%207.787%206.213%205%209%202.213%22%20fill%3D%22%23757c87%22/%3E%3C/svg%3E') center no-repeat; } .ui-label-fill .ui-label-icon { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.787%201L5%203.787%202.213%201%201%202.213%203.787%205%201%207.787%202.213%209%205%206.213%207.787%209%209%207.787%206.213%205%209%202.213%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E'); } .ui-label-fill.ui-label-lightgreen .ui-label-icon, .ui-label-fill.ui-label-lightblue .ui-label-icon, .ui-label-fill.ui-label-light .ui-label-icon { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.787%201L5%203.787%202.213%201%201%202.213%203.787%205%201%207.787%202.213%209%205%206.213%207.787%209%209%207.787%206.213%205%209%202.213%22%20fill%3D%22%23757c87%22/%3E%3C/svg%3E'); } .ui-label-icon:hover { transition: none; opacity: 1; }