%PDF- %PDF-
Direktori : /home/bitrix/www/bitrix/components/bitrix/ui.tile.selector/templates/.default/ |
Current File : //home/bitrix/www/bitrix/components/bitrix/ui.tile.selector/templates/.default/style.css |
.ui-tile-selector-input { background: #fff; border: none; color: #555; display: inline-block; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 7px 6px 0; height: 30px; min-width: 108px; outline: none; padding: 0; vertical-align: middle; } .ui-tile-selector-input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; } .ui-tile-selector-select { position: relative; display: inline-block; margin: 7px 7px 5px 18px; border-bottom: 1px solid transparent; font: bold 13px/17px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #2067b0; vertical-align: top; transition: border-bottom-color .2s linear; cursor: pointer; } .ui-tile-selector-select:before { content: ''; position: absolute; top: 5px; left: -14px; height: 8px; width: 8px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoz2NgQAIK6Rv+gzADLkCeApggLkxYAe0dCQDF5T3p5/14OgAAAABJRU5ErkJggg==) no-repeat center; } .ui-tile-selector-select:hover { border-bottom-color: #2067b0; } /*.ui-tile-selector-add {*/ /*position: absolute;*/ /*top: 50%;*/ /*right: 15px;*/ /*display: inline-block;*/ /*width: 26px;*/ /*height: 26px;*/ /*border-radius: 15px;*/ /*background: rgba(216,216,216,.3);*/ /*transform: translate(0,-50%);*/ /*transition: background .3s;*/ /*cursor: pointer;*/ /*}*/ /*.ui-tile-selector-add:before,*/ /*.ui-tile-selector-add:after {*/ /*content: '';*/ /*position: absolute;*/ /*top: 50%;*/ /*left: 50%;*/ /*display: inline-block;*/ /*width: 2px;*/ /*height: 8px;*/ /*background: #828B95;*/ /*transform: translate(-50%,-50%);*/ /*}*/ /*.ui-tile-selector-add:after {*/ /*content: '';*/ /*transform: translate(-50%,-50%) rotate(90deg);*/ /*}*/ /*.ui-tile-selector-add:hover {*/ /*background: rgba(216,216,216,1);*/ /*}*/ .ui-tile-selector-add { position: absolute; top: 50%; right: 15px; display: inline-block; margin: 1px 0 0 0; border-bottom: 1px solid transparent; font: bold 13px/17px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #2067b0; vertical-align: top; transition: border-bottom-color .2s linear; transform: translate(0,-50%); cursor: pointer; } .ui-tile-selector-add:before { content: ''; position: absolute; top: 5px; left: -14px; height: 8px; width: 8px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoz2NgQAIK6Rv+gzADLkCeApggLkxYAe0dCQDF5T3p5/14OgAAAABJRU5ErkJggg==) no-repeat center; } .ui-tile-selector-add:after { content: ''; position: absolute; top: 50%; left: -30px; width: 1px; height: 22px; background: rgba(130,139,149,.2); transform: translate(0,-50%); } .ui-tile-selector-add:hover { border-bottom-color: #2067b0; } .ui-tile-selector-selector-wrap { position: relative; display: block; padding: 7px 100px 1px 7px; min-height: 36px !important; border: 1px solid #e4e4e4; border-radius: 1px; background: #fff; overflow: hidden; } .ui-tile-selector-selector-wrap.readonly { padding: 7px 38px 1px 0; border: none; background: none; } .ui-tile-selector-selector { position: relative; display: block; } .ui-tile-selector-selector-wrap .ui-tile-selector-item { padding-right: 30px; } .ui-tile-selector-item { display: inline-block; position: relative; margin: 0 6px 6px 0; padding: 0 30px 0 13px; height: 30px; border-radius: 1px; font: bold 13px/29px "Helvetica Neue", Arial, Helvetica, sans-serif; overflow: hidden; vertical-align: middle; z-index: 2; transition: background-color 0.2s linear; cursor: pointer; background-color: #D5F1FC; color: #0063C6 !important; } .ui-tile-selector-item-remove { position: absolute; right: 0; top: 0; width: 25px; height: 30px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%228%22%20viewBox%3D%220%200%208%208%22%3E%3Cpath%20fill%3D%22%238AC4E6%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.073%203.657l2.12-2.12L5.778.12l-2.12%202.12L1.537.12.12%201.538l2.12%202.12-2.12%202.12%201.417%201.417%202.12-2.12%202.12%202.12%201.417-1.417-2.12-2.12z%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: center; opacity: 0.6; transition: opacity .3s; cursor: pointer; } .ui-tile-selector-item-remove:hover { opacity: 1; } /*** SEARCHER ***/ .ui-tile-selector-searcher { padding: 9px; } .ui-tile-selector-searcher-title { display: block; margin: 0 0 7px 0; /*padding: 0 11px;*/ font: 11px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #80868E; } .ui-tile-selector-searcher-inner { display: flex; } .ui-tile-selector-searcher-main { flex: 3; position: relative; /*padding: 0 5px 0 0;*/ max-width: 100%; height: 170px; background: rgba(238, 242, 245, .48); overflow: hidden; } /*.ui-tile-selector-searcher-inner-shadow {*/ /*box-shadow: inset 0 11px 8px -10px #CCC, inset 0 -11px 8px -10px #CCC;*/ /*}*/ .ui-tile-selector-searcher-content { padding: 14px 0 0 0; max-height: 170px; overflow-y: auto; box-sizing: border-box; /*background: rgba(238,242,245,.48);*/ } .ui-tile-selector-searcher-content-item { display: block; padding: 0 11px; margin: 0 16px 0 0; height: 34px; font: bold 13px/34px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #0063C6; transition: background .3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; cursor: pointer; } .ui-tile-selector-searcher-content-item:hover { background: rgba(168,173,180,.12); } .ui-tile-selector-searcher-content-item-selected { background: rgba(168,173,180,.32); } .ui-tile-selector-searcher-sidebar { flex: 1; padding: 16px 0 0 16px; margin: 0 0 7px 0; border-left: 1px solid rgba(216,216,216,.38); } .ui-tile-selector-searcher-sidebar-item { display: block; height: 30px; font: 13px/29px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #80868e; padding: 0 5px; position: relative; margin: 0 3px 2px 0; background: #fff; border-color: transparent; border-radius: 2px; border-style: solid; border-width: 0 7px 0 10px; font-weight: normal; vertical-align: top; text-decoration: none; outline: none; white-space: nowrap; cursor: pointer; } .ui-tile-selector-searcher-sidebar-item:before, .ui-tile-selector-searcher-sidebar-item:after { content: ''; display: inline-block; height: 21px; vertical-align: top; width: 4px; } .ui-tile-selector-searcher-sidebar-item:before { margin-right: 5px; } .ui-tile-selector-searcher-sidebar-item:hover, .ui-tile-selector-searcher-sidebar-item-selected { background: #eef2f5; background-clip: padding-box; border-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMTMgMzAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ItC00LjQsNC70L7Qsy3QstGL0LHQvtGA0LAt0YHRg9GJ0L3QvtGB0YLQuC3QodCg0Jwt0LIt0LTRgNGD0LPQuNGFLdC40L3RgdGC0YDRg9C80LXQvdGC0LDRhSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcyNi4wMDAwMDAsIC01ODcuMDAwMDAwKSIgZmlsbD0iI0VFRjJGNSI+PGcgaWQ9Ikdyb3VwLTItQ29weS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzIuMDAwMDAwLCA1NTEuMDAwMDAwKSI+PHBhdGggZD0iTTQ1NC4zOTA4MjYsNTIuNzY0Nzk5NiBDNDUzLjg3MTAwMSw1MS43OTAxMjc3IDQ1My44Njg0NSw1MC4yMTQ2NTQzIDQ1NC4zOTA4MjYsNDkuMjM1MjAwNCBMNDYwLjUwODM3MywzNy43NjQ3OTk2IEM0NjEuMDI4MTk4LDM2Ljc5MDEyNzcgNDYyLjMzNTY3NCwzNiA0NjMuNDUxOTE5LDM2IEw0NjQuMDQyODYsMzYgQzQ2NS4xNDg3MTEsMzYgNDY2LjA0NTE4LDM2Ljg5Nzg0MDQgNDY2LjA0NTE4LDM3Ljk5MTYxNyBMNDY2LjA0NTE4LDY0LjAwODM4MyBDNDY2LjA0NTE4LDY1LjEwODMyMjcgNDY1LjE1OTEwNiw2NiA0NjQuMDQyODYsNjYgTDQ2My40NTE5MTksNjYgQzQ2Mi4zNDYwNjksNjYgNDYxLjAzMDc0OCw2NS4yMTQ2NTQzIDQ2MC41MDgzNzMsNjQuMjM1MjAwNCBMNDU0LjM5MDgyNiw1Mi43NjQ3OTk2IFoiIGlkPSLQktGL0LHQvtGALdCz0YDRg9C/0L/RiyI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg==) 0 4 0 10 fill stretch; color: #535c69; } .ui-tile-selector-searcher-circular { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 125px; width: 125px; -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } .ui-tile-selector-searcher-inner-path { stroke: rgba(215,220,223,.17); stroke-width: 1.5; stroke-dasharray: 200, 200; stroke-dashoffset: 0; stroke-linecap: round; } .ui-tile-selector-searcher-path { stroke: rgba(215,220,223,.74); stroke-width: 1.5; stroke-dasharray: 20, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } }