%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;
}
}