Current Path : /var/www/www-root/data/www/monolith-realty.ru/bitrix/js/ui/vue/components/reaction/src/ |
Current File : /var/www/www-root/data/www/monolith-realty.ru/bitrix/js/ui/vue/components/reaction/src/reaction.css |
.ui-vue-reaction { display: flex; white-space: nowrap; } .ui-vue-reaction-result { background-color: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; padding: 0 2px; display: flex; } .ui-vue-reaction-result-types { display: inline-block; height: 19px; vertical-align: top; line-height: 13px; } .ui-vue-reaction-result-type { display: inline-block; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; position: relative; background-size: cover; } .ui-vue-reaction-result-type + .ui-vue-reaction-result-type { margin-left: -5px; } /*.ui-vue-reaction-result-type:nth-child(1) { z-index: 6; }*/ /*.ui-vue-reaction-result-type:nth-child(2) { z-index: 5; }*/ /*.ui-vue-reaction-result-type:nth-child(3) { z-index: 4; }*/ /*.ui-vue-reaction-result-type:nth-child(4) { z-index: 3; }*/ /*.ui-vue-reaction-result-type:nth-child(5) { z-index: 2; }*/ /*.ui-vue-reaction-result-type:nth-child(6) { z-index: 1; }*/ .ui-vue-reaction-result-counter { display: inline-block; height: 19px; font: 10px/19px var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular, 400); color: #484848; vertical-align: top; margin-right: 5px; margin-left: 2px; background-color: rgba(255,255,255,.5); z-index: 10; } .ui-vue-reaction-button { display: inline-block; height: 21px; width: 21px; margin-left: 4px; } .ui-vue-reaction-button-container { display: inline-block; height: 29px; width: 52px; margin-top: -4px; margin-left: -17px; box-sizing: border-box; padding-top: 4px; padding-left: 17px; cursor: pointer; } .ui-vue-reaction-button-icon { display: inline-block; height: 19px; width: 19px; border: 1px solid #fff; border-radius: 50%; background-size: cover; vertical-align: top; } .ui-vue-reaction-button-icon.ui-vue-reaction-icon-none { border-color: rgba(0,0,0,.14); } .ui-vue-reaction-button-press-enter-active, .ui-vue-reaction-button-press-leave-active { transition: opacity .5s; } .ui-vue-reaction-button-press-enter, .ui-vue-reaction-button-press-leave-to { opacity: 0; } .ui-vue-reaction-button-pressed { animation: ui-vue-reaction-button-pressed .4s 1; } @keyframes ui-vue-reaction-button-pressed { 0% { transform: scale(1); } 20% { transform: scale(2); } 100% { transform: scale(1); } } .ui-vue-reaction-result-type-animation-enter-active, .ui-vue-reaction-result-type-animation-leave-active { transition: all .4s; margin-right: 0; } .ui-vue-reaction-result-type-animation-enter, .ui-vue-reaction-result-type-animation-leave-to { margin-right: -14px; } .ui-vue-reaction-result-type:last-child.ui-vue-reaction-result-type-animation-leave-active { opacity: 1; } .ui-vue-reaction-result-type:last-child.ui-vue-reaction-result-type-animation-leave-to { opacity: 0; } .ui-vue-reaction-result-animation-enter-active, .ui-vue-reaction-result-animation-leave-active { transition: opacity .2s; } .ui-vue-reaction-result-animation-enter, .ui-vue-reaction-result-animation-leave-to { opacity: 0; } .ui-vue-reaction-mobile .ui-vue-reaction-result-types { height: 24px; } .ui-vue-reaction-mobile .ui-vue-reaction-result-type { width: 20px; height: 20px; } .ui-vue-reaction-mobile .ui-vue-reaction-result-type + .ui-vue-reaction-result-type { margin-left: -5px; } /*.ui-vue-reaction-result-type:nth-child(1) { z-index: 6; }*/ /*.ui-vue-reaction-result-type:nth-child(2) { z-index: 5; }*/ /*.ui-vue-reaction-result-type:nth-child(3) { z-index: 4; }*/ /*.ui-vue-reaction-result-type:nth-child(4) { z-index: 3; }*/ /*.ui-vue-reaction-result-type:nth-child(5) { z-index: 2; }*/ /*.ui-vue-reaction-result-type:nth-child(6) { z-index: 1; }*/ .ui-vue-reaction-mobile .ui-vue-reaction-result-counter { height: 24px; font-size: 14px; line-height: 24px; margin-left: 4px; } .ui-vue-reaction-mobile .ui-vue-reaction-button { height: 26px; width: 26px; } .ui-vue-reaction-mobile .ui-vue-reaction-button-container { display: inline-block; height: 29px; width: 52px; margin-top: -4px; margin-left: -17px; box-sizing: border-box; padding-top: 4px; padding-left: 17px; cursor: pointer; } .ui-vue-reaction-mobile .ui-vue-reaction-button-icon { height: 24px; width: 24px; } .ui-vue-reaction-mobile .ui-vue-reaction-result-type-animation-enter, .ui-vue-reaction-mobile .ui-vue-reaction-result-type-animation-leave-to { margin-right: -19px; }