From f8dccc3c34456b5e3d7b4a62dd58971349181b83 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 7 Jun 2017 19:19:59 +0300 Subject: [PATCH 001/143] Fix vertical buttons in Alert for iOS --- src/components/Alert/Alert.css | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/components/Alert/Alert.css b/src/components/Alert/Alert.css index 9a5448c71a..b97354d571 100644 --- a/src/components/Alert/Alert.css +++ b/src/components/Alert/Alert.css @@ -31,7 +31,7 @@ height: 1px; right: 0; left: 0; - background: rgba(0, 0, 0, .12); + background: #e0e0e0; } .Alert--ios .Alert__content h2 { @@ -73,6 +73,9 @@ display: block; outline: none; } + .Alert--ios .Alert__btn:active { + z-index: 1; + } .Alert--ios .Alert__btn::after { content: ''; position: absolute; @@ -81,7 +84,7 @@ left: 100%; width: 1px; height: auto; - background: rgba(0, 0, 0, .12); + background: #e0e0e0; } .Alert--ios .Alert__btn.Tappable--active::before, .Alert--ios .Alert__btn.Tappable--active::after { @@ -108,6 +111,16 @@ .Alert--ios.Alert--v .Alert__btn { margin: 0 0 1px; } + .Alert--ios.Alert--v .Alert__btn::after { + content: ''; + position: absolute; + top: 100%; + right: 0; + left: 0; + width: 100%; + height: 1px; + background: #e0e0e0; + } .Alert--ios.Alert--v .Alert__btn:last-child { border-radius: 0 0 12px 12px; margin: 0; @@ -115,28 +128,34 @@ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .Alert--ios .Alert__content::after { - background: linear-gradient(to top, rgba(0, 0, 0, .12) 50%, #fafafa 50%); + background: linear-gradient(to top, #e0e0e0 50%, #fafafa 50%); } .Alert--ios.Alert--h .Alert__btn::after { - background: linear-gradient(to left, rgba(0, 0, 0, .12) 50%, #fafafa 50%); + background: linear-gradient(to left, #e0e0e0 50%, #fafafa 50%); } .Alert--ios.Alert--h .Alert__btn.Tappable--active::after { - background: linear-gradient(to left, rgba(0, 0, 0, .12) 50%, var(--ios-active-color) 50%); + background: linear-gradient(to left, #e0e0e0 50%, var(--ios-active-color) 50%); } .Alert--ios.Alert--h .Alert__btn:last-child::after { content: none; } + .Alert--ios.Alert--v .Alert__btn.Tappable--active::before, .Alert--ios.Alert--v .Alert__btn::after { position: absolute; top: 100%; right: 0; left: 0; height: 1px; - background: linear-gradient(to top, rgba(0, 0, 0, .12) 50%, #fafafa 50%); + background: linear-gradient(to top, transparent 50%, #e0e0e0 50%); content: ''; } + .Alert--ios.Alert--v .Alert__btn.Tappable--active::before { + top: auto; + bottom: 100%; + background: linear-gradient(to bottom, transparent 50%, #e0e0e0 50%); + } .Alert--ios.Alert--v .Alert__btn:last-child::after { content: none; } From a569f8c94e50a8a270b1a75db725fa835295a509 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 7 Jun 2017 19:26:49 +0300 Subject: [PATCH 002/143] v0.6.19 --- dist/vkui.css | 2 +- dist/vkui.js | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/vkui.css b/dist/vkui.css index 467a17869f..fe9f56ad0c 100644 --- a/dist/vkui.css +++ b/dist/vkui.css @@ -1 +1 @@ -.View{top:0;right:0;bottom:0;left:0;background:#efeff4;position:absolute;overflow:hidden;word-wrap:break-word}.View--animated{pointer-events:none}.View__header{white-space:nowrap}.View__header-in,.View__header-item{top:0;right:0;left:0;background:#5181b8}.View__header-in{color:#fff;position:fixed;z-index:5}.View__header-item{position:absolute;bottom:0;z-index:1;visibility:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-left,.View__header-right{-ms-flex:0 1 22%;flex:0 1 22%;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:20px}.View__header-right{text-align:right}.View__header-title{-ms-flex:1 1 56%;flex:1 1 56%;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 6px}.View__panel,.View__panels{position:absolute;top:0;right:0;bottom:0;left:0}.View__panel{z-index:1;visibility:hidden}.View__panel--hidden{display:none}.View__mask,.View__popout{position:absolute;top:0;right:0;bottom:0;left:0}.View__mask{background:rgba(0,0,0,.4);animation:animation-full-fade-in .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:7}.View__popout{z-index:8;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.View--ios{font-family:-apple-system,Helvetica Neue,Helvetica,sans-serif}.View--ios .View__header,.View--ios .View__header-in{height:64px}.View--ios .View__header-item{top:20px;height:44px;-ms-flex-pack:center;justify-content:center;padding:0 6px}.View--ios .View__header-title{-ms-flex-preferred-size:56%;flex-basis:56%}.View--ios .View__header-left,.View--ios .View__header-right{width:22%;padding:0 2px}.View--ios .View__header-item--next,.View--ios .View__header-item--prev{visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1),opacity .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-item--prev{opacity:0}.View--ios .View__header-item--next{opacity:1}.View--ios .View__header-item{transform:translate3d(-50%,0,0)}.View--ios .View__header-item--next{transform:translateZ(0)}.View--ios .View__header-item--active~.View__header-item,.View--ios .View__header-item--next~.View__header-item{transform:translate3d(50%,0,0)}.View--ios .View__header-title{font:500 17px/44px -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;text-align:center}.View--ios .View__header-item--active{opacity:1;visibility:visible;transform:translateZ(0)}.View--ios.View--header .View__panels{top:64px}.View--ios .View__panel{background:#efeff4}.View--ios .View__panel--next,.View--ios .View__panel--prev{display:block;visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel{transform:translate3d(-50%,0,0)}.View--ios .View__panel--next{transform:translateZ(0)}.View--ios .View__panel--active~.View__panel,.View--ios .View__panel--next~.View__panel{transform:translate3d(100%,0,0)}.View--ios .View__panel--next:before,.View--ios .View__panel--prev:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#000;content:"";pointer-events:none}.View--ios .View__panel--prev:before{animation:animation-fade-in .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel--next:before{animation:animation-fade-out .6s cubic-bezier(.36,.66,.04,1)}.View--android .View__panel--active:before,.View--ios .View__panel--active:before,.View--ios .View__panel--next~.View__panel--prev:before,.View--ios .View__panel--prev~.View__panel--next:before{content:none}.View--ios .View__panel--active{visibility:visible;transform:translateZ(0)}.View--android{font-family:Roboto,Droid,Open Sans,sans-serif}.View--android .View__header{height:80px}.View--android .View__header-in{height:80px;box-shadow:0 0 4px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.16)}.View--android .View__header-item{top:24px;height:56px;padding:0 10px}.View--android .View__header-left,.View--android .View__header-right{padding:1px 6px 0;font-size:14px;line-height:16px;font-weight:500;text-transform:uppercase;color:#fff;color:rgba(255,255,255,.7)}.View--android .View__header-left:active,.View--android .View__header-right:active{color:#fff;color:rgba(255,255,255,.9)}.View--android .View__header-left{-ms-flex:0 0 auto;flex:0 0 auto;max-width:22%}.View--android .View__header-left:empty{display:none}.View--android .View__header-item--next,.View--android .View__header-item--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__header-item{transform:translateZ(0);opacity:0}.View--android .View__header-item--next{transform:translateZ(0);opacity:1}.View--android .View__header-item--next~.View__header-item{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__header-item--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__header-item--active~.View__header-item{transform:translate3d(0,80px,0)}.View--android .View__header-title{font:500 20px/56px Roboto,Open Sans,sans-serif}.View--android.View--header .View__panels{top:80px}.View--android .View__panel{background:#fff}.View--android .View__panel--next,.View--android .View__panel--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__panel{transform:translateZ(0);opacity:0}.View--android .View__panel--next{transform:translateZ(0);opacity:1}.View--android .View__panel--next~.View__panel{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__panel--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__panel--active~.View__panel{transform:translate3d(0,80px,0)}@keyframes animation-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes animation-fade-out{0%{opacity:.3}to{opacity:0}}@keyframes animation-full-fade-in{0%{opacity:0}to{opacity:1}}.ScrollView{position:relative;width:100%;height:100%;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch}.ScrollView__top{position:absolute;z-index:1}.ScrollView--ios .ScrollView__top{right:0;left:0;height:60px;bottom:100%}.ScrollView--android .ScrollView__top{position:absolute;top:-24px;left:50%;height:40px;width:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3)}.ScrollView__in{transform:translateZ(0)}.Spinner{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.Spinner--ios .Spinner__self{position:relative}.Spinner--android.Spinner--on .Spinner__self{animation:rotator 1.4s linear infinite}.Spinner--android .Spinner__path{transform-origin:center}.Spinner--ios .Spinner__part{width:7.5%;height:27.5%;x:46.25%;y:36.25%}.Spinner--ios.Spinner--on .Spinner__part{animation:fade 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:1}to{opacity:.1}}.Group{padding:15px 0}.Alert--android .Alert__content p,.Alert--ios .Alert__content p,.Group,.Group__title{margin:0}.Group--ios .Group__title{font:13px/18px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#6d6d72;padding:0 15px 7px}.Group__description{font:13px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#6d6d72;padding:7px 15px 0}.Group--android .Group__title{font:500 14px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#5181b8;padding:0 16px 17px}.Entity{position:relative;height:64px;padding:0 0 0 75px;text-align:left}.Entity--small{height:48px;padding:0 0 0 60px}.Entity__aside{position:absolute;top:0;left:0;width:64px;height:64px}.Entity--small .Entity__aside{width:48px;height:48px}.Entity--no-photo .Entity__aside{background:#d4dae1;border-radius:50%}.Entity__photo{width:64px;height:64px;border-radius:50%}.Entity--small .Entity__photo{width:48px;height:48px}.Entity__main{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.Entity__description,.Entity__title{max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:20px;white-space:nowrap}.Entity__title{font-size:15px;font-weight:500;color:#2c2d2e;margin:0 0 3px}.Entity__description{font-size:14px;color:#909499}.Entity--ios{margin:0 15px}.Entity--android{margin:0 16px}.List{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;list-style:none}.List--ios{background:#fff}.List--ios:after,.List--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:"";bottom:100%;background:#dfdfdf}.List--ios:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.List--ios:after,.List--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem{position:relative;margin:0;padding:0;white-space:nowrap;font-size:17px;line-height:22px}.ListItem__in{position:relative;display:-ms-flexbox;display:flex;max-width:100%}.ListItem__icon{position:relative;-ms-flex:0 0 auto;flex:0 0 auto}.Icon>img,.Icon>svg,.ListItem__icon-in>img,.ListItem__icon-in>svg{vertical-align:top}.ListItem__main{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.ListItem__aside,.ListItem__indicator{-ms-flex:0 0 auto;flex:0 0 auto;max-width:75%;color:#8e8e93;text-align:right;text-overflow:ellipsis}.ListItem__indicator{overflow:hidden}.ListItem__aside{padding:0;overflow:visible}.ListItem--ios{font-size:17px;line-height:22px}.ListItem--ios.ListItem--expandable:before{position:absolute;top:50%;right:16px;margin-top:-4px;width:7px;height:7px;border-top:2px solid #c7c7cc;border-right:2px solid #c7c7cc;content:"";transform:rotate(45deg);z-index:1}.ListItem--ios .ListItem__in{padding:0 15px;background:#fff}.ListItem--ios.ListItem--expandable .ListItem__in{padding:0 35px 0 15px}.List--ios.List--icon-indent .ListItem__icon:empty,.ListItem--ios.ListItem--icon-indent .ListItem__icon:empty{padding-left:44px}.ListItem--ios .ListItem__icon:before{position:absolute;bottom:0;left:100%;width:100vw;height:1px;background:#dfdfdf;content:""}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.ListItem--ios .ListItem__icon:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem--ios .ListItem__icon-in{width:29px;height:29px;padding:7px 15px 9px 0}.ListItem--ios .ListItem__main{padding:11px .5em 12px 0}.ListItem--ios .ListItem__aside,.ListItem--ios .ListItem__indicator{padding:11px 0 12px}.ListItem--android{font-size:16px;color:#2e3033}.ListItem--android .ListItem__in{padding:0 16px}.ListItem--android .ListItem__icon-in{width:24px;height:24px;padding:14px 32px 18px 0}.ListItem--android .ListItem__main{padding:16px .5em 17px 0}.ListItem--android .ListItem__aside,.ListItem--android .ListItem__indicator{padding:16px 0 17px}.Tappable--ios.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Button--vk-wide-primary){background:#d9d9d9!important}.Tappable--ios.Tappable--active:after,.Tappable--ios.Tappable--active:before{content:"";position:absolute;right:0;left:0;height:1px;background:#dfdfdf;z-index:2}.Tappable--ios.Tappable--active:before{bottom:100%}.Tappable--ios.Tappable--active:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.Tappable--ios.Tappable--active:before{background:linear-gradient(180deg,#c8c7cc 50%,#d9d9d9 0)}.Tappable--ios.Tappable--active:after{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Tappable--android{position:relative;transition:background-color .15s ease-out}.Tappable--android.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Alert__btn--primary):not(.Button--vk-wide-primary){background:#f0f1f3!important}.Tappable--android .Tappable__waves{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.Tappable--android .Tappable__wave{position:absolute;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;content:"";border-radius:50%;background:rgba(128,128,128,.1);animation:animation-wave .3s cubic-bezier(.4,0,.2,1)}@keyframes animation-wave{0%{transform:scale(1);opacity:1}30%{opacity:1}to{transform:scale(8);opacity:0}}.FormLayout{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;position:relative;background:#fff;list-style:none}.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{position:absolute;right:0;left:0;z-index:1;height:1px;background:#dfdfdf;content:""}.FormLayout--ios.FormLayout:before{bottom:100%}.FormLayout--ios.FormLayout:after{top:100%}.FormLayout__row{display:-ms-flexbox;display:flex;position:relative;margin:0;white-space:nowrap;line-height:22px;max-width:100%}.FormLayout--ios .FormLayout__row{font-size:17px}.FormLayout--android .FormLayout__row{font-size:16px}.FormLayout__separator{position:relative;width:0}.FormLayout--ios .FormLayout__separator:before{position:absolute;bottom:0;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout__row:last-child .FormLayout__label:before,.FormLayout__row:last-child .FormLayout__separator:before{content:none}.FormLayout--ios .FormLayout__separator{left:15px}.FormLayout--android .FormLayout__separator{left:0}.FormLayout__label{position:relative;-ms-flex:0 0 100px;flex:0 0 100px;max-width:100px;vertical-align:top}.FormLayout--ios .FormLayout__label:before{position:absolute;bottom:0;left:15px;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout--android .FormLayout__label{display:none}.FormLayout__label-in{overflow:hidden;text-overflow:ellipsis}.FormLayout--ios .FormLayout__label-in{padding:11px 15px 12px}.FormLayout--android .FormLayout__label-in{padding:16px 15px 18px}.FormLayout__field{-ms-flex:1 0 auto;flex:1 0 auto;padding:0 15px;vertical-align:top}.FormLayout--ios .FormLayout__underline{display:none}.FormLayout--android .FormLayout__underline{position:absolute;bottom:9px;left:16px;right:16px;height:2px;background:linear-gradient(0deg,transparent 50%,#d6d6d6 0);content:""}.FormLayout--android .FormLayout__underline:before{position:absolute;top:0;right:0;bottom:0;left:0;background:#518bcc;content:"";transform:scaleX(0);transition:transform .1s cubic-bezier(.4,0,.2,1)}.FormLayout--android input:focus+.FormLayout__underline:before,.FormLayout--android textarea:focus+.FormLayout__underline:before{transform:scaleX(1);transition:transform .14s cubic-bezier(.4,0,.2,1)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.FormLayout--ios .FormLayout__label:before,.FormLayout--ios .FormLayout__separator:before,.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Icon--verbose{background:#ccc}.Icon--ios{width:29px;height:29px;border-radius:7px;overflow:hidden}.Icon--android{width:24px;height:24px}.Text p{margin:0 0 1em}.Text b,.Text strong{font-weight:700}.Text em,.Text i{font-style:italic}.Text a{text-decoration:none;color:#5181b8;font-weight:500}.Text--left{text-align:left}.Text--center{text-align:center}.Text--right{text-align:right}.Text--ios{font-size:15px;line-height:20px;color:#2e3033;padding:8px 15px}.Text--ios p{margin:0 0 20px}.Text--android{color:#2e3033;font-size:16px;line-height:24px;padding:8px 16px}.Text--android p{margin:0 0 24px}.Div--ios{padding:8px 15px}.Div--android{padding:8px 16px}.Div--shadow{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06)}.Div--border,.Div--shadow{position:relative;background:#fff}.Div--border:after,.Div--border:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Div--border:before{bottom:100%;background:#dfdfdf}.Div--border:after{bottom:0;background:#dfdfdf}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Div--border:after,.Div--border:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Flex{display:-ms-flexbox;display:flex;margin:0 -6px}.Flex__item{margin:0 6px}.BackButton{vertical-align:top;padding:0 24px 0 4px}.BackButton--ios{color:#fff}.BackButton--android{color:#444547}.Button{margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;position:relative;display:block;width:100%;outline:0;border:0;background:#fff;text-align:left}.Button--ios:after,.Button--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Button--ios:before{bottom:100%;background:#dfdfdf}.Button--ios:after{bottom:0;background:#dfdfdf}.Button--ios{font:17px/22px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;padding:11px 15px 12px}.Button--android{font:16px/22px Roboto,Droid,Open Sans,sans-serif;padding:16px 16px 18px}.Button[disabled]{color:#8e8e93;background:#fff}.Button--left{text-align:left}.Button--center{text-align:center}.Button--right{text-align:right}.Button--ios.Button--primary{color:#007aff;font-weight:500}.Button--ios.Button--danger{color:#ff3f34}.Button--android.Button--primary{color:#518bcc}.Button--android.Button--danger{color:#e64646}.Button--vk-wide,.Button--vk-wide-primary{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);background:#fff;font-weight:500}.Button--vk-wide-primary{background:#5181b8;color:#fff}.Button--vk-primary.Tappable--active:not([disabled]),.Button--vk-primary:active:not([disabled]),.Button--vk-rich.Tappable--active:not([disabled]),.Button--vk-rich:active:not([disabled]),.Button--vk-wide-primary.Tappable--active:not([disabled]),.Button--vk-wide-primary:active:not([disabled]){background:#4872a3}.Button+.Button:before,.Button--ios.Button--vk-primary.Tappable--active:after,.Button--ios.Button--vk-primary.Tappable--active:before,.Button--ios.Button--vk-primary:after,.Button--ios.Button--vk-primary:before,.Button--ios.Button--vk-rich.Tappable--active:after,.Button--ios.Button--vk-rich.Tappable--active:before,.Button--ios.Button--vk-rich:after,.Button--ios.Button--vk-rich:before,.Button--ios.Button--vk-secondary.Tappable--active:after,.Button--ios.Button--vk-secondary.Tappable--active:before,.Button--ios.Button--vk-secondary:after,.Button--ios.Button--vk-secondary:before,.Button--ios.Button--vk-tertiary.Tappable--active:after,.Button--ios.Button--vk-tertiary.Tappable--active:before,.Button--ios.Button--vk-tertiary:after,.Button--ios.Button--vk-tertiary:before,.Button--vk-wide-primary.Tappable--active:after,.Button--vk-wide-primary.Tappable--active:before,.Button--vk-wide-primary:after,.Button--vk-wide-primary:before{content:none}.Button--vk-wide-primary[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-rich{display:inline-block}.Button--vk-primary,.Button--vk-secondary,.Button--vk-tertiary{display:inline-block;font-size:14px;line-height:16px;padding:8px 12px;border-radius:2px}.Button--vk-rich{font-size:16px;font-weight:500;line-height:20px;padding:14px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.24);border-radius:2px}.Button--vk-rich[disabled]{box-shadow:0 0 2px rgba(0,0,0,.05),0 2px 2px rgba(0,0,0,.1)}.Button--vk-primary,.Button--vk-rich{color:#fff;background:#5181b8}.Button--vk-primary[disabled],.Button--vk-rich[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-secondary{color:#4774a8;background:rgba(0,57,115,.1)}.Button--vk-secondary.Tappable--active:not([disabled]),.Button--vk-secondary:active:not([disabled]){background:rgba(0,57,115,.2)}.Button--vk-secondary[disabled]{color:rgba(71,116,168,.4);background:rgba(0,57,115,.05)}.Button--vk-tertiary{background:0 0;color:#4774a8}.Button--vk-tertiary.Tappable--active:not([disabled]),.Button--vk-tertiary:active:not([disabled]){background:rgba(0,57,115,.1)}.Button--vk-tertiary[disabled]{color:rgba(71,116,168,.4);background:0 0}.Button--wide{width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Button--ios:after,.Button--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}#root,body,html{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;-webkit-overflow-scrolling:touch;margin:0;padding:0;height:100%;background:#efeff4;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}.Checkbox{display:block;margin:-11px -15px;padding:8px 15px}.Checkbox__self{display:none}.Checkbox__pseudo{position:relative;display:block;-webkit-tap-highlight-color:transparent}.Checkbox__pseudo:before{position:absolute;content:"";transition:transform .1s ease}.Checkbox__self:checked+.Checkbox__pseudo:before{transform:translateX(20px)}.Checkbox--ios .Checkbox__pseudo{width:48px;height:28px;border:1px solid #e6e6e6;background:#fff;border-radius:15px;transition:background-color .1s ease,border-color .1s ease}.Checkbox--ios .Checkbox__self:checked+.Checkbox__pseudo{border-color:#4cd864;background:#4cd864}.Checkbox--ios .Checkbox__self[disabled]+.Checkbox__pseudo{border-color:#ddd;background:#ddd}.Checkbox--ios .Checkbox__pseudo:before{top:0;left:0;width:28px;height:28px;border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Checkbox--android .Checkbox__pseudo{width:34px;height:14px;background:#c6c5c5;border-radius:7px;transition:background-color .1s ease}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo{background:#a8bfdb}.Checkbox--android .Checkbox__self[disabled]+.Checkbox__pseudo{opacity:.5}.Checkbox--android .Checkbox__pseudo:before{top:-3px;left:-3px;width:20px;height:20px;background:#f1f1f1;border-radius:10px;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24)}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo:before,.Radio__self:checked~.Radio__icon:before{background:#5181b8}.File{display:block;position:relative;overflow:hidden;padding:1px 0 0}.File__self{position:absolute;top:0;right:0;bottom:0;left:0;font-size:10em;z-index:1;opacity:0}.Input{position:relative;display:block;margin:0;width:100%;height:22px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;min-width:140px}.Input--left{text-align:left}.Input--center{text-align:center}.Input--right{text-align:right}.Input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1000px #fff}.Input--ios{font-size:17px;padding:11px 0 12px}.Input--android{font-size:16px;padding:16px 0 18px}.Textarea{display:block;margin:0;width:100%;height:66px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;resize:none}.Textarea--ios{font-size:17px;padding:11px 0 12px}.Textarea--android{font-size:16px;padding:16px 0 18px}.Radio{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;margin-right:-.5em;-ms-flex-align:center;align-items:center}.Radio__self{display:none}.Radio__label{-ms-flex:1 1 auto;flex:1 1 auto}.Radio__icon{-ms-flex:0 0 auto;flex:0 0 auto}.Radio--ios{margin:-11px 0 -12px;padding:11px 0 12px}.Radio--ios .Radio__icon{width:13px;height:11px;opacity:0;transition:opacity .14s ease}.Radio--ios .Radio__self:checked~.Radio__icon{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='26' height='21' viewBox='0 0 26 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4 14.471L2.829 8.9.001 11.728l8.485 8.485 2.828-2.828-.086-.086L25.699 2.828 22.871 0z' fill='%23007AFF'/%3E%3C/svg%3E") 0 0/100% no-repeat;opacity:1}.Radio--android{margin:-16px 0 -17px;padding:16px 0 17px;-ms-flex-align:center;align-items:center}.Radio--android .Radio__label{-ms-flex-order:1;order:1;padding:0 0 0 18px}.Radio--android .Radio__icon{-ms-flex-order:0;order:0;position:relative;width:16px;height:16px;border-radius:10px;border:2px solid #c4c8cc;transition:border-color .14s ease}.Radio--android .Radio__icon:before{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;content:"";background:0 0;transition:background-color .14s ease}.Radio__self:checked~.Radio__icon{border-color:#5181b8}.Select,.Select__self{display:block;outline:0}.Select{margin:0;overflow:hidden;min-width:140px}.Select__self{font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:0 0;width:100%}.Select--ios .Select__self{font-size:17px;padding:11px 0 12px}.Select--android .Select__self{font-size:16px;padding:16px 0 18px}.Slider{position:relative;height:28px;margin:2px 14px}.Slider__in{height:100%}.Slider__dragger{position:absolute;top:50%;left:0;width:0;height:0}.Slider__dragger:before{position:absolute;top:0;width:100%;content:"";height:1px;background:#0f7afb}.Slider__thumb{position:absolute;top:-14px;right:-14px;width:28px;height:28px;content:"";transition:transform .1s ease}.Slider--ios{background:linear-gradient(180deg,#b7b7b7 1px,transparent 0) 0 14px repeat-x}.Slider--ios .Slider__thumb{border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Slider--android{background:linear-gradient(180deg,#bfbfbf 2px,transparent 0) 0 14px repeat-x}.Slider--android .Slider__dragger:before{height:2px;background:#5181b8}.Slider--android .Slider__thumb{top:-13px}.Slider--android .Slider__thumb:before{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;content:"";background:#5181b8;border-radius:6px;transition:box-shadow .14s ease,transform .14s ease}.Slider--android.Slider--active .Slider__thumb:before{box-shadow:0 0 0 3px rgba(128,128,128,.2);transform:scale(1.25)}#root,.Alert,body,html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Alert--ios{width:270px;-ms-flex:0 0 auto;flex:0 0 auto;background:#fafafa;border-radius:12px;animation:animation-ios-alert-intro .2s ease}.Alert--ios .Alert__content{position:relative;padding:19px 16px 20px;font:13px/16px -apple-system,Helvetica Neue,Helvetica,sans-serif;text-align:center}.Alert--ios .Alert__content:after{content:"";position:absolute;top:100%;height:1px;right:0;left:0;background:rgba(0,0,0,.12)}.Alert--ios .Alert__content h2{margin:0 0 7px;font:500 17px/22px -apple-system,Helvetica Neue,Helvetica,sans-serif}.Alert__footer{display:-ms-flexbox;display:flex;margin-top:1px}.Alert--ios.Alert--v .Alert__footer{-ms-flex-direction:column;flex-direction:column}.Alert--ios .Alert__btn{position:relative;background:#fafafa;-ms-flex:1 0 auto;flex:1 0 auto;font-size:17px;line-height:44px;color:#007aff;border:0;padding:0;margin:0;height:44px;display:block;outline:0}.Alert--ios .Alert__btn:after{content:"";position:absolute;top:0;bottom:0;left:100%;width:1px;height:auto;background:rgba(0,0,0,.12)}.Alert--ios .Alert__btn.Tappable--active:after,.Alert--ios .Alert__btn.Tappable--active:before{content:none}.Alert--ios .Alert__btn--primary{font-weight:500}.Alert--ios.Alert--h .Alert__btn{margin-right:1px}.Alert--ios.Alert--h .Alert__btn:first-child{border-radius:0 0 0 12px}.Alert--ios.Alert--h .Alert__btn:last-child{border-radius:0 0 12px 0;margin:0}.Alert--ios.Alert--h .Alert__btn:first-child:last-child{border-radius:0 0 12px 12px}.Alert--ios.Alert--v .Alert__btn{margin:0 0 1px}.Alert--ios.Alert--v .Alert__btn:last-child{border-radius:0 0 12px 12px;margin:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Alert--ios .Alert__content:after{background:linear-gradient(0deg,rgba(0,0,0,.12) 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn:after{background:linear-gradient(270deg,rgba(0,0,0,.12) 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn.Tappable--active:after{background:linear-gradient(270deg,rgba(0,0,0,.12) 50%,#d9d9d9 0)}.Alert--ios.Alert--h .Alert__btn:last-child:after,.Alert--ios.Alert--v .Alert__btn:last-child:after{content:none}.Alert--ios.Alert--v .Alert__btn:after{position:absolute;top:100%;right:0;left:0;height:1px;background:linear-gradient(0deg,rgba(0,0,0,.12) 50%,#fafafa 0);content:""}}.Alert--android{min-width:280px;margin:auto 24px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.22),0 24px 24px rgba(0,0,0,.3);border-radius:2px;animation:animation-android-alert-intro .2s ease}.Alert--android .Alert__content{padding:18px 24px 16px;font-size:16px;line-height:24px;color:#71757a}.Alert--android .Alert__content h2{margin:0 0 8px;font-weight:500;font-size:20px;line-height:28px;color:#2e3033}.Alert--android .Alert__content p+p{margin:24px 0 0}.Alert--android .Alert__footer{padding:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.Alert--android .Alert__btn{background:0 0;border:0;-ms-flex:0 0 auto;flex:0 0 auto;text-transform:uppercase;font-weight:500;font-size:14px;line-height:16px;padding:8px;border-radius:2px;margin:0 0 0 12px;color:#5181b8;outline:0}.Alert--android .Alert__btn--primary{color:#fff;background:#5181b8}.Alert--android .Alert__btn--primary.Tappable--active,.Alert--android .Alert__btn--primary:active{background:#4872a3}@keyframes animation-ios-alert-intro{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes animation-android-alert-intro{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.AlertInput{position:relative;z-index:1}.AlertInput--android{margin:3px -15px 9px}.AlertInput--ios{margin:11px 0 12px}.AlertInput--ios:before{position:absolute;z-index:-1;background:#9f9f9f;width:100%;height:100%;padding:1px 1px 0 0;transform:translate3d(-.5px,-.5px,0);content:""}.AlertInput__self{position:relative;box-sizing:border-box;width:100%;background:#fff;z-index:1;border:0;height:24px;font-size:13px;line-height:24px;padding:0 5px}.AlertInput__self:focus{outline:0}.ScreenSpinner{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex:0 0 auto;flex:0 0 auto}.ScreenSpinner--ios{width:88px;height:88px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:8px} \ No newline at end of file +.View{top:0;right:0;bottom:0;left:0;background:#efeff4;position:absolute;overflow:hidden;word-wrap:break-word}.View--animated{pointer-events:none}.View__header{white-space:nowrap}.View__header-in,.View__header-item{top:0;right:0;left:0;background:#5181b8}.View__header-in{color:#fff;position:fixed;z-index:5}.View__header-item{position:absolute;bottom:0;z-index:1;visibility:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-left,.View__header-right{-ms-flex:0 1 22%;flex:0 1 22%;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:20px}.View__header-right{text-align:right}.View__header-title{-ms-flex:1 1 56%;flex:1 1 56%;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 6px}.View__panel,.View__panels{position:absolute;top:0;right:0;bottom:0;left:0}.View__panel{z-index:1;visibility:hidden}.View__panel--hidden{display:none}.View__mask,.View__popout{position:absolute;top:0;right:0;bottom:0;left:0}.View__mask{background:rgba(0,0,0,.4);animation:animation-full-fade-in .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:7}.View__popout{z-index:8;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.View--ios{font-family:-apple-system,Helvetica Neue,Helvetica,sans-serif}.View--ios .View__header,.View--ios .View__header-in{height:64px}.View--ios .View__header-item{top:20px;height:44px;-ms-flex-pack:center;justify-content:center;padding:0 6px}.View--ios .View__header-title{-ms-flex-preferred-size:56%;flex-basis:56%}.View--ios .View__header-left,.View--ios .View__header-right{width:22%;padding:0 2px}.View--ios .View__header-item--next,.View--ios .View__header-item--prev{visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1),opacity .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-item--prev{opacity:0}.View--ios .View__header-item--next{opacity:1}.View--ios .View__header-item{transform:translate3d(-50%,0,0)}.View--ios .View__header-item--next{transform:translateZ(0)}.View--ios .View__header-item--active~.View__header-item,.View--ios .View__header-item--next~.View__header-item{transform:translate3d(50%,0,0)}.View--ios .View__header-title{font:500 17px/44px -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;text-align:center}.View--ios .View__header-item--active{opacity:1;visibility:visible;transform:translateZ(0)}.View--ios.View--header .View__panels{top:64px}.View--ios .View__panel{background:#efeff4}.View--ios .View__panel--next,.View--ios .View__panel--prev{display:block;visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel{transform:translate3d(-50%,0,0)}.View--ios .View__panel--next{transform:translateZ(0)}.View--ios .View__panel--active~.View__panel,.View--ios .View__panel--next~.View__panel{transform:translate3d(100%,0,0)}.View--ios .View__panel--next:before,.View--ios .View__panel--prev:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#000;content:"";pointer-events:none}.View--ios .View__panel--prev:before{animation:animation-fade-in .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel--next:before{animation:animation-fade-out .6s cubic-bezier(.36,.66,.04,1)}.View--android .View__panel--active:before,.View--ios .View__panel--active:before,.View--ios .View__panel--next~.View__panel--prev:before,.View--ios .View__panel--prev~.View__panel--next:before{content:none}.View--ios .View__panel--active{visibility:visible;transform:translateZ(0)}.View--android{font-family:Roboto,Droid,Open Sans,sans-serif}.View--android .View__header{height:80px}.View--android .View__header-in{height:80px;box-shadow:0 0 4px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.16)}.View--android .View__header-item{top:24px;height:56px;padding:0 10px}.View--android .View__header-left,.View--android .View__header-right{padding:1px 6px 0;font-size:14px;line-height:16px;font-weight:500;text-transform:uppercase;color:#fff;color:rgba(255,255,255,.7)}.View--android .View__header-left:active,.View--android .View__header-right:active{color:#fff;color:rgba(255,255,255,.9)}.View--android .View__header-left{-ms-flex:0 0 auto;flex:0 0 auto;max-width:22%}.View--android .View__header-left:empty{display:none}.View--android .View__header-item--next,.View--android .View__header-item--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__header-item{transform:translateZ(0);opacity:0}.View--android .View__header-item--next{transform:translateZ(0);opacity:1}.View--android .View__header-item--next~.View__header-item{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__header-item--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__header-item--active~.View__header-item{transform:translate3d(0,80px,0)}.View--android .View__header-title{font:500 20px/56px Roboto,Open Sans,sans-serif}.View--android.View--header .View__panels{top:80px}.View--android .View__panel{background:#fff}.View--android .View__panel--next,.View--android .View__panel--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__panel{transform:translateZ(0);opacity:0}.View--android .View__panel--next{transform:translateZ(0);opacity:1}.View--android .View__panel--next~.View__panel{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__panel--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__panel--active~.View__panel{transform:translate3d(0,80px,0)}@keyframes animation-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes animation-fade-out{0%{opacity:.3}to{opacity:0}}@keyframes animation-full-fade-in{0%{opacity:0}to{opacity:1}}.ScrollView{position:relative;width:100%;height:100%;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch}.ScrollView__top{position:absolute;z-index:1}.ScrollView--ios .ScrollView__top{right:0;left:0;height:60px;bottom:100%}.ScrollView--android .ScrollView__top{position:absolute;top:-24px;left:50%;height:40px;width:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3)}.ScrollView__in{transform:translateZ(0)}.Spinner{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.Spinner--ios .Spinner__self{position:relative}.Spinner--android.Spinner--on .Spinner__self{animation:rotator 1.4s linear infinite}.Spinner--android .Spinner__path{transform-origin:center}.Spinner--ios .Spinner__part{width:7.5%;height:27.5%;x:46.25%;y:36.25%}.Spinner--ios.Spinner--on .Spinner__part{animation:fade 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:1}to{opacity:.1}}.Group{padding:15px 0}.Alert--android .Alert__content p,.Alert--ios .Alert__content p,.Group,.Group__title{margin:0}.Group--ios .Group__title{font:13px/18px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#6d6d72;padding:0 15px 7px}.Group__description{font:13px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#6d6d72;padding:7px 15px 0}.Group--android .Group__title{font:500 14px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#5181b8;padding:0 16px 17px}.Entity{position:relative;height:64px;padding:0 0 0 75px;text-align:left}.Entity--small{height:48px;padding:0 0 0 60px}.Entity__aside{position:absolute;top:0;left:0;width:64px;height:64px}.Entity--small .Entity__aside{width:48px;height:48px}.Entity--no-photo .Entity__aside{background:#d4dae1;border-radius:50%}.Entity__photo{width:64px;height:64px;border-radius:50%}.Entity--small .Entity__photo{width:48px;height:48px}.Entity__main{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.Entity__description,.Entity__title{max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:20px;white-space:nowrap}.Entity__title{font-size:15px;font-weight:500;color:#2c2d2e;margin:0 0 3px}.Entity__description{font-size:14px;color:#909499}.Entity--ios{margin:0 15px}.Entity--android{margin:0 16px}.List{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;list-style:none}.List--ios{background:#fff}.List--ios:after,.List--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:"";bottom:100%;background:#dfdfdf}.List--ios:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.List--ios:after,.List--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem{position:relative;margin:0;padding:0;white-space:nowrap;font-size:17px;line-height:22px}.ListItem__in{position:relative;display:-ms-flexbox;display:flex;max-width:100%}.ListItem__icon{position:relative;-ms-flex:0 0 auto;flex:0 0 auto}.Icon>img,.Icon>svg,.ListItem__icon-in>img,.ListItem__icon-in>svg{vertical-align:top}.ListItem__main{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.ListItem__aside,.ListItem__indicator{-ms-flex:0 0 auto;flex:0 0 auto;max-width:75%;color:#8e8e93;text-align:right;text-overflow:ellipsis}.ListItem__indicator{overflow:hidden}.ListItem__aside{padding:0;overflow:visible}.ListItem--ios{font-size:17px;line-height:22px}.ListItem--ios.ListItem--expandable:before{position:absolute;top:50%;right:16px;margin-top:-4px;width:7px;height:7px;border-top:2px solid #c7c7cc;border-right:2px solid #c7c7cc;content:"";transform:rotate(45deg);z-index:1}.ListItem--ios .ListItem__in{padding:0 15px;background:#fff}.ListItem--ios.ListItem--expandable .ListItem__in{padding:0 35px 0 15px}.List--ios.List--icon-indent .ListItem__icon:empty,.ListItem--ios.ListItem--icon-indent .ListItem__icon:empty{padding-left:44px}.ListItem--ios .ListItem__icon:before{position:absolute;bottom:0;left:100%;width:100vw;height:1px;background:#dfdfdf;content:""}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.ListItem--ios .ListItem__icon:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem--ios .ListItem__icon-in{width:29px;height:29px;padding:7px 15px 9px 0}.ListItem--ios .ListItem__main{padding:11px .5em 12px 0}.ListItem--ios .ListItem__aside,.ListItem--ios .ListItem__indicator{padding:11px 0 12px}.ListItem--android{font-size:16px;color:#2e3033}.ListItem--android .ListItem__in{padding:0 16px}.ListItem--android .ListItem__icon-in{width:24px;height:24px;padding:14px 32px 18px 0}.ListItem--android .ListItem__main{padding:16px .5em 17px 0}.ListItem--android .ListItem__aside,.ListItem--android .ListItem__indicator{padding:16px 0 17px}.Tappable--ios.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Button--vk-wide-primary){background:#d9d9d9!important}.Tappable--ios.Tappable--active:after,.Tappable--ios.Tappable--active:before{content:"";position:absolute;right:0;left:0;height:1px;background:#dfdfdf;z-index:2}.Tappable--ios.Tappable--active:before{bottom:100%}.Tappable--ios.Tappable--active:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.Tappable--ios.Tappable--active:before{background:linear-gradient(180deg,#c8c7cc 50%,#d9d9d9 0)}.Tappable--ios.Tappable--active:after{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Tappable--android{position:relative;transition:background-color .15s ease-out}.Tappable--android.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Alert__btn--primary):not(.Button--vk-wide-primary){background:#f0f1f3!important}.Tappable--android .Tappable__waves{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.Tappable--android .Tappable__wave{position:absolute;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;content:"";border-radius:50%;background:rgba(128,128,128,.1);animation:animation-wave .3s cubic-bezier(.4,0,.2,1)}@keyframes animation-wave{0%{transform:scale(1);opacity:1}30%{opacity:1}to{transform:scale(8);opacity:0}}.FormLayout{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;position:relative;background:#fff;list-style:none}.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{position:absolute;right:0;left:0;z-index:1;height:1px;background:#dfdfdf;content:""}.FormLayout--ios.FormLayout:before{bottom:100%}.FormLayout--ios.FormLayout:after{top:100%}.FormLayout__row{display:-ms-flexbox;display:flex;position:relative;margin:0;white-space:nowrap;line-height:22px;max-width:100%}.FormLayout--ios .FormLayout__row{font-size:17px}.FormLayout--android .FormLayout__row{font-size:16px}.FormLayout__separator{position:relative;width:0}.FormLayout--ios .FormLayout__separator:before{position:absolute;bottom:0;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout__row:last-child .FormLayout__label:before,.FormLayout__row:last-child .FormLayout__separator:before{content:none}.FormLayout--ios .FormLayout__separator{left:15px}.FormLayout--android .FormLayout__separator{left:0}.FormLayout__label{position:relative;-ms-flex:0 0 100px;flex:0 0 100px;max-width:100px;vertical-align:top}.FormLayout--ios .FormLayout__label:before{position:absolute;bottom:0;left:15px;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout--android .FormLayout__label{display:none}.FormLayout__label-in{overflow:hidden;text-overflow:ellipsis}.FormLayout--ios .FormLayout__label-in{padding:11px 15px 12px}.FormLayout--android .FormLayout__label-in{padding:16px 15px 18px}.FormLayout__field{-ms-flex:1 0 auto;flex:1 0 auto;padding:0 15px;vertical-align:top}.FormLayout--ios .FormLayout__underline{display:none}.FormLayout--android .FormLayout__underline{position:absolute;bottom:9px;left:16px;right:16px;height:2px;background:linear-gradient(0deg,transparent 50%,#d6d6d6 0);content:""}.FormLayout--android .FormLayout__underline:before{position:absolute;top:0;right:0;bottom:0;left:0;background:#518bcc;content:"";transform:scaleX(0);transition:transform .1s cubic-bezier(.4,0,.2,1)}.FormLayout--android input:focus+.FormLayout__underline:before,.FormLayout--android textarea:focus+.FormLayout__underline:before{transform:scaleX(1);transition:transform .14s cubic-bezier(.4,0,.2,1)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.FormLayout--ios .FormLayout__label:before,.FormLayout--ios .FormLayout__separator:before,.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Icon--verbose{background:#ccc}.Icon--ios{width:29px;height:29px;border-radius:7px;overflow:hidden}.Icon--android{width:24px;height:24px}.Text p{margin:0 0 1em}.Text b,.Text strong{font-weight:700}.Text em,.Text i{font-style:italic}.Text a{text-decoration:none;color:#5181b8;font-weight:500}.Text--left{text-align:left}.Text--center{text-align:center}.Text--right{text-align:right}.Text--ios{font-size:15px;line-height:20px;color:#2e3033;padding:8px 15px}.Text--ios p{margin:0 0 20px}.Text--android{color:#2e3033;font-size:16px;line-height:24px;padding:8px 16px}.Text--android p{margin:0 0 24px}.Div--ios{padding:8px 15px}.Div--android{padding:8px 16px}.Div--shadow{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06)}.Div--border,.Div--shadow{position:relative;background:#fff}.Div--border:after,.Div--border:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Div--border:before{bottom:100%;background:#dfdfdf}.Div--border:after{bottom:0;background:#dfdfdf}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Div--border:after,.Div--border:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Flex{display:-ms-flexbox;display:flex;margin:0 -6px}.Flex__item{margin:0 6px}.BackButton{vertical-align:top;padding:0 24px 0 4px}.BackButton--ios{color:#fff}.BackButton--android{color:#444547}.Button{margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;position:relative;display:block;width:100%;outline:0;border:0;background:#fff;text-align:left}.Button--ios:after,.Button--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Button--ios:before{bottom:100%;background:#dfdfdf}.Button--ios:after{bottom:0;background:#dfdfdf}.Button--ios{font:17px/22px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;padding:11px 15px 12px}.Button--android{font:16px/22px Roboto,Droid,Open Sans,sans-serif;padding:16px 16px 18px}.Button[disabled]{color:#8e8e93;background:#fff}.Button--left{text-align:left}.Button--center{text-align:center}.Button--right{text-align:right}.Button--ios.Button--primary{color:#007aff;font-weight:500}.Button--ios.Button--danger{color:#ff3f34}.Button--android.Button--primary{color:#518bcc}.Button--android.Button--danger{color:#e64646}.Button--vk-wide,.Button--vk-wide-primary{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);background:#fff;font-weight:500}.Button--vk-wide-primary{background:#5181b8;color:#fff}.Button--vk-primary.Tappable--active:not([disabled]),.Button--vk-primary:active:not([disabled]),.Button--vk-rich.Tappable--active:not([disabled]),.Button--vk-rich:active:not([disabled]),.Button--vk-wide-primary.Tappable--active:not([disabled]),.Button--vk-wide-primary:active:not([disabled]){background:#4872a3}.Button+.Button:before,.Button--ios.Button--vk-primary.Tappable--active:after,.Button--ios.Button--vk-primary.Tappable--active:before,.Button--ios.Button--vk-primary:after,.Button--ios.Button--vk-primary:before,.Button--ios.Button--vk-rich.Tappable--active:after,.Button--ios.Button--vk-rich.Tappable--active:before,.Button--ios.Button--vk-rich:after,.Button--ios.Button--vk-rich:before,.Button--ios.Button--vk-secondary.Tappable--active:after,.Button--ios.Button--vk-secondary.Tappable--active:before,.Button--ios.Button--vk-secondary:after,.Button--ios.Button--vk-secondary:before,.Button--ios.Button--vk-tertiary.Tappable--active:after,.Button--ios.Button--vk-tertiary.Tappable--active:before,.Button--ios.Button--vk-tertiary:after,.Button--ios.Button--vk-tertiary:before,.Button--vk-wide-primary.Tappable--active:after,.Button--vk-wide-primary.Tappable--active:before,.Button--vk-wide-primary:after,.Button--vk-wide-primary:before{content:none}.Button--vk-wide-primary[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-rich{display:inline-block}.Button--vk-primary,.Button--vk-secondary,.Button--vk-tertiary{display:inline-block;font-size:14px;line-height:16px;padding:8px 12px;border-radius:2px}.Button--vk-rich{font-size:16px;font-weight:500;line-height:20px;padding:14px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.24);border-radius:2px}.Button--vk-rich[disabled]{box-shadow:0 0 2px rgba(0,0,0,.05),0 2px 2px rgba(0,0,0,.1)}.Button--vk-primary,.Button--vk-rich{color:#fff;background:#5181b8}.Button--vk-primary[disabled],.Button--vk-rich[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-secondary{color:#4774a8;background:rgba(0,57,115,.1)}.Button--vk-secondary.Tappable--active:not([disabled]),.Button--vk-secondary:active:not([disabled]){background:rgba(0,57,115,.2)}.Button--vk-secondary[disabled]{color:rgba(71,116,168,.4);background:rgba(0,57,115,.05)}.Button--vk-tertiary{background:0 0;color:#4774a8}.Button--vk-tertiary.Tappable--active:not([disabled]),.Button--vk-tertiary:active:not([disabled]){background:rgba(0,57,115,.1)}.Button--vk-tertiary[disabled]{color:rgba(71,116,168,.4);background:0 0}.Button--wide{width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Button--ios:after,.Button--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}#root,body,html{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;-webkit-overflow-scrolling:touch;margin:0;padding:0;height:100%;background:#efeff4;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}.Checkbox{display:block;margin:-11px -15px;padding:8px 15px}.Checkbox__self{display:none}.Checkbox__pseudo{position:relative;display:block;-webkit-tap-highlight-color:transparent}.Checkbox__pseudo:before{position:absolute;content:"";transition:transform .1s ease}.Checkbox__self:checked+.Checkbox__pseudo:before{transform:translateX(20px)}.Checkbox--ios .Checkbox__pseudo{width:48px;height:28px;border:1px solid #e6e6e6;background:#fff;border-radius:15px;transition:background-color .1s ease,border-color .1s ease}.Checkbox--ios .Checkbox__self:checked+.Checkbox__pseudo{border-color:#4cd864;background:#4cd864}.Checkbox--ios .Checkbox__self[disabled]+.Checkbox__pseudo{border-color:#ddd;background:#ddd}.Checkbox--ios .Checkbox__pseudo:before{top:0;left:0;width:28px;height:28px;border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Checkbox--android .Checkbox__pseudo{width:34px;height:14px;background:#c6c5c5;border-radius:7px;transition:background-color .1s ease}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo{background:#a8bfdb}.Checkbox--android .Checkbox__self[disabled]+.Checkbox__pseudo{opacity:.5}.Checkbox--android .Checkbox__pseudo:before{top:-3px;left:-3px;width:20px;height:20px;background:#f1f1f1;border-radius:10px;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24)}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo:before,.Radio__self:checked~.Radio__icon:before{background:#5181b8}.File{display:block;position:relative;overflow:hidden;padding:1px 0 0}.File__self{position:absolute;top:0;right:0;bottom:0;left:0;font-size:10em;z-index:1;opacity:0}.Input{position:relative;display:block;margin:0;width:100%;height:22px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;min-width:140px}.Input--left{text-align:left}.Input--center{text-align:center}.Input--right{text-align:right}.Input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1000px #fff}.Input--ios{font-size:17px;padding:11px 0 12px}.Input--android{font-size:16px;padding:16px 0 18px}.Textarea{display:block;margin:0;width:100%;height:66px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;resize:none}.Textarea--ios{font-size:17px;padding:11px 0 12px}.Textarea--android{font-size:16px;padding:16px 0 18px}.Radio{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;margin-right:-.5em;-ms-flex-align:center;align-items:center}.Radio__self{display:none}.Radio__label{-ms-flex:1 1 auto;flex:1 1 auto}.Radio__icon{-ms-flex:0 0 auto;flex:0 0 auto}.Radio--ios{margin:-11px 0 -12px;padding:11px 0 12px}.Radio--ios .Radio__icon{width:13px;height:11px;opacity:0;transition:opacity .14s ease}.Radio--ios .Radio__self:checked~.Radio__icon{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='26' height='21' viewBox='0 0 26 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4 14.471L2.829 8.9.001 11.728l8.485 8.485 2.828-2.828-.086-.086L25.699 2.828 22.871 0z' fill='%23007AFF'/%3E%3C/svg%3E") 0 0/100% no-repeat;opacity:1}.Radio--android{margin:-16px 0 -17px;padding:16px 0 17px;-ms-flex-align:center;align-items:center}.Radio--android .Radio__label{-ms-flex-order:1;order:1;padding:0 0 0 18px}.Radio--android .Radio__icon{-ms-flex-order:0;order:0;position:relative;width:16px;height:16px;border-radius:10px;border:2px solid #c4c8cc;transition:border-color .14s ease}.Radio--android .Radio__icon:before{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;content:"";background:0 0;transition:background-color .14s ease}.Radio__self:checked~.Radio__icon{border-color:#5181b8}.Select,.Select__self{display:block;outline:0}.Select{margin:0;overflow:hidden;min-width:140px}.Select__self{font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:0 0;width:100%}.Select--ios .Select__self{font-size:17px;padding:11px 0 12px}.Select--android .Select__self{font-size:16px;padding:16px 0 18px}.Slider{position:relative;height:28px;margin:2px 14px}.Slider__in{height:100%}.Slider__dragger{position:absolute;top:50%;left:0;width:0;height:0}.Slider__dragger:before{position:absolute;top:0;width:100%;content:"";height:1px;background:#0f7afb}.Slider__thumb{position:absolute;top:-14px;right:-14px;width:28px;height:28px;content:"";transition:transform .1s ease}.Slider--ios{background:linear-gradient(180deg,#b7b7b7 1px,transparent 0) 0 14px repeat-x}.Slider--ios .Slider__thumb{border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Slider--android{background:linear-gradient(180deg,#bfbfbf 2px,transparent 0) 0 14px repeat-x}.Slider--android .Slider__dragger:before{height:2px;background:#5181b8}.Slider--android .Slider__thumb{top:-13px}.Slider--android .Slider__thumb:before{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;content:"";background:#5181b8;border-radius:6px;transition:box-shadow .14s ease,transform .14s ease}.Slider--android.Slider--active .Slider__thumb:before{box-shadow:0 0 0 3px rgba(128,128,128,.2);transform:scale(1.25)}#root,.Alert,body,html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Alert--ios{width:270px;-ms-flex:0 0 auto;flex:0 0 auto;background:#fafafa;border-radius:12px;animation:animation-ios-alert-intro .2s ease}.Alert--ios .Alert__content{position:relative;padding:19px 16px 20px;font:13px/16px -apple-system,Helvetica Neue,Helvetica,sans-serif;text-align:center}.Alert--ios .Alert__content:after{content:"";position:absolute;top:100%;height:1px;right:0;left:0;background:#e0e0e0}.Alert--ios .Alert__content h2{margin:0 0 7px;font:500 17px/22px -apple-system,Helvetica Neue,Helvetica,sans-serif}.Alert__footer{display:-ms-flexbox;display:flex;margin-top:1px}.Alert--ios.Alert--v .Alert__footer{-ms-flex-direction:column;flex-direction:column}.Alert--ios .Alert__btn{position:relative;background:#fafafa;-ms-flex:1 0 auto;flex:1 0 auto;font-size:17px;line-height:44px;color:#007aff;border:0;padding:0;margin:0;height:44px;display:block;outline:0}.Alert--ios .Alert__btn:active{z-index:1}.Alert--ios .Alert__btn:after{content:"";position:absolute;top:0;bottom:0;left:100%;width:1px;height:auto;background:#e0e0e0}.Alert--ios .Alert__btn.Tappable--active:after,.Alert--ios .Alert__btn.Tappable--active:before{content:none}.Alert--ios .Alert__btn--primary{font-weight:500}.Alert--ios.Alert--h .Alert__btn{margin-right:1px}.Alert--ios.Alert--h .Alert__btn:first-child{border-radius:0 0 0 12px}.Alert--ios.Alert--h .Alert__btn:last-child{border-radius:0 0 12px 0;margin:0}.Alert--ios.Alert--h .Alert__btn:first-child:last-child{border-radius:0 0 12px 12px}.Alert--ios.Alert--v .Alert__btn{margin:0 0 1px}.Alert--ios.Alert--v .Alert__btn:after{content:"";position:absolute;top:100%;right:0;left:0;width:100%;height:1px;background:#e0e0e0}.Alert--ios.Alert--v .Alert__btn:last-child{border-radius:0 0 12px 12px;margin:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Alert--ios .Alert__content:after{background:linear-gradient(0deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn:after{background:linear-gradient(270deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn.Tappable--active:after{background:linear-gradient(270deg,#e0e0e0 50%,#d9d9d9 0)}.Alert--ios.Alert--h .Alert__btn:last-child:after{content:none}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before,.Alert--ios.Alert--v .Alert__btn:after{position:absolute;right:0;left:0;height:1px;background:linear-gradient(0deg,transparent 50%,#e0e0e0 0);content:""}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before{bottom:100%;background:linear-gradient(180deg,transparent 50%,#e0e0e0 0);top:auto}.Alert--ios.Alert--v .Alert__btn:after{top:100%}.Alert--ios.Alert--v .Alert__btn:last-child:after{content:none}}.Alert--android{min-width:280px;margin:auto 24px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.22),0 24px 24px rgba(0,0,0,.3);border-radius:2px;animation:animation-android-alert-intro .2s ease}.Alert--android .Alert__content{padding:18px 24px 16px;font-size:16px;line-height:24px;color:#71757a}.Alert--android .Alert__content h2{margin:0 0 8px;font-weight:500;font-size:20px;line-height:28px;color:#2e3033}.Alert--android .Alert__content p+p{margin:24px 0 0}.Alert--android .Alert__footer{padding:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.Alert--android .Alert__btn{background:0 0;border:0;-ms-flex:0 0 auto;flex:0 0 auto;text-transform:uppercase;font-weight:500;font-size:14px;line-height:16px;padding:8px;border-radius:2px;margin:0 0 0 12px;color:#5181b8;outline:0}.Alert--android .Alert__btn--primary{color:#fff;background:#5181b8}.Alert--android .Alert__btn--primary.Tappable--active,.Alert--android .Alert__btn--primary:active{background:#4872a3}@keyframes animation-ios-alert-intro{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes animation-android-alert-intro{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.AlertInput{position:relative;z-index:1}.AlertInput--android{margin:3px -15px 9px}.AlertInput--ios{margin:11px 0 12px}.AlertInput--ios:before{position:absolute;z-index:-1;background:#9f9f9f;width:100%;height:100%;padding:1px 1px 0 0;transform:translate3d(-.5px,-.5px,0);content:""}.AlertInput__self{position:relative;box-sizing:border-box;width:100%;background:#fff;z-index:1;border:0;height:24px;font-size:13px;line-height:24px;padding:0 5px}.AlertInput__self:focus{outline:0}.ScreenSpinner{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex:0 0 auto;flex:0 0 auto}.ScreenSpinner--ios{width:88px;height:88px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:8px} \ No newline at end of file diff --git a/dist/vkui.js b/dist/vkui.js index 69a673d68f..3e3fd9e91a 100644 --- a/dist/vkui.js +++ b/dist/vkui.js @@ -1 +1 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",s===a.c),r(t,e+"--android",s===a.b),t))}var a=n(5),i=n(3);t.a=o;var s=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),s||(s=/android/i.test(i)?o:a),s}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,s=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var c=n(62),u=(n.n(c),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return s();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=w();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,s=n.i(m.b)(e),c=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(s-a),y:Math.round(c-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:w()}),s(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),_(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var s=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,s),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=n(0),c=n.n(s),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var s=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(s),a&&i.props.onEndY&&i.props.onEndY(s),o&&i.props.onEndX&&i.props.onEndX(s)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},s=r,a(i,s)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return c.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(s.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/_,a=o*_;o>=1&&(a=Math.min(_+.2*_*(o-1),2*_));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/_,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?_:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?_:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.prevPanel,o=e.nextPanel;return t===n||t===r||t===o}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),c.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&c.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},c.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),c.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(s.Component);w.defaultProps={children:""},t.a=w},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:s,value:n+Math.round(i*u)*o}}return{position:c,absolutePosition:s,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return c.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},c.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},c.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},c.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(s.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.6.16",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),s=n.n(i),c=n(1),u=(n.n(c),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,s,c){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,s,c],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var s=n(26);n.d(t,"List",function(){return s.a});var c=n(12);n.d(t,"ListItem",function(){return c.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var _=n(27);n.d(t,"Radio",function(){return _.a});var w=n(30);n.d(t,"Select",function(){return w.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return X});var X=n(36).version}])}); \ No newline at end of file +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",s===a.c),r(t,e+"--android",s===a.b),t))}var a=n(5),i=n(3);t.a=o;var s=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),s||(s=/android/i.test(i)?o:a),s}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,s=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var c=n(62),u=(n.n(c),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return s();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=w();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,s=n.i(m.b)(e),c=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(s-a),y:Math.round(c-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:w()}),s(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),_(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var s=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,s),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=n(0),c=n.n(s),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var s=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(s),a&&i.props.onEndY&&i.props.onEndY(s),o&&i.props.onEndX&&i.props.onEndX(s)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},s=r,a(i,s)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return c.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(s.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/_,a=o*_;o>=1&&(a=Math.min(_+.2*_*(o-1),2*_));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/_,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?_:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?_:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.prevPanel,o=e.nextPanel;return t===n||t===r||t===o}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),c.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&c.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},c.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),c.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(s.Component);w.defaultProps={children:""},t.a=w},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:s,value:n+Math.round(i*u)*o}}return{position:c,absolutePosition:s,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return c.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},c.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},c.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},c.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(s.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.6.18",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),s=n.n(i),c=n(1),u=(n.n(c),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,s,c){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,s,c],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var s=n(26);n.d(t,"List",function(){return s.a});var c=n(12);n.d(t,"ListItem",function(){return c.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var _=n(27);n.d(t,"Radio",function(){return _.a});var w=n(30);n.d(t,"Select",function(){return w.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return X});var X=n(36).version}])}); \ No newline at end of file diff --git a/package.json b/package.json index 5f10d13f33..6da63ede9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vkui", - "version": "0.6.18", + "version": "0.6.19", "private": true, "main": "dist/vkui.js", "devDependencies": { From 415179f19864926db704dec3324c10977708f96e Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 9 Jun 2017 19:37:23 +0300 Subject: [PATCH 003/143] Fix AlertInput styles --- src/components/AlertInput/AlertInput.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AlertInput/AlertInput.css b/src/components/AlertInput/AlertInput.css index dbfe581ce8..f9f262f755 100644 --- a/src/components/AlertInput/AlertInput.css +++ b/src/components/AlertInput/AlertInput.css @@ -31,6 +31,7 @@ font-size: 13px; line-height: 24px; padding: 0 5px; + border-radius: 0; } .AlertInput__self:focus { outline: 0; From 31d5c945688cdd546b7d6adea59671226e25d7cd Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 9 Jun 2017 19:39:21 +0300 Subject: [PATCH 004/143] Blur active element on panel transition --- src/components/View/View.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/View/View.js b/src/components/View/View.js index 30a699ffd7..51da9b3d50 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -34,6 +34,9 @@ export default class View extends Component { refsStore = {}; componentWillReceiveProps (nextProps) { if (this.state.activePanel !== nextProps.activePanel) { + if (typeof window !== 'undefined' && document.activeElement) { + document.activeElement.blur(); + } this.setState({ visiblePanels: [this.state.activePanel, nextProps.activePanel] }); From 7f61a22373e3dd6f9efb6c56c2150aa12825f882 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Tue, 13 Jun 2017 15:54:58 +0300 Subject: [PATCH 005/143] Change header height for Android --- src/components/View/View.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/View/View.css b/src/components/View/View.css index 16561e5bce..4a0d511c14 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -287,17 +287,17 @@ * Header */ .View--android .View__header { - height: 80px; + height: 64px; } .View--android .View__header-in { - height: 80px; + height: 64px; box-shadow: 0 0 4px rgba(0, 0, 0, .08), 0 4px 4px rgba(0, 0, 0, .16); } .View--android .View__header-item { - top: 24px; - height: 56px; + top: 0; + height: 64px; padding: 0 10px; } @@ -372,7 +372,7 @@ */ .View--android .View__panels {} .View--android.View--header .View__panels { - top: 80px; + top: 64px; } .View--android .View__panel { From 79d4a7f17b837c0f0c9b1e0da82959decbcbdd92 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 14 Jun 2017 15:38:06 +0300 Subject: [PATCH 006/143] iOS panel transition prototype --- src/components/ScrollView/ScrollView.css | 6 +- src/components/Tappable/Tappable.js | 2 +- src/components/View/View.css | 72 ++++++++++++++++++------ src/components/View/View.js | 37 +++++++++++- src/styles/common.css | 6 ++ 5 files changed, 102 insertions(+), 21 deletions(-) diff --git a/src/components/ScrollView/ScrollView.css b/src/components/ScrollView/ScrollView.css index ac73c0c4cb..ca3e580212 100644 --- a/src/components/ScrollView/ScrollView.css +++ b/src/components/ScrollView/ScrollView.css @@ -1,10 +1,14 @@ .ScrollView { position: relative; width: 100%; + /* height: 100%; - overflow-y: scroll; + */ overflow-x: hidden; + /* + overflow-y: scroll; -webkit-overflow-scrolling: touch; + */ } .ScrollView__top { diff --git a/src/components/Tappable/Tappable.js b/src/components/Tappable/Tappable.js index f744522fdf..379f01c1c9 100644 --- a/src/components/Tappable/Tappable.js +++ b/src/components/Tappable/Tappable.js @@ -14,7 +14,7 @@ const baseClassNames = getClassName('Tappable'); const osname = platform(); const ACTIVE_DELAY = 70; -const ACTIVE_EFFECT_DELAY = 300; +const ACTIVE_EFFECT_DELAY = 600; let storage = {}; diff --git a/src/components/View/View.css b/src/components/View/View.css index 4a0d511c14..7bb7222ede 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -4,17 +4,23 @@ * Container */ .View { + /* position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; + */ + position: relative; + height: 100%; + width: 100%; background: #efeff4; word-wrap: break-word; } .View--animated { pointer-events: none; + overflow: hidden; } /** @@ -44,7 +50,6 @@ visibility: hidden; display: flex; align-items: center; - background: var(--vk-color); } .View__header-left, @@ -71,22 +76,32 @@ * Panels list */ .View__panels { + height: 100%; + width: 100%; + /* position: absolute; top: 0; right: 0; bottom: 0; left: 0; + */ } /** * Panel */ .View__panel { + /* position: absolute; top: 0; right: 0; bottom: 0; left: 0; + */ + position: relative; + width: 100%; + height: 100%; + box-sizing: border-box; z-index: 1; visibility: hidden; } @@ -99,7 +114,7 @@ * Mask */ .View__mask { - position: absolute; + position: fixed; top: 0; right: 0; bottom: 0; @@ -114,7 +129,7 @@ * Popout */ .View__popout { - position: absolute; + position: fixed; top: 0; right: 0; bottom: 0; @@ -137,7 +152,10 @@ * Header */ .View--ios .View__header { + position: fixed; + width: 100%; height: 64px; + z-index: 2; } .View--ios .View__header-in { @@ -166,11 +184,15 @@ */ .View--ios .View__header-item--prev, .View--ios .View__header-item--next { + position: absolute; + top: 20px; + left: 0; + overflow: hidden; visibility: visible; transition: - transform .6s cubic-bezier(.36, .66, .04, 1), - visibility .6s cubic-bezier(.36, .66, .04, 1), - opacity .6s cubic-bezier(.36, .66, .04, 1); + transform 6s cubic-bezier(.36, .66, .04, 1), + visibility 6s cubic-bezier(.36, .66, .04, 1), + opacity 6s cubic-bezier(.36, .66, .04, 1); } .View--ios .View__header-item--prev { opacity: 0; @@ -211,13 +233,20 @@ .View--ios .View__panels {} .View--ios.View--header .View__panels { + /* top: 64px; + */ } .View--ios .View__panel { + padding-top: 64px; background: #efeff4; } + .View--ios .View__panel-in { + position: relative; + } + /** * Panel transition */ @@ -226,8 +255,8 @@ display: block; visibility: visible; transition: - transform .6s cubic-bezier(.36, .66, .04, 1), - visibility .6s cubic-bezier(.36, .66, .04, 1); + transform 6s cubic-bezier(.36, .66, .04, 1), + visibility 6s cubic-bezier(.36, .66, .04, 1); } .View--ios .View__panel { transform: translate3d(-50%, 0, 0); @@ -239,29 +268,37 @@ transform: translate3d(100%, 0, 0); } - .View--ios .View__panel--prev::before, - .View--ios .View__panel--next::before { + .View--ios .View__panel--prev > .View__panel-in::before, + .View--ios .View__panel--next > .View__panel-in::before { position: absolute; top: 0; right: 0; - bottom: 0; left: 0; + bottom: 0; z-index: 10; background: #000; content: ''; pointer-events: none; } - .View--ios .View__panel--prev::before { - animation: animation-fade-in .6s cubic-bezier(.36, .66, .04, 1); + .View--ios .View__panel--prev > .View__panel-in::before { + animation: animation-fade-in 6s cubic-bezier(.36, .66, .04, 1); } - .View--ios .View__panel--next::before { - animation: animation-fade-out .6s cubic-bezier(.36, .66, .04, 1); + .View--ios .View__panel--next > .View__panel-in::before { + animation: animation-fade-out 6s cubic-bezier(.36, .66, .04, 1); } - .View--ios .View__panel--prev ~ .View__panel--next::before, - .View--ios .View__panel--next ~ .View__panel--prev::before { + .View--ios .View__panel--prev ~ .View__panel--next > .View__panel-in::before, + .View--ios .View__panel--next ~ .View__panel--prev > .View__panel-in::before { content: none; } + .View--ios.View--animated .View__panel--prev, + .View--ios.View--animated .View__panel--next { + position: absolute; + top: 0; + left: 0; + overflow: hidden; + } + /** * Active panel */ @@ -338,6 +375,7 @@ visibility .3s var(--android-easing) .2s; } .View--android .View__header-item { + background: var(--vk-color); transform: translate3d(0, 0, 0); opacity: 0; } diff --git a/src/components/View/View.js b/src/components/View/View.js index 51da9b3d50..c121622392 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -9,6 +9,12 @@ import { platform, ANDROID } from '../../lib/platform.js'; const osname = platform(); const baseClassNames = getClassName('View'); +// @TODO +// 1. Headers +// 2. Android +// 3. Pull to refresh +// 4. Infinite scroll + export default class View extends Component { constructor (props) { super(props); @@ -34,12 +40,20 @@ export default class View extends Component { refsStore = {}; componentWillReceiveProps (nextProps) { if (this.state.activePanel !== nextProps.activePanel) { + const pageYOffset = window.pageYOffset; + + // Blur inputs on panel transition if (typeof window !== 'undefined' && document.activeElement) { document.activeElement.blur(); } + + // @TODO Lock overscroll on window this.setState({ - visiblePanels: [this.state.activePanel, nextProps.activePanel] + visiblePanels: [this.state.activePanel, nextProps.activePanel], + pageYOffset }); + + console.log(this.state.activePanel, nextProps.activePanel); } } componentDidUpdate () { @@ -51,6 +65,14 @@ export default class View extends Component { activePanel: null, animated: true }); + + console.log(this.state.pageYOffset, document.querySelector(`#${this.state.visiblePanels[0]}`)); + + // Delegate scrollTop from window + // @TODO Переделать по-нормальному + document.querySelector(`#${this.state.visiblePanels[0]}`).parentNode.parentNode.scrollTop = this.state.pageYOffset; + document.querySelector(`#${this.state.visiblePanels[1]}`).parentNode.parentNode.scrollTop = 0; // @TODO зависит от направления + window.scrollTo(0, 0); }, 100); } } @@ -63,6 +85,15 @@ export default class View extends Component { activePanel: this.props.activePanel, animated: false }); + + // reset scrollTop for all panels + const panels = document.querySelectorAll('.View__panel'); + + Array.prototype.forEach.call(panels, function(panel) { + if (!panel.classList.contains('View__panel--active')) { + panel.scrollTop = 0; + } + }); } } onHeaderClick = () => { @@ -146,7 +177,9 @@ export default class View extends Component { onTransitionEnd={this.transitionEndHandler} key={panel.key || panel.props.id || `panel-${i}`} > - {React.cloneElement(panel, { ref: this.getRef, activePanel, prevPanel, nextPanel })} +
+ {React.cloneElement(panel, { ref: this.getRef, activePanel, prevPanel, nextPanel })} +
))} diff --git a/src/styles/common.css b/src/styles/common.css index 34e448b905..1ec00b0005 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -1,6 +1,7 @@ html, body, #root { + /* position: fixed; top: 0; right: 0; @@ -8,6 +9,7 @@ body, left: 0; overflow: hidden; -webkit-overflow-scrolling: touch; + */ margin: 0; padding: 0; height: 100%; @@ -18,3 +20,7 @@ body, -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } + +body { + overflow-x: hidden; +} From d764fbe6d82114a3f958270ebf7ee9ffe2ff3db4 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 14 Jun 2017 15:56:58 +0300 Subject: [PATCH 007/143] Don't update prev panel --- src/components/ScrollView/ScrollView.js | 4 ++-- src/components/View/View.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ScrollView/ScrollView.js b/src/components/ScrollView/ScrollView.js index e7d68065bf..2a0da87602 100644 --- a/src/components/ScrollView/ScrollView.js +++ b/src/components/ScrollView/ScrollView.js @@ -129,8 +129,8 @@ export default class ScrollView extends Component { return; } - shouldComponentUpdate ({ id, activePanel, prevPanel, nextPanel }) { - return id === activePanel || id === prevPanel || id === nextPanel; + shouldComponentUpdate ({ id, activePanel, nextPanel }) { + return id === activePanel || id === nextPanel; } render () { diff --git a/src/components/View/View.js b/src/components/View/View.js index 51da9b3d50..040307263d 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -146,7 +146,7 @@ export default class View extends Component { onTransitionEnd={this.transitionEndHandler} key={panel.key || panel.props.id || `panel-${i}`} > - {React.cloneElement(panel, { ref: this.getRef, activePanel, prevPanel, nextPanel })} + {React.cloneElement(panel, { ref: this.getRef, activePanel, nextPanel })} ))} From 4bd6ee74e486d29e8601eb0ecb455666f9df11a1 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 14 Jun 2017 20:30:51 +0300 Subject: [PATCH 008/143] New header animation for iOS --- src/components/BackButton/BackButton.css | 2 +- src/components/ScrollView/ScrollView.css | 1 + src/components/View/View.css | 117 ++++++++++++++++++----- src/components/View/View.js | 4 +- 4 files changed, 97 insertions(+), 27 deletions(-) diff --git a/src/components/BackButton/BackButton.css b/src/components/BackButton/BackButton.css index 33bd8f7617..deed1c6849 100644 --- a/src/components/BackButton/BackButton.css +++ b/src/components/BackButton/BackButton.css @@ -1,6 +1,6 @@ .BackButton { vertical-align: top; - padding: 0 24px 0 4px; + padding: 0 4px 1px; } .BackButton--ios { color: #fff; diff --git a/src/components/ScrollView/ScrollView.css b/src/components/ScrollView/ScrollView.css index ca3e580212..c11fc41f9c 100644 --- a/src/components/ScrollView/ScrollView.css +++ b/src/components/ScrollView/ScrollView.css @@ -1,6 +1,7 @@ .ScrollView { position: relative; width: 100%; + min-height: 100%; /* height: 100%; */ diff --git a/src/components/View/View.css b/src/components/View/View.css index 7bb7222ede..5f26b8d8d7 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -60,6 +60,18 @@ font-size: 17px; line-height: 20px; } + .View__header-left { + display: flex; + align-items: center; + } + .View__header-icon { + flex: 0 0 auto; + } + .View__header-left-in { + flex: 0 1 auto; + text-overflow: ellipsis; + overflow: hidden; + } .View__header-right { text-align: right; } @@ -189,25 +201,7 @@ left: 0; overflow: hidden; visibility: visible; - transition: - transform 6s cubic-bezier(.36, .66, .04, 1), - visibility 6s cubic-bezier(.36, .66, .04, 1), - opacity 6s cubic-bezier(.36, .66, .04, 1); - } - .View--ios .View__header-item--prev { - opacity: 0; - } - .View--ios .View__header-item--next { - opacity: 1; - } - .View--ios .View__header-item { - transform: translate3d(-50%, 0, 0); - } - .View--ios .View__header-item--next { - transform: translate3d(0, 0, 0); - } - .View--ios .View__header-item--next ~ .View__header-item { - transform: translate3d(50%, 0, 0); + transition: visibility .6s cubic-bezier(.36, .66, .04, 1); } .View--ios .View__header-title { @@ -215,17 +209,89 @@ text-align: center; } + .View--ios .View__header-title, + .View--ios .View__header-title, + .View--ios .View__header-icon, + .View--ios .View__header-icon, + .View--ios .View__header-left-in, + .View--ios .View__header-left-in, + .View--ios .View__header-right, + .View--ios .View__header-right { + opacity: 0; + } + .View--ios .View__header-item--prev .View__header-title, + .View--ios .View__header-item--next .View__header-title, + .View--ios .View__header-item--prev .View__header-icon, + .View--ios .View__header-item--next .View__header-icon, + .View--ios .View__header-item--prev .View__header-left-in, + .View--ios .View__header-item--next .View__header-left-in, + .View--ios .View__header-item--prev .View__header-right, + .View--ios .View__header-item--next .View__header-right { + transition: + transform .6s cubic-bezier(.36, .66, .04, 1), + visibility .6s cubic-bezier(.36, .66, .04, 1), + opacity .6s cubic-bezier(.36, .66, .04, 1); + } + .View--ios .View__header-item--prev .View__header-title, + .View--ios .View__header-item--prev .View__header-icon, + .View--ios .View__header-item--prev .View__header-left-in, + .View--ios .View__header-item--prev .View__header-right { + opacity: 0; + } + .View--ios .View__header-item--next .View__header-title, + .View--ios .View__header-item--next .View__header-icon, + .View--ios .View__header-item--next .View__header-left-in, + .View--ios .View__header-item--next .View__header-right { + opacity: 1; + } + + .View--ios .View__header-item .View__header-left-in { + transform: translate3d(-50%, 0, 0); + } + .View--ios .View__header-item--next .View__header-left-in { + transform: translate3d(0, 0, 0); + } + .View--ios .View__header-item--next ~ .View__header-item .View__header-left-in { + transform: translate3d(50%, 0, 0); + } + + .View--ios .View__header-item .View__header-title { + transform: translate3d(-50%, 0, 0); + } + .View--ios .View__header-item--next .View__header-title { + transform: translate3d(0, 0, 0); + } + .View--ios .View__header-item--next ~ .View__header-item .View__header-title { + transform: translate3d(100%, 0, 0); + } + /** * Active header */ .View--ios .View__header-item--active { - opacity: 1; visibility: visible; + /* + opacity: 1; transform: translate3d(0, 0, 0); + */ } - .View--ios .View__header-item--active ~ .View__header-item { + .View--ios .View__header-item--active ~ .View__header-item .View__header-left-in { transform: translate3d(50%, 0, 0); } + .View--ios .View__header-item--active ~ .View__header-item .View__header-title { + transform: translate3d(100%, 0, 0); + } + .View--ios .View__header-item--active .View__header-icon, + .View--ios .View__header-item--active .View__header-right { + opacity: 1; + visibility: visible; + } + .View--ios .View__header-item--active .View__header-left-in, + .View--ios .View__header-item--active .View__header-title { + opacity: 1; + visibility: visible; + transform: translate3d(0, 0, 0); + } /** * Panels @@ -245,6 +311,7 @@ .View--ios .View__panel-in { position: relative; + min-height: 100%; } /** @@ -255,8 +322,8 @@ display: block; visibility: visible; transition: - transform 6s cubic-bezier(.36, .66, .04, 1), - visibility 6s cubic-bezier(.36, .66, .04, 1); + transform .6s cubic-bezier(.36, .66, .04, 1), + visibility .6s cubic-bezier(.36, .66, .04, 1); } .View--ios .View__panel { transform: translate3d(-50%, 0, 0); @@ -281,10 +348,10 @@ pointer-events: none; } .View--ios .View__panel--prev > .View__panel-in::before { - animation: animation-fade-in 6s cubic-bezier(.36, .66, .04, 1); + animation: animation-fade-in .6s cubic-bezier(.36, .66, .04, 1); } .View--ios .View__panel--next > .View__panel-in::before { - animation: animation-fade-out 6s cubic-bezier(.36, .66, .04, 1); + animation: animation-fade-out .6s cubic-bezier(.36, .66, .04, 1); } .View--ios .View__panel--prev ~ .View__panel--next > .View__panel-in::before, .View--ios .View__panel--next ~ .View__panel--prev > .View__panel-in::before { diff --git a/src/components/View/View.js b/src/components/View/View.js index c121622392..f47f75d2a8 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -11,6 +11,7 @@ const baseClassNames = getClassName('View'); // @TODO // 1. Headers +// 1.1. Is clickable? // 2. Android // 3. Pull to refresh // 4. Infinite scroll @@ -152,7 +153,8 @@ export default class View extends Component { key={panel.key || panel.props.id || `panel-header-${i}`} >
- {panel.props.header.left} +
{panel.props.header.icon}
+
{panel.props.header.left}
{panel.props.header.title} From e4f9ce5e46349668cfcad32d2a25d5353eeb972c Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 14 Jun 2017 20:40:36 +0300 Subject: [PATCH 009/143] Remove comments and logs --- src/components/View/View.css | 32 +------------------------------- src/components/View/View.js | 12 +++--------- 2 files changed, 4 insertions(+), 40 deletions(-) diff --git a/src/components/View/View.css b/src/components/View/View.css index 5f26b8d8d7..4aaf9eb485 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -4,14 +4,6 @@ * Container */ .View { - /* - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; - */ position: relative; height: 100%; width: 100%; @@ -90,26 +82,12 @@ .View__panels { height: 100%; width: 100%; - /* - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - */ } /** * Panel */ .View__panel { - /* - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - */ position: relative; width: 100%; height: 100%; @@ -270,10 +248,6 @@ */ .View--ios .View__header-item--active { visibility: visible; - /* - opacity: 1; - transform: translate3d(0, 0, 0); - */ } .View--ios .View__header-item--active ~ .View__header-item .View__header-left-in { transform: translate3d(50%, 0, 0); @@ -298,11 +272,7 @@ */ .View--ios .View__panels {} - .View--ios.View--header .View__panels { - /* - top: 64px; - */ - } + .View--ios.View--header .View__panels {} .View--ios .View__panel { padding-top: 64px; diff --git a/src/components/View/View.js b/src/components/View/View.js index 87b27c643f..f5307bcf09 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -10,11 +10,9 @@ const osname = platform(); const baseClassNames = getClassName('View'); // @TODO -// 1. Headers -// 1.1. Is clickable? -// 2. Android -// 3. Pull to refresh -// 4. Infinite scroll +// 1. Android +// 2. Pull to refresh +// 3. Infinite scroll export default class View extends Component { constructor (props) { @@ -53,8 +51,6 @@ export default class View extends Component { visiblePanels: [this.state.activePanel, nextProps.activePanel], pageYOffset }); - - console.log(this.state.activePanel, nextProps.activePanel); } } componentDidUpdate () { @@ -67,8 +63,6 @@ export default class View extends Component { animated: true }); - console.log(this.state.pageYOffset, document.querySelector(`#${this.state.visiblePanels[0]}`)); - // Delegate scrollTop from window // @TODO Переделать по-нормальному document.querySelector(`#${this.state.visiblePanels[0]}`).parentNode.parentNode.scrollTop = this.state.pageYOffset; From f6a424295059b56b536cc7e0f9b21d2f62f2787c Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 14 Jun 2017 20:54:12 +0300 Subject: [PATCH 010/143] Update panel transition for iOS --- src/components/BackButton/BackButton.css | 5 ---- src/components/View/View.css | 29 +++++++++++++++--------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/components/BackButton/BackButton.css b/src/components/BackButton/BackButton.css index deed1c6849..2d18fd6604 100644 --- a/src/components/BackButton/BackButton.css +++ b/src/components/BackButton/BackButton.css @@ -1,10 +1,5 @@ .BackButton { vertical-align: top; padding: 0 4px 1px; - } -.BackButton--ios { color: #fff; } -.BackButton--android { - color: #444547; - } \ No newline at end of file diff --git a/src/components/View/View.css b/src/components/View/View.css index 4aaf9eb485..141895bd8d 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -100,6 +100,14 @@ display: none; } + .View--animated .View__panel--prev, + .View--animated .View__panel--next { + position: absolute; + top: 0; + left: 0; + overflow: hidden; + } + /** * Mask */ @@ -328,14 +336,6 @@ content: none; } - .View--ios.View--animated .View__panel--prev, - .View--ios.View--animated .View__panel--next { - position: absolute; - top: 0; - left: 0; - overflow: hidden; - } - /** * Active panel */ @@ -361,6 +361,10 @@ * Header */ .View--android .View__header { + position: absolute; + top: 0; + left: 0; + width: 100%; height: 64px; } @@ -446,14 +450,17 @@ * Panels */ .View--android .View__panels {} - .View--android.View--header .View__panels { - top: 64px; - } + .View--android.View--header .View__panels {} .View--android .View__panel { + padding-top: 64px; background: #fff; } + .View--android .View__panel-in { + background: #fff; + } + /** * Panel transition */ From dc7898dfcfb248bb667a5397ed834b8d2fe38c47 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 14 Jun 2017 21:03:44 +0300 Subject: [PATCH 011/143] Fix extra indent if panel header exists --- src/components/View/View.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/View/View.css b/src/components/View/View.css index 141895bd8d..107a6e852c 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -283,10 +283,13 @@ .View--ios.View--header .View__panels {} .View--ios .View__panel { - padding-top: 64px; background: #efeff4; } + .View--ios.View--header .View__panel { + padding-top: 64px; + } + .View--ios .View__panel-in { position: relative; min-height: 100%; @@ -453,9 +456,11 @@ .View--android.View--header .View__panels {} .View--android .View__panel { - padding-top: 64px; background: #fff; } + .View--android.View--header .View__panel { + padding-top: 64px; + } .View--android .View__panel-in { background: #fff; From 59bb2c981da90c3634d00ea065ee2caba287b7db Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Thu, 15 Jun 2017 16:54:04 +0300 Subject: [PATCH 012/143] Scroll restoration --- src/components/View/View.js | 55 +++++++++++++++++++++++++++---------- 1 file changed, 40 insertions(+), 15 deletions(-) diff --git a/src/components/View/View.js b/src/components/View/View.js index f5307bcf09..a00d807573 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -10,7 +10,6 @@ const osname = platform(); const baseClassNames = getClassName('View'); // @TODO -// 1. Android // 2. Pull to refresh // 3. Infinite scroll @@ -20,7 +19,8 @@ export default class View extends Component { this.state = { visiblePanels: [props.activePanel], children: [props.children], - activePanel: props.activePanel + activePanel: props.activePanel, + scrolls: {} }; } static propTypes = { @@ -38,7 +38,9 @@ export default class View extends Component { }; refsStore = {}; componentWillReceiveProps (nextProps) { - if (this.state.activePanel !== nextProps.activePanel) { + const activePanel = this.state.activePanel; + + if (activePanel !== nextProps.activePanel) { const pageYOffset = window.pageYOffset; // Blur inputs on panel transition @@ -48,37 +50,55 @@ export default class View extends Component { // @TODO Lock overscroll on window this.setState({ - visiblePanels: [this.state.activePanel, nextProps.activePanel], - pageYOffset + visiblePanels: [activePanel, nextProps.activePanel], + scrolls: Object.assign({}, this.state.scrolls, { + [activePanel]: pageYOffset + }) }); } } componentDidUpdate () { if (this.state.visiblePanels.length === 2 && !this.state.animated) { setTimeout(() => { + const scrolls = this.state.scrolls; + const [ prevPanel, nextPanel ] = this.state.visiblePanels; + const firstLayerId = this.props.children.find(panel => { + return panel.props.id === prevPanel || panel.props.id === nextPanel; + }).props.id; + const isBack = firstLayerId === nextPanel; + this.setState({ - prevPanel: this.state.visiblePanels[0], - nextPanel: this.state.visiblePanels[1], + prevPanel: prevPanel, + nextPanel: nextPanel, activePanel: null, - animated: true + animated: true, + isBack: isBack }); // Delegate scrollTop from window - // @TODO Переделать по-нормальному - document.querySelector(`#${this.state.visiblePanels[0]}`).parentNode.parentNode.scrollTop = this.state.pageYOffset; - document.querySelector(`#${this.state.visiblePanels[1]}`).parentNode.parentNode.scrollTop = 0; // @TODO зависит от направления - window.scrollTo(0, 0); + this.pickPanel(prevPanel).scrollTop = scrolls[prevPanel] || 0; + + if (isBack) { + this.pickPanel(nextPanel).scrollTop = this.state.scrolls[nextPanel] || 0; + } }, 100); } } + pickPanel(id) { + return document.querySelector('#' + id).parentNode.parentNode; + } transitionEndHandler = (e) => { if (osname !== ANDROID || e.propertyName === 'visibility') { + const activePanel = this.props.activePanel; + const isBack = this.state.isBack; + this.setState({ prevPanel: null, nextPanel: null, - visiblePanels: [this.props.activePanel], - activePanel: this.props.activePanel, - animated: false + visiblePanels: [activePanel], + activePanel: activePanel, + animated: false, + isBack: undefined }); // reset scrollTop for all panels @@ -89,6 +109,11 @@ export default class View extends Component { panel.scrollTop = 0; } }); + + // Restore scroll on window if next panel placed before previous panel + if (activePanel && isBack) { + window.requestAnimationFrame(() => window.scrollTo(0, this.state.scrolls[activePanel] || 0)); + } } } onHeaderClick = () => { From b431343973819b4b7d5eccffa744ecd5b7bcffe7 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Thu, 15 Jun 2017 20:25:03 +0300 Subject: [PATCH 013/143] Panel transition optimization --- src/components/View/View.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/View/View.js b/src/components/View/View.js index a00d807573..7e1b997934 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -59,14 +59,14 @@ export default class View extends Component { } componentDidUpdate () { if (this.state.visiblePanels.length === 2 && !this.state.animated) { - setTimeout(() => { - const scrolls = this.state.scrolls; - const [ prevPanel, nextPanel ] = this.state.visiblePanels; - const firstLayerId = this.props.children.find(panel => { - return panel.props.id === prevPanel || panel.props.id === nextPanel; - }).props.id; - const isBack = firstLayerId === nextPanel; + const scrolls = this.state.scrolls; + const [ prevPanel, nextPanel ] = this.state.visiblePanels; + const firstLayerId = this.props.children.find(panel => { + return panel.props.id === prevPanel || panel.props.id === nextPanel; + }).props.id; + const isBack = firstLayerId === nextPanel; + setTimeout(() => { this.setState({ prevPanel: prevPanel, nextPanel: nextPanel, @@ -135,7 +135,7 @@ export default class View extends Component { } } getRef = (c) => { - if (c.container && c.props.id) { + if (c && c.container && c.props.id) { let el = c; while (el.container) { @@ -150,11 +150,11 @@ export default class View extends Component { const { prevPanel, nextPanel, activePanel } = this.state; const hasPopout = !!popout; const hasHeader = header !== null; - const panels = [].concat(this.props.children).filter(a => !!a); + const panels = [].concat(this.props.children).filter(panel => this.state.visiblePanels.indexOf(panel.props.id) > -1); const modifiers = { 'View--header': hasHeader, 'View--popout': hasPopout, - 'View--animated': this.state.animated + 'View--animated': this.state.visiblePanels.length === 2 }; return ( @@ -192,8 +192,7 @@ export default class View extends Component { className={classnames('View__panel', { 'View__panel--active': panel.props.id === activePanel, 'View__panel--prev': panel.props.id === prevPanel, - 'View__panel--next': panel.props.id === nextPanel, - 'View__panel--hidden': this.state.visiblePanels.indexOf(panel.props.id) === -1 + 'View__panel--next': panel.props.id === nextPanel })} onTransitionEnd={this.transitionEndHandler} key={panel.key || panel.props.id || `panel-${i}`} From c70a2a2c7ce68746513bf88d43df5d5bf1374303 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Thu, 15 Jun 2017 21:26:36 +0300 Subject: [PATCH 014/143] Refactor async calls --- src/components/View/View.css | 3 +- src/components/View/View.js | 60 ++++++++++++++++++------------------ 2 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/components/View/View.css b/src/components/View/View.css index 107a6e852c..4a0df89401 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -100,8 +100,7 @@ display: none; } - .View--animated .View__panel--prev, - .View--animated .View__panel--next { + .View--animated .View__panel { position: absolute; top: 0; left: 0; diff --git a/src/components/View/View.js b/src/components/View/View.js index 7e1b997934..c40576d597 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -42,6 +42,13 @@ export default class View extends Component { if (activePanel !== nextProps.activePanel) { const pageYOffset = window.pageYOffset; + const firstLayerId = this.props.children.find(panel => { + return panel.props.id === activePanel || panel.props.id === nextProps.activePanel; + }).props.id; + const isBack = firstLayerId === nextProps.activePanel; + const scrolls = Object.assign({}, this.state.scrolls, { + [activePanel]: pageYOffset + }); // Blur inputs on panel transition if (typeof window !== 'undefined' && document.activeElement) { @@ -51,9 +58,14 @@ export default class View extends Component { // @TODO Lock overscroll on window this.setState({ visiblePanels: [activePanel, nextProps.activePanel], - scrolls: Object.assign({}, this.state.scrolls, { - [activePanel]: pageYOffset - }) + scrolls, isBack + }, function () { + // Delegate scrollTop from window + this.pickPanel(activePanel).scrollTop = scrolls[activePanel] || 0; + + if (isBack) { + this.pickPanel(nextProps.activePanel).scrollTop = scrolls[nextProps.activePanel] || 0; + } }); } } @@ -61,30 +73,18 @@ export default class View extends Component { if (this.state.visiblePanels.length === 2 && !this.state.animated) { const scrolls = this.state.scrolls; const [ prevPanel, nextPanel ] = this.state.visiblePanels; - const firstLayerId = this.props.children.find(panel => { - return panel.props.id === prevPanel || panel.props.id === nextPanel; - }).props.id; - const isBack = firstLayerId === nextPanel; - setTimeout(() => { + window.requestAnimationFrame(() => { this.setState({ prevPanel: prevPanel, nextPanel: nextPanel, activePanel: null, - animated: true, - isBack: isBack + animated: true }); - - // Delegate scrollTop from window - this.pickPanel(prevPanel).scrollTop = scrolls[prevPanel] || 0; - - if (isBack) { - this.pickPanel(nextPanel).scrollTop = this.state.scrolls[nextPanel] || 0; - } - }, 100); + }); } } - pickPanel(id) { + pickPanel (id) { return document.querySelector('#' + id).parentNode.parentNode; } transitionEndHandler = (e) => { @@ -99,21 +99,21 @@ export default class View extends Component { activePanel: activePanel, animated: false, isBack: undefined - }); + }, function () { + // reset scrollTop for all panels + const panels = document.querySelectorAll('.View__panel'); - // reset scrollTop for all panels - const panels = document.querySelectorAll('.View__panel'); + Array.prototype.forEach.call(panels, function(panel) { + if (!panel.classList.contains('View__panel--active')) { + panel.scrollTop = 0; + } + }); - Array.prototype.forEach.call(panels, function(panel) { - if (!panel.classList.contains('View__panel--active')) { - panel.scrollTop = 0; + // Restore scroll on window if next panel placed before previous panel + if (activePanel && isBack) { + window.scrollTo(0, this.state.scrolls[activePanel] || 0); } }); - - // Restore scroll on window if next panel placed before previous panel - if (activePanel && isBack) { - window.requestAnimationFrame(() => window.scrollTo(0, this.state.scrolls[activePanel] || 0)); - } } } onHeaderClick = () => { From 1e404c6d7f31ec7d2cc4771a977d923ac93c82a2 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Thu, 15 Jun 2017 21:31:08 +0300 Subject: [PATCH 015/143] Fix view styles --- src/components/View/View.css | 4 ---- src/styles/common.css | 9 --------- 2 files changed, 13 deletions(-) diff --git a/src/components/View/View.css b/src/components/View/View.css index 4a0df89401..4189458be9 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -96,10 +96,6 @@ visibility: hidden; } - .View__panel--hidden { - display: none; - } - .View--animated .View__panel { position: absolute; top: 0; diff --git a/src/styles/common.css b/src/styles/common.css index 1ec00b0005..6dad279e9b 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -1,15 +1,6 @@ html, body, #root { - /* - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; - -webkit-overflow-scrolling: touch; - */ margin: 0; padding: 0; height: 100%; From dce0205fc4a87f89cef4564797d8a23401b55720 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Thu, 15 Jun 2017 21:45:23 +0300 Subject: [PATCH 016/143] Disable overscroll on transition --- src/components/View/View.css | 6 +++--- src/components/View/View.js | 4 ++++ src/styles/common.css | 9 +++++++++ 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/View/View.css b/src/components/View/View.css index 4189458be9..a540ec0562 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -227,17 +227,17 @@ } .View--ios .View__header-item .View__header-left-in { - transform: translate3d(-50%, 0, 0); + transform: translate3d(-60%, 0, 0); } .View--ios .View__header-item--next .View__header-left-in { transform: translate3d(0, 0, 0); } .View--ios .View__header-item--next ~ .View__header-item .View__header-left-in { - transform: translate3d(50%, 0, 0); + transform: translate3d(60%, 0, 0); } .View--ios .View__header-item .View__header-title { - transform: translate3d(-50%, 0, 0); + transform: translate3d(-60%, 0, 0); } .View--ios .View__header-item--next .View__header-title { transform: translate3d(0, 0, 0); diff --git a/src/components/View/View.js b/src/components/View/View.js index c40576d597..224dd87e3d 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -60,6 +60,8 @@ export default class View extends Component { visiblePanels: [activePanel, nextProps.activePanel], scrolls, isBack }, function () { + document.body.classList.add('locked'); + // Delegate scrollTop from window this.pickPanel(activePanel).scrollTop = scrolls[activePanel] || 0; @@ -100,6 +102,8 @@ export default class View extends Component { animated: false, isBack: undefined }, function () { + document.body.classList.remove('locked'); + // reset scrollTop for all panels const panels = document.querySelectorAll('.View__panel'); diff --git a/src/styles/common.css b/src/styles/common.css index 6dad279e9b..451bba1d03 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -15,3 +15,12 @@ body, body { overflow-x: hidden; } + +body.locked { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; +} From 0373c8eda12e1494d62c7a7cd4a1afa3f6584f78 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 16 Jun 2017 12:49:19 +0300 Subject: [PATCH 017/143] Fix styles --- src/components/ScrollView/ScrollView.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/ScrollView/ScrollView.css b/src/components/ScrollView/ScrollView.css index c11fc41f9c..7d539c746d 100644 --- a/src/components/ScrollView/ScrollView.css +++ b/src/components/ScrollView/ScrollView.css @@ -2,14 +2,7 @@ position: relative; width: 100%; min-height: 100%; - /* - height: 100%; - */ overflow-x: hidden; - /* - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - */ } .ScrollView__top { From 7411f399e71ccca07a65ca4d0e08dd82e0d3348c Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 16 Jun 2017 12:58:32 +0300 Subject: [PATCH 018/143] Temporary comment window locking on transition --- src/components/View/View.js | 4 ++-- src/styles/common.css | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/View/View.js b/src/components/View/View.js index 224dd87e3d..1aa4e30c5b 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -60,7 +60,7 @@ export default class View extends Component { visiblePanels: [activePanel, nextProps.activePanel], scrolls, isBack }, function () { - document.body.classList.add('locked'); + // document.body.classList.add('locked'); // Delegate scrollTop from window this.pickPanel(activePanel).scrollTop = scrolls[activePanel] || 0; @@ -102,7 +102,7 @@ export default class View extends Component { animated: false, isBack: undefined }, function () { - document.body.classList.remove('locked'); + // document.body.classList.remove('locked'); // reset scrollTop for all panels const panels = document.querySelectorAll('.View__panel'); diff --git a/src/styles/common.css b/src/styles/common.css index 451bba1d03..2c035dfb22 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -16,6 +16,7 @@ body { overflow-x: hidden; } +/* body.locked { position: fixed; top: 0; @@ -24,3 +25,4 @@ body.locked { left: 0; overflow: hidden; } +*/ \ No newline at end of file From 244dd5403cc7dbe2bed99b3933a91cb03b243ae2 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 16 Jun 2017 13:33:20 +0300 Subject: [PATCH 019/143] Build --- dist/vkui.css | 2 +- dist/vkui.js | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/vkui.css b/dist/vkui.css index fe9f56ad0c..9e8c6ee0e0 100644 --- a/dist/vkui.css +++ b/dist/vkui.css @@ -1 +1 @@ -.View{top:0;right:0;bottom:0;left:0;background:#efeff4;position:absolute;overflow:hidden;word-wrap:break-word}.View--animated{pointer-events:none}.View__header{white-space:nowrap}.View__header-in,.View__header-item{top:0;right:0;left:0;background:#5181b8}.View__header-in{color:#fff;position:fixed;z-index:5}.View__header-item{position:absolute;bottom:0;z-index:1;visibility:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-left,.View__header-right{-ms-flex:0 1 22%;flex:0 1 22%;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:20px}.View__header-right{text-align:right}.View__header-title{-ms-flex:1 1 56%;flex:1 1 56%;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 6px}.View__panel,.View__panels{position:absolute;top:0;right:0;bottom:0;left:0}.View__panel{z-index:1;visibility:hidden}.View__panel--hidden{display:none}.View__mask,.View__popout{position:absolute;top:0;right:0;bottom:0;left:0}.View__mask{background:rgba(0,0,0,.4);animation:animation-full-fade-in .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:7}.View__popout{z-index:8;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.View--ios{font-family:-apple-system,Helvetica Neue,Helvetica,sans-serif}.View--ios .View__header,.View--ios .View__header-in{height:64px}.View--ios .View__header-item{top:20px;height:44px;-ms-flex-pack:center;justify-content:center;padding:0 6px}.View--ios .View__header-title{-ms-flex-preferred-size:56%;flex-basis:56%}.View--ios .View__header-left,.View--ios .View__header-right{width:22%;padding:0 2px}.View--ios .View__header-item--next,.View--ios .View__header-item--prev{visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1),opacity .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-item--prev{opacity:0}.View--ios .View__header-item--next{opacity:1}.View--ios .View__header-item{transform:translate3d(-50%,0,0)}.View--ios .View__header-item--next{transform:translateZ(0)}.View--ios .View__header-item--active~.View__header-item,.View--ios .View__header-item--next~.View__header-item{transform:translate3d(50%,0,0)}.View--ios .View__header-title{font:500 17px/44px -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;text-align:center}.View--ios .View__header-item--active{opacity:1;visibility:visible;transform:translateZ(0)}.View--ios.View--header .View__panels{top:64px}.View--ios .View__panel{background:#efeff4}.View--ios .View__panel--next,.View--ios .View__panel--prev{display:block;visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel{transform:translate3d(-50%,0,0)}.View--ios .View__panel--next{transform:translateZ(0)}.View--ios .View__panel--active~.View__panel,.View--ios .View__panel--next~.View__panel{transform:translate3d(100%,0,0)}.View--ios .View__panel--next:before,.View--ios .View__panel--prev:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#000;content:"";pointer-events:none}.View--ios .View__panel--prev:before{animation:animation-fade-in .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel--next:before{animation:animation-fade-out .6s cubic-bezier(.36,.66,.04,1)}.View--android .View__panel--active:before,.View--ios .View__panel--active:before,.View--ios .View__panel--next~.View__panel--prev:before,.View--ios .View__panel--prev~.View__panel--next:before{content:none}.View--ios .View__panel--active{visibility:visible;transform:translateZ(0)}.View--android{font-family:Roboto,Droid,Open Sans,sans-serif}.View--android .View__header{height:80px}.View--android .View__header-in{height:80px;box-shadow:0 0 4px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.16)}.View--android .View__header-item{top:24px;height:56px;padding:0 10px}.View--android .View__header-left,.View--android .View__header-right{padding:1px 6px 0;font-size:14px;line-height:16px;font-weight:500;text-transform:uppercase;color:#fff;color:rgba(255,255,255,.7)}.View--android .View__header-left:active,.View--android .View__header-right:active{color:#fff;color:rgba(255,255,255,.9)}.View--android .View__header-left{-ms-flex:0 0 auto;flex:0 0 auto;max-width:22%}.View--android .View__header-left:empty{display:none}.View--android .View__header-item--next,.View--android .View__header-item--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__header-item{transform:translateZ(0);opacity:0}.View--android .View__header-item--next{transform:translateZ(0);opacity:1}.View--android .View__header-item--next~.View__header-item{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__header-item--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__header-item--active~.View__header-item{transform:translate3d(0,80px,0)}.View--android .View__header-title{font:500 20px/56px Roboto,Open Sans,sans-serif}.View--android.View--header .View__panels{top:80px}.View--android .View__panel{background:#fff}.View--android .View__panel--next,.View--android .View__panel--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__panel{transform:translateZ(0);opacity:0}.View--android .View__panel--next{transform:translateZ(0);opacity:1}.View--android .View__panel--next~.View__panel{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__panel--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__panel--active~.View__panel{transform:translate3d(0,80px,0)}@keyframes animation-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes animation-fade-out{0%{opacity:.3}to{opacity:0}}@keyframes animation-full-fade-in{0%{opacity:0}to{opacity:1}}.ScrollView{position:relative;width:100%;height:100%;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch}.ScrollView__top{position:absolute;z-index:1}.ScrollView--ios .ScrollView__top{right:0;left:0;height:60px;bottom:100%}.ScrollView--android .ScrollView__top{position:absolute;top:-24px;left:50%;height:40px;width:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3)}.ScrollView__in{transform:translateZ(0)}.Spinner{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.Spinner--ios .Spinner__self{position:relative}.Spinner--android.Spinner--on .Spinner__self{animation:rotator 1.4s linear infinite}.Spinner--android .Spinner__path{transform-origin:center}.Spinner--ios .Spinner__part{width:7.5%;height:27.5%;x:46.25%;y:36.25%}.Spinner--ios.Spinner--on .Spinner__part{animation:fade 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:1}to{opacity:.1}}.Group{padding:15px 0}.Alert--android .Alert__content p,.Alert--ios .Alert__content p,.Group,.Group__title{margin:0}.Group--ios .Group__title{font:13px/18px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#6d6d72;padding:0 15px 7px}.Group__description{font:13px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#6d6d72;padding:7px 15px 0}.Group--android .Group__title{font:500 14px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#5181b8;padding:0 16px 17px}.Entity{position:relative;height:64px;padding:0 0 0 75px;text-align:left}.Entity--small{height:48px;padding:0 0 0 60px}.Entity__aside{position:absolute;top:0;left:0;width:64px;height:64px}.Entity--small .Entity__aside{width:48px;height:48px}.Entity--no-photo .Entity__aside{background:#d4dae1;border-radius:50%}.Entity__photo{width:64px;height:64px;border-radius:50%}.Entity--small .Entity__photo{width:48px;height:48px}.Entity__main{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.Entity__description,.Entity__title{max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:20px;white-space:nowrap}.Entity__title{font-size:15px;font-weight:500;color:#2c2d2e;margin:0 0 3px}.Entity__description{font-size:14px;color:#909499}.Entity--ios{margin:0 15px}.Entity--android{margin:0 16px}.List{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;list-style:none}.List--ios{background:#fff}.List--ios:after,.List--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:"";bottom:100%;background:#dfdfdf}.List--ios:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.List--ios:after,.List--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem{position:relative;margin:0;padding:0;white-space:nowrap;font-size:17px;line-height:22px}.ListItem__in{position:relative;display:-ms-flexbox;display:flex;max-width:100%}.ListItem__icon{position:relative;-ms-flex:0 0 auto;flex:0 0 auto}.Icon>img,.Icon>svg,.ListItem__icon-in>img,.ListItem__icon-in>svg{vertical-align:top}.ListItem__main{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.ListItem__aside,.ListItem__indicator{-ms-flex:0 0 auto;flex:0 0 auto;max-width:75%;color:#8e8e93;text-align:right;text-overflow:ellipsis}.ListItem__indicator{overflow:hidden}.ListItem__aside{padding:0;overflow:visible}.ListItem--ios{font-size:17px;line-height:22px}.ListItem--ios.ListItem--expandable:before{position:absolute;top:50%;right:16px;margin-top:-4px;width:7px;height:7px;border-top:2px solid #c7c7cc;border-right:2px solid #c7c7cc;content:"";transform:rotate(45deg);z-index:1}.ListItem--ios .ListItem__in{padding:0 15px;background:#fff}.ListItem--ios.ListItem--expandable .ListItem__in{padding:0 35px 0 15px}.List--ios.List--icon-indent .ListItem__icon:empty,.ListItem--ios.ListItem--icon-indent .ListItem__icon:empty{padding-left:44px}.ListItem--ios .ListItem__icon:before{position:absolute;bottom:0;left:100%;width:100vw;height:1px;background:#dfdfdf;content:""}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.ListItem--ios .ListItem__icon:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem--ios .ListItem__icon-in{width:29px;height:29px;padding:7px 15px 9px 0}.ListItem--ios .ListItem__main{padding:11px .5em 12px 0}.ListItem--ios .ListItem__aside,.ListItem--ios .ListItem__indicator{padding:11px 0 12px}.ListItem--android{font-size:16px;color:#2e3033}.ListItem--android .ListItem__in{padding:0 16px}.ListItem--android .ListItem__icon-in{width:24px;height:24px;padding:14px 32px 18px 0}.ListItem--android .ListItem__main{padding:16px .5em 17px 0}.ListItem--android .ListItem__aside,.ListItem--android .ListItem__indicator{padding:16px 0 17px}.Tappable--ios.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Button--vk-wide-primary){background:#d9d9d9!important}.Tappable--ios.Tappable--active:after,.Tappable--ios.Tappable--active:before{content:"";position:absolute;right:0;left:0;height:1px;background:#dfdfdf;z-index:2}.Tappable--ios.Tappable--active:before{bottom:100%}.Tappable--ios.Tappable--active:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.Tappable--ios.Tappable--active:before{background:linear-gradient(180deg,#c8c7cc 50%,#d9d9d9 0)}.Tappable--ios.Tappable--active:after{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Tappable--android{position:relative;transition:background-color .15s ease-out}.Tappable--android.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Alert__btn--primary):not(.Button--vk-wide-primary){background:#f0f1f3!important}.Tappable--android .Tappable__waves{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.Tappable--android .Tappable__wave{position:absolute;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;content:"";border-radius:50%;background:rgba(128,128,128,.1);animation:animation-wave .3s cubic-bezier(.4,0,.2,1)}@keyframes animation-wave{0%{transform:scale(1);opacity:1}30%{opacity:1}to{transform:scale(8);opacity:0}}.FormLayout{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;position:relative;background:#fff;list-style:none}.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{position:absolute;right:0;left:0;z-index:1;height:1px;background:#dfdfdf;content:""}.FormLayout--ios.FormLayout:before{bottom:100%}.FormLayout--ios.FormLayout:after{top:100%}.FormLayout__row{display:-ms-flexbox;display:flex;position:relative;margin:0;white-space:nowrap;line-height:22px;max-width:100%}.FormLayout--ios .FormLayout__row{font-size:17px}.FormLayout--android .FormLayout__row{font-size:16px}.FormLayout__separator{position:relative;width:0}.FormLayout--ios .FormLayout__separator:before{position:absolute;bottom:0;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout__row:last-child .FormLayout__label:before,.FormLayout__row:last-child .FormLayout__separator:before{content:none}.FormLayout--ios .FormLayout__separator{left:15px}.FormLayout--android .FormLayout__separator{left:0}.FormLayout__label{position:relative;-ms-flex:0 0 100px;flex:0 0 100px;max-width:100px;vertical-align:top}.FormLayout--ios .FormLayout__label:before{position:absolute;bottom:0;left:15px;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout--android .FormLayout__label{display:none}.FormLayout__label-in{overflow:hidden;text-overflow:ellipsis}.FormLayout--ios .FormLayout__label-in{padding:11px 15px 12px}.FormLayout--android .FormLayout__label-in{padding:16px 15px 18px}.FormLayout__field{-ms-flex:1 0 auto;flex:1 0 auto;padding:0 15px;vertical-align:top}.FormLayout--ios .FormLayout__underline{display:none}.FormLayout--android .FormLayout__underline{position:absolute;bottom:9px;left:16px;right:16px;height:2px;background:linear-gradient(0deg,transparent 50%,#d6d6d6 0);content:""}.FormLayout--android .FormLayout__underline:before{position:absolute;top:0;right:0;bottom:0;left:0;background:#518bcc;content:"";transform:scaleX(0);transition:transform .1s cubic-bezier(.4,0,.2,1)}.FormLayout--android input:focus+.FormLayout__underline:before,.FormLayout--android textarea:focus+.FormLayout__underline:before{transform:scaleX(1);transition:transform .14s cubic-bezier(.4,0,.2,1)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.FormLayout--ios .FormLayout__label:before,.FormLayout--ios .FormLayout__separator:before,.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Icon--verbose{background:#ccc}.Icon--ios{width:29px;height:29px;border-radius:7px;overflow:hidden}.Icon--android{width:24px;height:24px}.Text p{margin:0 0 1em}.Text b,.Text strong{font-weight:700}.Text em,.Text i{font-style:italic}.Text a{text-decoration:none;color:#5181b8;font-weight:500}.Text--left{text-align:left}.Text--center{text-align:center}.Text--right{text-align:right}.Text--ios{font-size:15px;line-height:20px;color:#2e3033;padding:8px 15px}.Text--ios p{margin:0 0 20px}.Text--android{color:#2e3033;font-size:16px;line-height:24px;padding:8px 16px}.Text--android p{margin:0 0 24px}.Div--ios{padding:8px 15px}.Div--android{padding:8px 16px}.Div--shadow{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06)}.Div--border,.Div--shadow{position:relative;background:#fff}.Div--border:after,.Div--border:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Div--border:before{bottom:100%;background:#dfdfdf}.Div--border:after{bottom:0;background:#dfdfdf}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Div--border:after,.Div--border:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Flex{display:-ms-flexbox;display:flex;margin:0 -6px}.Flex__item{margin:0 6px}.BackButton{vertical-align:top;padding:0 24px 0 4px}.BackButton--ios{color:#fff}.BackButton--android{color:#444547}.Button{margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;position:relative;display:block;width:100%;outline:0;border:0;background:#fff;text-align:left}.Button--ios:after,.Button--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Button--ios:before{bottom:100%;background:#dfdfdf}.Button--ios:after{bottom:0;background:#dfdfdf}.Button--ios{font:17px/22px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;padding:11px 15px 12px}.Button--android{font:16px/22px Roboto,Droid,Open Sans,sans-serif;padding:16px 16px 18px}.Button[disabled]{color:#8e8e93;background:#fff}.Button--left{text-align:left}.Button--center{text-align:center}.Button--right{text-align:right}.Button--ios.Button--primary{color:#007aff;font-weight:500}.Button--ios.Button--danger{color:#ff3f34}.Button--android.Button--primary{color:#518bcc}.Button--android.Button--danger{color:#e64646}.Button--vk-wide,.Button--vk-wide-primary{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);background:#fff;font-weight:500}.Button--vk-wide-primary{background:#5181b8;color:#fff}.Button--vk-primary.Tappable--active:not([disabled]),.Button--vk-primary:active:not([disabled]),.Button--vk-rich.Tappable--active:not([disabled]),.Button--vk-rich:active:not([disabled]),.Button--vk-wide-primary.Tappable--active:not([disabled]),.Button--vk-wide-primary:active:not([disabled]){background:#4872a3}.Button+.Button:before,.Button--ios.Button--vk-primary.Tappable--active:after,.Button--ios.Button--vk-primary.Tappable--active:before,.Button--ios.Button--vk-primary:after,.Button--ios.Button--vk-primary:before,.Button--ios.Button--vk-rich.Tappable--active:after,.Button--ios.Button--vk-rich.Tappable--active:before,.Button--ios.Button--vk-rich:after,.Button--ios.Button--vk-rich:before,.Button--ios.Button--vk-secondary.Tappable--active:after,.Button--ios.Button--vk-secondary.Tappable--active:before,.Button--ios.Button--vk-secondary:after,.Button--ios.Button--vk-secondary:before,.Button--ios.Button--vk-tertiary.Tappable--active:after,.Button--ios.Button--vk-tertiary.Tappable--active:before,.Button--ios.Button--vk-tertiary:after,.Button--ios.Button--vk-tertiary:before,.Button--vk-wide-primary.Tappable--active:after,.Button--vk-wide-primary.Tappable--active:before,.Button--vk-wide-primary:after,.Button--vk-wide-primary:before{content:none}.Button--vk-wide-primary[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-rich{display:inline-block}.Button--vk-primary,.Button--vk-secondary,.Button--vk-tertiary{display:inline-block;font-size:14px;line-height:16px;padding:8px 12px;border-radius:2px}.Button--vk-rich{font-size:16px;font-weight:500;line-height:20px;padding:14px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.24);border-radius:2px}.Button--vk-rich[disabled]{box-shadow:0 0 2px rgba(0,0,0,.05),0 2px 2px rgba(0,0,0,.1)}.Button--vk-primary,.Button--vk-rich{color:#fff;background:#5181b8}.Button--vk-primary[disabled],.Button--vk-rich[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-secondary{color:#4774a8;background:rgba(0,57,115,.1)}.Button--vk-secondary.Tappable--active:not([disabled]),.Button--vk-secondary:active:not([disabled]){background:rgba(0,57,115,.2)}.Button--vk-secondary[disabled]{color:rgba(71,116,168,.4);background:rgba(0,57,115,.05)}.Button--vk-tertiary{background:0 0;color:#4774a8}.Button--vk-tertiary.Tappable--active:not([disabled]),.Button--vk-tertiary:active:not([disabled]){background:rgba(0,57,115,.1)}.Button--vk-tertiary[disabled]{color:rgba(71,116,168,.4);background:0 0}.Button--wide{width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Button--ios:after,.Button--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}#root,body,html{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;-webkit-overflow-scrolling:touch;margin:0;padding:0;height:100%;background:#efeff4;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}.Checkbox{display:block;margin:-11px -15px;padding:8px 15px}.Checkbox__self{display:none}.Checkbox__pseudo{position:relative;display:block;-webkit-tap-highlight-color:transparent}.Checkbox__pseudo:before{position:absolute;content:"";transition:transform .1s ease}.Checkbox__self:checked+.Checkbox__pseudo:before{transform:translateX(20px)}.Checkbox--ios .Checkbox__pseudo{width:48px;height:28px;border:1px solid #e6e6e6;background:#fff;border-radius:15px;transition:background-color .1s ease,border-color .1s ease}.Checkbox--ios .Checkbox__self:checked+.Checkbox__pseudo{border-color:#4cd864;background:#4cd864}.Checkbox--ios .Checkbox__self[disabled]+.Checkbox__pseudo{border-color:#ddd;background:#ddd}.Checkbox--ios .Checkbox__pseudo:before{top:0;left:0;width:28px;height:28px;border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Checkbox--android .Checkbox__pseudo{width:34px;height:14px;background:#c6c5c5;border-radius:7px;transition:background-color .1s ease}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo{background:#a8bfdb}.Checkbox--android .Checkbox__self[disabled]+.Checkbox__pseudo{opacity:.5}.Checkbox--android .Checkbox__pseudo:before{top:-3px;left:-3px;width:20px;height:20px;background:#f1f1f1;border-radius:10px;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24)}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo:before,.Radio__self:checked~.Radio__icon:before{background:#5181b8}.File{display:block;position:relative;overflow:hidden;padding:1px 0 0}.File__self{position:absolute;top:0;right:0;bottom:0;left:0;font-size:10em;z-index:1;opacity:0}.Input{position:relative;display:block;margin:0;width:100%;height:22px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;min-width:140px}.Input--left{text-align:left}.Input--center{text-align:center}.Input--right{text-align:right}.Input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1000px #fff}.Input--ios{font-size:17px;padding:11px 0 12px}.Input--android{font-size:16px;padding:16px 0 18px}.Textarea{display:block;margin:0;width:100%;height:66px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;resize:none}.Textarea--ios{font-size:17px;padding:11px 0 12px}.Textarea--android{font-size:16px;padding:16px 0 18px}.Radio{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;margin-right:-.5em;-ms-flex-align:center;align-items:center}.Radio__self{display:none}.Radio__label{-ms-flex:1 1 auto;flex:1 1 auto}.Radio__icon{-ms-flex:0 0 auto;flex:0 0 auto}.Radio--ios{margin:-11px 0 -12px;padding:11px 0 12px}.Radio--ios .Radio__icon{width:13px;height:11px;opacity:0;transition:opacity .14s ease}.Radio--ios .Radio__self:checked~.Radio__icon{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='26' height='21' viewBox='0 0 26 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4 14.471L2.829 8.9.001 11.728l8.485 8.485 2.828-2.828-.086-.086L25.699 2.828 22.871 0z' fill='%23007AFF'/%3E%3C/svg%3E") 0 0/100% no-repeat;opacity:1}.Radio--android{margin:-16px 0 -17px;padding:16px 0 17px;-ms-flex-align:center;align-items:center}.Radio--android .Radio__label{-ms-flex-order:1;order:1;padding:0 0 0 18px}.Radio--android .Radio__icon{-ms-flex-order:0;order:0;position:relative;width:16px;height:16px;border-radius:10px;border:2px solid #c4c8cc;transition:border-color .14s ease}.Radio--android .Radio__icon:before{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;content:"";background:0 0;transition:background-color .14s ease}.Radio__self:checked~.Radio__icon{border-color:#5181b8}.Select,.Select__self{display:block;outline:0}.Select{margin:0;overflow:hidden;min-width:140px}.Select__self{font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:0 0;width:100%}.Select--ios .Select__self{font-size:17px;padding:11px 0 12px}.Select--android .Select__self{font-size:16px;padding:16px 0 18px}.Slider{position:relative;height:28px;margin:2px 14px}.Slider__in{height:100%}.Slider__dragger{position:absolute;top:50%;left:0;width:0;height:0}.Slider__dragger:before{position:absolute;top:0;width:100%;content:"";height:1px;background:#0f7afb}.Slider__thumb{position:absolute;top:-14px;right:-14px;width:28px;height:28px;content:"";transition:transform .1s ease}.Slider--ios{background:linear-gradient(180deg,#b7b7b7 1px,transparent 0) 0 14px repeat-x}.Slider--ios .Slider__thumb{border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Slider--android{background:linear-gradient(180deg,#bfbfbf 2px,transparent 0) 0 14px repeat-x}.Slider--android .Slider__dragger:before{height:2px;background:#5181b8}.Slider--android .Slider__thumb{top:-13px}.Slider--android .Slider__thumb:before{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;content:"";background:#5181b8;border-radius:6px;transition:box-shadow .14s ease,transform .14s ease}.Slider--android.Slider--active .Slider__thumb:before{box-shadow:0 0 0 3px rgba(128,128,128,.2);transform:scale(1.25)}#root,.Alert,body,html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Alert--ios{width:270px;-ms-flex:0 0 auto;flex:0 0 auto;background:#fafafa;border-radius:12px;animation:animation-ios-alert-intro .2s ease}.Alert--ios .Alert__content{position:relative;padding:19px 16px 20px;font:13px/16px -apple-system,Helvetica Neue,Helvetica,sans-serif;text-align:center}.Alert--ios .Alert__content:after{content:"";position:absolute;top:100%;height:1px;right:0;left:0;background:#e0e0e0}.Alert--ios .Alert__content h2{margin:0 0 7px;font:500 17px/22px -apple-system,Helvetica Neue,Helvetica,sans-serif}.Alert__footer{display:-ms-flexbox;display:flex;margin-top:1px}.Alert--ios.Alert--v .Alert__footer{-ms-flex-direction:column;flex-direction:column}.Alert--ios .Alert__btn{position:relative;background:#fafafa;-ms-flex:1 0 auto;flex:1 0 auto;font-size:17px;line-height:44px;color:#007aff;border:0;padding:0;margin:0;height:44px;display:block;outline:0}.Alert--ios .Alert__btn:active{z-index:1}.Alert--ios .Alert__btn:after{content:"";position:absolute;top:0;bottom:0;left:100%;width:1px;height:auto;background:#e0e0e0}.Alert--ios .Alert__btn.Tappable--active:after,.Alert--ios .Alert__btn.Tappable--active:before{content:none}.Alert--ios .Alert__btn--primary{font-weight:500}.Alert--ios.Alert--h .Alert__btn{margin-right:1px}.Alert--ios.Alert--h .Alert__btn:first-child{border-radius:0 0 0 12px}.Alert--ios.Alert--h .Alert__btn:last-child{border-radius:0 0 12px 0;margin:0}.Alert--ios.Alert--h .Alert__btn:first-child:last-child{border-radius:0 0 12px 12px}.Alert--ios.Alert--v .Alert__btn{margin:0 0 1px}.Alert--ios.Alert--v .Alert__btn:after{content:"";position:absolute;top:100%;right:0;left:0;width:100%;height:1px;background:#e0e0e0}.Alert--ios.Alert--v .Alert__btn:last-child{border-radius:0 0 12px 12px;margin:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Alert--ios .Alert__content:after{background:linear-gradient(0deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn:after{background:linear-gradient(270deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn.Tappable--active:after{background:linear-gradient(270deg,#e0e0e0 50%,#d9d9d9 0)}.Alert--ios.Alert--h .Alert__btn:last-child:after{content:none}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before,.Alert--ios.Alert--v .Alert__btn:after{position:absolute;right:0;left:0;height:1px;background:linear-gradient(0deg,transparent 50%,#e0e0e0 0);content:""}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before{bottom:100%;background:linear-gradient(180deg,transparent 50%,#e0e0e0 0);top:auto}.Alert--ios.Alert--v .Alert__btn:after{top:100%}.Alert--ios.Alert--v .Alert__btn:last-child:after{content:none}}.Alert--android{min-width:280px;margin:auto 24px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.22),0 24px 24px rgba(0,0,0,.3);border-radius:2px;animation:animation-android-alert-intro .2s ease}.Alert--android .Alert__content{padding:18px 24px 16px;font-size:16px;line-height:24px;color:#71757a}.Alert--android .Alert__content h2{margin:0 0 8px;font-weight:500;font-size:20px;line-height:28px;color:#2e3033}.Alert--android .Alert__content p+p{margin:24px 0 0}.Alert--android .Alert__footer{padding:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.Alert--android .Alert__btn{background:0 0;border:0;-ms-flex:0 0 auto;flex:0 0 auto;text-transform:uppercase;font-weight:500;font-size:14px;line-height:16px;padding:8px;border-radius:2px;margin:0 0 0 12px;color:#5181b8;outline:0}.Alert--android .Alert__btn--primary{color:#fff;background:#5181b8}.Alert--android .Alert__btn--primary.Tappable--active,.Alert--android .Alert__btn--primary:active{background:#4872a3}@keyframes animation-ios-alert-intro{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes animation-android-alert-intro{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.AlertInput{position:relative;z-index:1}.AlertInput--android{margin:3px -15px 9px}.AlertInput--ios{margin:11px 0 12px}.AlertInput--ios:before{position:absolute;z-index:-1;background:#9f9f9f;width:100%;height:100%;padding:1px 1px 0 0;transform:translate3d(-.5px,-.5px,0);content:""}.AlertInput__self{position:relative;box-sizing:border-box;width:100%;background:#fff;z-index:1;border:0;height:24px;font-size:13px;line-height:24px;padding:0 5px}.AlertInput__self:focus{outline:0}.ScreenSpinner{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex:0 0 auto;flex:0 0 auto}.ScreenSpinner--ios{width:88px;height:88px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:8px} \ No newline at end of file +.View{position:relative;height:100%;width:100%;background:#efeff4;word-wrap:break-word}.View--animated{pointer-events:none;overflow:hidden}.View__header{white-space:nowrap}.View__header-in{position:fixed;top:0;right:0;left:0;color:#fff;z-index:5;background:#5181b8}.View__header-item{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;visibility:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-left,.View__header-right{-ms-flex:0 1 22%;flex:0 1 22%;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:20px}.View__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-icon{-ms-flex:0 0 auto;flex:0 0 auto}.View__header-left-in{-ms-flex:0 1 auto;flex:0 1 auto;text-overflow:ellipsis;overflow:hidden}.View__header-right{text-align:right}.View__header-title{-ms-flex:1 1 56%;flex:1 1 56%;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 6px}.View__panel,.View__panels{height:100%;width:100%}.View__panel{position:relative;box-sizing:border-box;z-index:1;visibility:hidden}.View--animated .View__panel{position:absolute;top:0;left:0;overflow:hidden}.View__mask,.View__popout{position:fixed;top:0;right:0;bottom:0;left:0}.View__mask{background:rgba(0,0,0,.4);animation:animation-full-fade-in .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:7}.View__popout{z-index:8;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.View--ios{font-family:-apple-system,Helvetica Neue,Helvetica,sans-serif}.View--ios .View__header{position:fixed;width:100%;height:64px;z-index:2}.View--ios .View__header-in{height:64px}.View--ios .View__header-item{top:20px;height:44px;-ms-flex-pack:center;justify-content:center;padding:0 6px}.View--ios .View__header-title{-ms-flex-preferred-size:56%;flex-basis:56%}.View--ios .View__header-left,.View--ios .View__header-right{width:22%;padding:0 2px}.View--ios .View__header-item--next,.View--ios .View__header-item--prev{position:absolute;top:20px;left:0;overflow:hidden;visibility:visible;transition:visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-title{font:500 17px/44px -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;text-align:center}.View--ios .View__header-item--next .View__header-icon,.View--ios .View__header-item--next .View__header-left-in,.View--ios .View__header-item--next .View__header-right,.View--ios .View__header-item--next .View__header-title,.View--ios .View__header-item--prev .View__header-icon,.View--ios .View__header-item--prev .View__header-left-in,.View--ios .View__header-item--prev .View__header-right,.View--ios .View__header-item--prev .View__header-title{transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1),opacity .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-icon,.View--ios .View__header-item--prev .View__header-icon,.View--ios .View__header-item--prev .View__header-left-in,.View--ios .View__header-item--prev .View__header-right,.View--ios .View__header-item--prev .View__header-title,.View--ios .View__header-left-in,.View--ios .View__header-right,.View--ios .View__header-title{opacity:0}.View--ios .View__header-item--next .View__header-icon,.View--ios .View__header-item--next .View__header-left-in,.View--ios .View__header-item--next .View__header-right,.View--ios .View__header-item--next .View__header-title{opacity:1}.View--ios .View__header-item .View__header-left-in{transform:translate3d(-60%,0,0)}.View--ios .View__header-item--next .View__header-left-in{transform:translateZ(0)}.View--ios .View__header-item--next~.View__header-item .View__header-left-in{transform:translate3d(60%,0,0)}.View--ios .View__header-item .View__header-title{transform:translate3d(-60%,0,0)}.View--ios .View__header-item--next .View__header-title{transform:translateZ(0)}.View--ios .View__header-item--next~.View__header-item .View__header-title{transform:translate3d(100%,0,0)}.View--ios .View__header-item--active{visibility:visible}.View--ios .View__header-item--active~.View__header-item .View__header-left-in{transform:translate3d(50%,0,0)}.View--ios .View__header-item--active~.View__header-item .View__header-title{transform:translate3d(100%,0,0)}.View--ios .View__header-item--active .View__header-icon,.View--ios .View__header-item--active .View__header-right{opacity:1;visibility:visible}.View--ios .View__header-item--active .View__header-left-in,.View--ios .View__header-item--active .View__header-title{opacity:1;visibility:visible;transform:translateZ(0)}.View--ios .View__panel{background:#efeff4}.View--ios.View--header .View__panel{padding-top:64px}.View--ios .View__panel-in{position:relative;min-height:100%}.View--ios .View__panel--next,.View--ios .View__panel--prev{display:block;visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel{transform:translate3d(-50%,0,0)}.View--ios .View__panel--next{transform:translateZ(0)}.View--ios .View__panel--active~.View__panel,.View--ios .View__panel--next~.View__panel{transform:translate3d(100%,0,0)}.View--ios .View__panel--next>.View__panel-in:before,.View--ios .View__panel--prev>.View__panel-in:before{position:absolute;top:0;right:0;left:0;bottom:0;z-index:10;background:#000;content:"";pointer-events:none}.View--ios .View__panel--prev>.View__panel-in:before{animation:animation-fade-in .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel--next>.View__panel-in:before{animation:animation-fade-out .6s cubic-bezier(.36,.66,.04,1)}.View--android .View__panel--active:before,.View--ios .View__panel--active:before,.View--ios .View__panel--next~.View__panel--prev>.View__panel-in:before,.View--ios .View__panel--prev~.View__panel--next>.View__panel-in:before{content:none}.View--ios .View__panel--active{visibility:visible;transform:translateZ(0)}.View--android{font-family:Roboto,Droid,Open Sans,sans-serif}.View--android .View__header{position:absolute;top:0;left:0;width:100%;height:64px}.View--android .View__header-in{height:64px;box-shadow:0 0 4px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.16)}.View--android .View__header-item{top:0;height:64px;padding:0 10px}.View--android .View__header-left,.View--android .View__header-right{padding:1px 6px 0;font-size:14px;line-height:16px;font-weight:500;text-transform:uppercase;color:#fff;color:rgba(255,255,255,.7)}.View--android .View__header-left:active,.View--android .View__header-right:active{color:#fff;color:rgba(255,255,255,.9)}.View--android .View__header-left{-ms-flex:0 0 auto;flex:0 0 auto;max-width:22%}.View--android .View__header-left:empty{display:none}.View--android .View__header-item--next,.View--android .View__header-item--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__header-item{background:#5181b8;transform:translateZ(0);opacity:0}.View--android .View__header-item--next{transform:translateZ(0);opacity:1}.View--android .View__header-item--next~.View__header-item{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__header-item--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__header-item--active~.View__header-item{transform:translate3d(0,80px,0)}.View--android .View__header-title{font:500 20px/56px Roboto,Open Sans,sans-serif}.View--android .View__panel,.View--android .View__panel-in{background:#fff}.View--android.View--header .View__panel{padding-top:64px}.View--android .View__panel--next,.View--android .View__panel--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__panel{transform:translateZ(0);opacity:0}.View--android .View__panel--next{transform:translateZ(0);opacity:1}.View--android .View__panel--next~.View__panel{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__panel--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__panel--active~.View__panel{transform:translate3d(0,80px,0)}@keyframes animation-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes animation-fade-out{0%{opacity:.3}to{opacity:0}}@keyframes animation-full-fade-in{0%{opacity:0}to{opacity:1}}.ScrollView{position:relative;width:100%;min-height:100%;overflow-x:hidden}.ScrollView__top{position:absolute;z-index:1}.ScrollView--ios .ScrollView__top{right:0;left:0;height:60px;bottom:100%}.ScrollView--android .ScrollView__top{position:absolute;top:-24px;left:50%;height:40px;width:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3)}.ScrollView__in{transform:translateZ(0)}.Spinner{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.Spinner--ios .Spinner__self{position:relative}.Spinner--android.Spinner--on .Spinner__self{animation:rotator 1.4s linear infinite}.Spinner--android .Spinner__path{transform-origin:center}.Spinner--ios .Spinner__part{width:7.5%;height:27.5%;x:46.25%;y:36.25%}.Spinner--ios.Spinner--on .Spinner__part{animation:fade 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:1}to{opacity:.1}}.Group{padding:15px 0}.Alert--android .Alert__content p,.Alert--ios .Alert__content p,.Group,.Group__title{margin:0}.Group--ios .Group__title{font:13px/18px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#6d6d72;padding:0 15px 7px}.Group__description{font:13px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#6d6d72;padding:7px 15px 0}.Group--android .Group__title{font:500 14px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#5181b8;padding:0 16px 17px}.Entity{position:relative;height:64px;padding:0 0 0 75px;text-align:left}.Entity--small{height:48px;padding:0 0 0 60px}.Entity__aside{position:absolute;top:0;left:0;width:64px;height:64px}.Entity--small .Entity__aside{width:48px;height:48px}.Entity--no-photo .Entity__aside{background:#d4dae1;border-radius:50%}.Entity__photo{width:64px;height:64px;border-radius:50%}.Entity--small .Entity__photo{width:48px;height:48px}.Entity__main{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.Entity__description,.Entity__title{max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:20px;white-space:nowrap}.Entity__title{font-size:15px;font-weight:500;color:#2c2d2e;margin:0 0 3px}.Entity__description{font-size:14px;color:#909499}.Entity--ios{margin:0 15px}.Entity--android{margin:0 16px}.List{position:relative;margin:0;padding:0;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.List--ios{background:#fff}.List--ios:after,.List--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:"";bottom:100%;background:#dfdfdf}.List--ios:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.List--ios:after,.List--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem{position:relative;margin:0;padding:0;white-space:nowrap;font-size:17px;line-height:22px}.ListItem__in{position:relative;display:-ms-flexbox;display:flex;max-width:100%}.ListItem__icon{position:relative;-ms-flex:0 0 auto;flex:0 0 auto}.Icon>img,.Icon>svg,.ListItem__icon-in>img,.ListItem__icon-in>svg{vertical-align:top}.ListItem__main{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.ListItem__aside,.ListItem__indicator{-ms-flex:0 0 auto;flex:0 0 auto;max-width:75%;color:#8e8e93;text-align:right;text-overflow:ellipsis}.ListItem__indicator{overflow:hidden}.ListItem__aside{padding:0;overflow:visible}.ListItem--ios{font-size:17px;line-height:22px}.ListItem--ios.ListItem--expandable:before{position:absolute;top:50%;right:16px;margin-top:-4px;width:7px;height:7px;border-top:2px solid #c7c7cc;border-right:2px solid #c7c7cc;content:"";transform:rotate(45deg);z-index:1}.ListItem--ios .ListItem__in{padding:0 15px;background:#fff}.ListItem--ios.ListItem--expandable .ListItem__in{padding:0 35px 0 15px}.List--ios.List--icon-indent .ListItem__icon:empty,.ListItem--ios.ListItem--icon-indent .ListItem__icon:empty{padding-left:44px}.ListItem--ios .ListItem__icon:before{position:absolute;bottom:0;left:100%;width:100vw;height:1px;background:#dfdfdf;content:""}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.ListItem--ios .ListItem__icon:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem--ios .ListItem__icon-in{width:29px;height:29px;padding:7px 15px 9px 0}.ListItem--ios .ListItem__main{padding:11px .5em 12px 0}.ListItem--ios .ListItem__aside,.ListItem--ios .ListItem__indicator{padding:11px 0 12px}.ListItem--android{font-size:16px;color:#2e3033}.ListItem--android .ListItem__in{padding:0 16px}.ListItem--android .ListItem__icon-in{width:24px;height:24px;padding:14px 32px 18px 0}.ListItem--android .ListItem__main{padding:16px .5em 17px 0}.ListItem--android .ListItem__aside,.ListItem--android .ListItem__indicator{padding:16px 0 17px}.Tappable--ios.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Button--vk-wide-primary){background:#d9d9d9!important}.Tappable--ios.Tappable--active:after,.Tappable--ios.Tappable--active:before{content:"";position:absolute;right:0;left:0;height:1px;background:#dfdfdf;z-index:2}.Tappable--ios.Tappable--active:before{bottom:100%}.Tappable--ios.Tappable--active:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.Tappable--ios.Tappable--active:before{background:linear-gradient(180deg,#c8c7cc 50%,#d9d9d9 0)}.Tappable--ios.Tappable--active:after{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Tappable--android{position:relative;transition:background-color .15s ease-out}.Tappable--android.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Alert__btn--primary):not(.Button--vk-wide-primary){background:#f0f1f3!important}.Tappable--android .Tappable__waves{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.Tappable--android .Tappable__wave{position:absolute;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;content:"";border-radius:50%;background:rgba(128,128,128,.1);animation:animation-wave .3s cubic-bezier(.4,0,.2,1)}@keyframes animation-wave{0%{transform:scale(1);opacity:1}30%{opacity:1}to{transform:scale(8);opacity:0}}.FormLayout{width:100%;position:relative;margin:0;padding:0;background:#fff;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{position:absolute;right:0;left:0;z-index:1;height:1px;background:#dfdfdf;content:""}.FormLayout--ios.FormLayout:before{bottom:100%}.FormLayout--ios.FormLayout:after{top:100%}.FormLayout__row{display:-ms-flexbox;display:flex;position:relative;margin:0;white-space:nowrap;line-height:22px;max-width:100%}.FormLayout--ios .FormLayout__row{font-size:17px}.FormLayout--android .FormLayout__row{font-size:16px}.FormLayout__separator{position:relative;width:0}.FormLayout--ios .FormLayout__separator:before{position:absolute;bottom:0;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout__row:last-child .FormLayout__label:before,.FormLayout__row:last-child .FormLayout__separator:before{content:none}.FormLayout--ios .FormLayout__separator{left:15px}.FormLayout--android .FormLayout__separator{left:0}.FormLayout__label{position:relative;-ms-flex:0 0 100px;flex:0 0 100px;max-width:100px;vertical-align:top}.FormLayout--ios .FormLayout__label:before{position:absolute;bottom:0;left:15px;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout--android .FormLayout__label{display:none}.FormLayout__label-in{overflow:hidden;text-overflow:ellipsis}.FormLayout--ios .FormLayout__label-in{padding:11px 15px 12px}.FormLayout--android .FormLayout__label-in{padding:16px 15px 18px}.FormLayout__field{-ms-flex:1 0 auto;flex:1 0 auto;padding:0 15px;vertical-align:top}.FormLayout--ios .FormLayout__underline{display:none}.FormLayout--android .FormLayout__underline{position:absolute;bottom:9px;left:16px;right:16px;height:2px;background:linear-gradient(0deg,transparent 50%,#d6d6d6 0);content:""}.FormLayout--android .FormLayout__underline:before{position:absolute;top:0;right:0;bottom:0;left:0;background:#518bcc;content:"";transform:scaleX(0);transition:transform .1s cubic-bezier(.4,0,.2,1)}.FormLayout--android input:focus+.FormLayout__underline:before,.FormLayout--android textarea:focus+.FormLayout__underline:before{transform:scaleX(1);transition:transform .14s cubic-bezier(.4,0,.2,1)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.FormLayout--ios .FormLayout__label:before,.FormLayout--ios .FormLayout__separator:before,.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Icon--verbose{background:#ccc}.Icon--ios{width:29px;height:29px;border-radius:7px;overflow:hidden}.Icon--android{width:24px;height:24px}.Text p{margin:0 0 1em}.Text b,.Text strong{font-weight:700}.Text em,.Text i{font-style:italic}.Text a{text-decoration:none;color:#5181b8;font-weight:500}.Text--left{text-align:left}.Text--center{text-align:center}.Text--right{text-align:right}.Text--ios{font-size:15px;line-height:20px;color:#2e3033;padding:8px 15px}.Text--ios p{margin:0 0 20px}.Text--android{color:#2e3033;font-size:16px;line-height:24px;padding:8px 16px}.Text--android p{margin:0 0 24px}.Div--ios{padding:8px 15px}.Div--android{padding:8px 16px}.Div--shadow{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06)}.Div--border,.Div--shadow{position:relative;background:#fff}.Div--border:after,.Div--border:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Div--border:before{bottom:100%;background:#dfdfdf}.Div--border:after{bottom:0;background:#dfdfdf}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Div--border:after,.Div--border:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Flex{display:-ms-flexbox;display:flex;margin:0 -6px}.Flex__item{margin:0 6px}.BackButton{vertical-align:top;padding:0 4px 1px;color:#fff}.Button{box-sizing:border-box;position:relative;display:block;margin:0;width:100%;outline:0;border:0;background:#fff;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Button--ios:after,.Button--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Button--ios:before{bottom:100%;background:#dfdfdf}.Button--ios:after{bottom:0;background:#dfdfdf}.Button--ios{font:17px/22px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;padding:11px 15px 12px}.Button--android{font:16px/22px Roboto,Droid,Open Sans,sans-serif;padding:16px 16px 18px}.Button[disabled]{color:#8e8e93;background:#fff}.Button--left{text-align:left}.Button--center{text-align:center}.Button--right{text-align:right}.Button--ios.Button--primary{color:#007aff;font-weight:500}.Button--ios.Button--danger{color:#ff3f34}.Button--android.Button--primary{color:#518bcc}.Button--android.Button--danger{color:#e64646}.Button--vk-wide,.Button--vk-wide-primary{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);background:#fff;font-weight:500}.Button--vk-wide-primary{background:#5181b8;color:#fff}.Button--vk-primary.Tappable--active:not([disabled]),.Button--vk-primary:active:not([disabled]),.Button--vk-rich.Tappable--active:not([disabled]),.Button--vk-rich:active:not([disabled]),.Button--vk-wide-primary.Tappable--active:not([disabled]),.Button--vk-wide-primary:active:not([disabled]){background:#4872a3}.Button+.Button:before,.Button--ios.Button--vk-primary.Tappable--active:after,.Button--ios.Button--vk-primary.Tappable--active:before,.Button--ios.Button--vk-primary:after,.Button--ios.Button--vk-primary:before,.Button--ios.Button--vk-rich.Tappable--active:after,.Button--ios.Button--vk-rich.Tappable--active:before,.Button--ios.Button--vk-rich:after,.Button--ios.Button--vk-rich:before,.Button--ios.Button--vk-secondary.Tappable--active:after,.Button--ios.Button--vk-secondary.Tappable--active:before,.Button--ios.Button--vk-secondary:after,.Button--ios.Button--vk-secondary:before,.Button--ios.Button--vk-tertiary.Tappable--active:after,.Button--ios.Button--vk-tertiary.Tappable--active:before,.Button--ios.Button--vk-tertiary:after,.Button--ios.Button--vk-tertiary:before,.Button--vk-wide-primary.Tappable--active:after,.Button--vk-wide-primary.Tappable--active:before,.Button--vk-wide-primary:after,.Button--vk-wide-primary:before{content:none}.Button--vk-wide-primary[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-rich{display:inline-block}.Button--vk-primary,.Button--vk-secondary,.Button--vk-tertiary{display:inline-block;font-size:14px;line-height:16px;padding:8px 12px;border-radius:2px}.Button--vk-rich{font-size:16px;font-weight:500;line-height:20px;padding:14px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.24);border-radius:2px}.Button--vk-rich[disabled]{box-shadow:0 0 2px rgba(0,0,0,.05),0 2px 2px rgba(0,0,0,.1)}.Button--vk-primary,.Button--vk-rich{color:#fff;background:#5181b8}.Button--vk-primary[disabled],.Button--vk-rich[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-secondary{color:#4774a8;background:rgba(0,57,115,.1)}.Button--vk-secondary.Tappable--active:not([disabled]),.Button--vk-secondary:active:not([disabled]){background:rgba(0,57,115,.2)}.Button--vk-secondary[disabled]{color:rgba(71,116,168,.4);background:rgba(0,57,115,.05)}.Button--vk-tertiary{background:0 0;color:#4774a8}.Button--vk-tertiary.Tappable--active:not([disabled]),.Button--vk-tertiary:active:not([disabled]){background:rgba(0,57,115,.1)}.Button--vk-tertiary[disabled]{color:rgba(71,116,168,.4);background:0 0}.Button--wide{width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Button--ios:after,.Button--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Checkbox{display:block;margin:-11px -15px;padding:8px 15px}.Checkbox__self{display:none}.Checkbox__pseudo{position:relative;display:block;-webkit-tap-highlight-color:transparent}.Checkbox__pseudo:before{position:absolute;content:"";transition:transform .1s ease}.Checkbox__self:checked+.Checkbox__pseudo:before{transform:translateX(20px)}.Checkbox--ios .Checkbox__pseudo{width:48px;height:28px;border:1px solid #e6e6e6;background:#fff;border-radius:15px;transition:background-color .1s ease,border-color .1s ease}.Checkbox--ios .Checkbox__self:checked+.Checkbox__pseudo{border-color:#4cd864;background:#4cd864}.Checkbox--ios .Checkbox__self[disabled]+.Checkbox__pseudo{border-color:#ddd;background:#ddd}.Checkbox--ios .Checkbox__pseudo:before{top:0;left:0;width:28px;height:28px;border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Checkbox--android .Checkbox__pseudo{width:34px;height:14px;background:#c6c5c5;border-radius:7px;transition:background-color .1s ease}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo{background:#a8bfdb}.Checkbox--android .Checkbox__self[disabled]+.Checkbox__pseudo{opacity:.5}.Checkbox--android .Checkbox__pseudo:before{top:-3px;left:-3px;width:20px;height:20px;background:#f1f1f1;border-radius:10px;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24)}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo:before,.Radio__self:checked~.Radio__icon:before{background:#5181b8}.File{display:block;position:relative;overflow:hidden;padding:1px 0 0}.File__self{position:absolute;top:0;right:0;bottom:0;left:0;font-size:10em;z-index:1;opacity:0}.Input{position:relative;display:block;margin:0;width:100%;height:22px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;min-width:140px}.Input--left{text-align:left}.Input--center{text-align:center}.Input--right{text-align:right}.Input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1000px #fff}.Input--ios{font-size:17px;padding:11px 0 12px}.Input--android{font-size:16px;padding:16px 0 18px}.Textarea{display:block;margin:0;width:100%;height:66px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;resize:none}.Textarea--ios{font-size:17px;padding:11px 0 12px}.Textarea--android{font-size:16px;padding:16px 0 18px}.Radio{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;margin-right:-.5em;-ms-flex-align:center;align-items:center}.Radio__self{display:none}.Radio__label{-ms-flex:1 1 auto;flex:1 1 auto}.Radio__icon{-ms-flex:0 0 auto;flex:0 0 auto}.Radio--ios{margin:-11px 0 -12px;padding:11px 0 12px}.Radio--ios .Radio__icon{width:13px;height:11px;opacity:0;transition:opacity .14s ease}.Radio--ios .Radio__self:checked~.Radio__icon{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='26' height='21' viewBox='0 0 26 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4 14.471L2.829 8.9.001 11.728l8.485 8.485 2.828-2.828-.086-.086L25.699 2.828 22.871 0z' fill='%23007AFF'/%3E%3C/svg%3E") 0 0/100% no-repeat;opacity:1}.Radio--android{margin:-16px 0 -17px;padding:16px 0 17px;-ms-flex-align:center;align-items:center}.Radio--android .Radio__label{-ms-flex-order:1;order:1;padding:0 0 0 18px}.Radio--android .Radio__icon{-ms-flex-order:0;order:0;position:relative;width:16px;height:16px;border-radius:10px;border:2px solid #c4c8cc;transition:border-color .14s ease}.Radio--android .Radio__icon:before{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;content:"";background:0 0;transition:background-color .14s ease}.Radio__self:checked~.Radio__icon{border-color:#5181b8}.Select,.Select__self{display:block;outline:0}.Select{margin:0;overflow:hidden;min-width:140px}.Select__self{font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:0 0;width:100%}.Select--ios .Select__self{font-size:17px;padding:11px 0 12px}.Select--android .Select__self{font-size:16px;padding:16px 0 18px}.Slider{position:relative;height:28px;margin:2px 14px}.Slider__in{height:100%}.Slider__dragger{position:absolute;top:50%;left:0;width:0;height:0}.Slider__dragger:before{position:absolute;top:0;width:100%;content:"";height:1px;background:#0f7afb}.Slider__thumb{position:absolute;top:-14px;right:-14px;width:28px;height:28px;content:"";transition:transform .1s ease}.Slider--ios{background:linear-gradient(180deg,#b7b7b7 1px,transparent 0) 0 14px repeat-x}.Slider--ios .Slider__thumb{border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Slider--android{background:linear-gradient(180deg,#bfbfbf 2px,transparent 0) 0 14px repeat-x}.Slider--android .Slider__dragger:before{height:2px;background:#5181b8}.Slider--android .Slider__thumb{top:-13px}.Slider--android .Slider__thumb:before{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;content:"";background:#5181b8;border-radius:6px;transition:box-shadow .14s ease,transform .14s ease}.Slider--android.Slider--active .Slider__thumb:before{box-shadow:0 0 0 3px rgba(128,128,128,.2);transform:scale(1.25)}#root,body,html{margin:0;padding:0;height:100%;background:#efeff4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}body{overflow-x:hidden}.Alert{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Alert--ios{width:270px;-ms-flex:0 0 auto;flex:0 0 auto;background:#fafafa;border-radius:12px;animation:animation-ios-alert-intro .2s ease}.Alert--ios .Alert__content{position:relative;padding:19px 16px 20px;font:13px/16px -apple-system,Helvetica Neue,Helvetica,sans-serif;text-align:center}.Alert--ios .Alert__content:after{content:"";position:absolute;top:100%;height:1px;right:0;left:0;background:#e0e0e0}.Alert--ios .Alert__content h2{margin:0 0 7px;font:500 17px/22px -apple-system,Helvetica Neue,Helvetica,sans-serif}.Alert__footer{display:-ms-flexbox;display:flex;margin-top:1px}.Alert--ios.Alert--v .Alert__footer{-ms-flex-direction:column;flex-direction:column}.Alert--ios .Alert__btn{position:relative;background:#fafafa;-ms-flex:1 0 auto;flex:1 0 auto;font-size:17px;line-height:44px;color:#007aff;border:0;padding:0;margin:0;height:44px;display:block;outline:0}.Alert--ios .Alert__btn:active{z-index:1}.Alert--ios .Alert__btn:after{content:"";position:absolute;top:0;bottom:0;left:100%;width:1px;height:auto;background:#e0e0e0}.Alert--ios .Alert__btn.Tappable--active:after,.Alert--ios .Alert__btn.Tappable--active:before{content:none}.Alert--ios .Alert__btn--primary{font-weight:500}.Alert--ios.Alert--h .Alert__btn{margin-right:1px}.Alert--ios.Alert--h .Alert__btn:first-child{border-radius:0 0 0 12px}.Alert--ios.Alert--h .Alert__btn:last-child{border-radius:0 0 12px 0;margin:0}.Alert--ios.Alert--h .Alert__btn:first-child:last-child{border-radius:0 0 12px 12px}.Alert--ios.Alert--v .Alert__btn{margin:0 0 1px}.Alert--ios.Alert--v .Alert__btn:after{content:"";position:absolute;top:100%;right:0;left:0;width:100%;height:1px;background:#e0e0e0}.Alert--ios.Alert--v .Alert__btn:last-child{border-radius:0 0 12px 12px;margin:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Alert--ios .Alert__content:after{background:linear-gradient(0deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn:after{background:linear-gradient(270deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn.Tappable--active:after{background:linear-gradient(270deg,#e0e0e0 50%,#d9d9d9 0)}.Alert--ios.Alert--h .Alert__btn:last-child:after{content:none}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before,.Alert--ios.Alert--v .Alert__btn:after{position:absolute;right:0;left:0;height:1px;background:linear-gradient(0deg,transparent 50%,#e0e0e0 0);content:""}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before{bottom:100%;background:linear-gradient(180deg,transparent 50%,#e0e0e0 0);top:auto}.Alert--ios.Alert--v .Alert__btn:after{top:100%}.Alert--ios.Alert--v .Alert__btn:last-child:after{content:none}}.Alert--android{min-width:280px;margin:auto 24px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.22),0 24px 24px rgba(0,0,0,.3);border-radius:2px;animation:animation-android-alert-intro .2s ease}.Alert--android .Alert__content{padding:18px 24px 16px;font-size:16px;line-height:24px;color:#71757a}.Alert--android .Alert__content h2{margin:0 0 8px;font-weight:500;font-size:20px;line-height:28px;color:#2e3033}.Alert--android .Alert__content p+p{margin:24px 0 0}.Alert--android .Alert__footer{padding:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.Alert--android .Alert__btn{background:0 0;border:0;-ms-flex:0 0 auto;flex:0 0 auto;text-transform:uppercase;font-weight:500;font-size:14px;line-height:16px;padding:8px;border-radius:2px;margin:0 0 0 12px;color:#5181b8;outline:0}.Alert--android .Alert__btn--primary{color:#fff;background:#5181b8}.Alert--android .Alert__btn--primary.Tappable--active,.Alert--android .Alert__btn--primary:active{background:#4872a3}@keyframes animation-ios-alert-intro{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes animation-android-alert-intro{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.AlertInput{position:relative;z-index:1}.AlertInput--android{margin:3px -15px 9px}.AlertInput--ios{margin:11px 0 12px}.AlertInput--ios:before{position:absolute;z-index:-1;background:#9f9f9f;width:100%;height:100%;padding:1px 1px 0 0;transform:translate3d(-.5px,-.5px,0);content:""}.AlertInput__self{position:relative;box-sizing:border-box;width:100%;background:#fff;z-index:1;border:0;height:24px;font-size:13px;line-height:24px;padding:0 5px;border-radius:0}.AlertInput__self:focus{outline:0}.ScreenSpinner{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex:0 0 auto;flex:0 0 auto}.ScreenSpinner--ios{width:88px;height:88px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:8px} \ No newline at end of file diff --git a/dist/vkui.js b/dist/vkui.js index 3e3fd9e91a..7092ec107d 100644 --- a/dist/vkui.js +++ b/dist/vkui.js @@ -1 +1 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",s===a.c),r(t,e+"--android",s===a.b),t))}var a=n(5),i=n(3);t.a=o;var s=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),s||(s=/android/i.test(i)?o:a),s}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,s=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var c=n(62),u=(n.n(c),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return s();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=w();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,s=n.i(m.b)(e),c=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(s-a),y:Math.round(c-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:w()}),s(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),_(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var s=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,s),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=n(0),c=n.n(s),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var s=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(s),a&&i.props.onEndY&&i.props.onEndY(s),o&&i.props.onEndX&&i.props.onEndX(s)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},s=r,a(i,s)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return c.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(s.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/_,a=o*_;o>=1&&(a=Math.min(_+.2*_*(o-1),2*_));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/_,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?_:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?_:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.prevPanel,o=e.nextPanel;return t===n||t===r||t===o}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),c.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&c.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},c.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),c.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(s.Component);w.defaultProps={children:""},t.a=w},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:s,value:n+Math.round(i*u)*o}}return{position:c,absolutePosition:s,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return c.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},c.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},c.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},c.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(s.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.6.18",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),s=n.n(i),c=n(1),u=(n.n(c),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,s,c){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,s,c],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var s=n(26);n.d(t,"List",function(){return s.a});var c=n(12);n.d(t,"ListItem",function(){return c.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var _=n(27);n.d(t,"Radio",function(){return _.a});var w=n(30);n.d(t,"Select",function(){return w.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return X});var X=n(36).version}])}); \ No newline at end of file +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",c===a.c),r(t,e+"--android",c===a.b),t))}var a=n(5),i=n(3);t.a=o;var c=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),c||(c=/android/i.test(i)?o:a),c}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,c=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var s=n(62),u=(n.n(s),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return c();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=_();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,c=n.i(m.b)(e),s=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(c-a),y:Math.round(s-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:_()}),c(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),w(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var c=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,c),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var c=n(0),s=n.n(c),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var c=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(c),a&&i.props.onEndY&&i.props.onEndY(c),o&&i.props.onEndX&&i.props.onEndX(c)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},c=r,a(i,c)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return s.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(c.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/w,a=o*w;o>=1&&(a=Math.min(w+.2*w*(o-1),2*w));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/w,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.nextPanel;return t===n||t===r}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),s.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&s.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},s.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),s.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(c.Component);_.defaultProps={children:""},t.a=_},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:c,value:n+Math.round(i*u)*o}}return{position:s,absolutePosition:c,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return s.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},s.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},s.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},s.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(c.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n-1}),y={"View--header":h,"View--popout":p,"View--animated":2===this.state.visiblePanels.length};return u.a.createElement("section",{className:n.i(f.a)(m,y),style:r},h&&u.a.createElement("div",{className:"View__header",onClick:this.onHeaderClick},u.a.createElement("div",{className:"View__header-in"},d.map(function(e,t){return u.a.createElement("div",{className:n.i(f.a)("View__header-item",{"View__header-item--active":e.props.id===l,"View__header-item--prev":e.props.id===c,"View__header-item--next":e.props.id===s}),key:e.key||e.props.id||"panel-header-"+t},u.a.createElement("div",{className:"View__header-left"},u.a.createElement("div",{className:"View__header-icon"},e.props.header.icon),u.a.createElement("div",{className:"View__header-left-in"},e.props.header.left)),u.a.createElement("div",{className:"View__header-title"},e.props.header.title),u.a.createElement("div",{className:"View__header-right"},e.props.header.right))}))),u.a.createElement("div",{className:"View__panels"},d.map(function(t,r){return u.a.createElement("div",{className:n.i(f.a)("View__panel",{"View__panel--active":t.props.id===l,"View__panel--prev":t.props.id===c,"View__panel--next":t.props.id===s}),onTransitionEnd:e.transitionEndHandler,key:t.key||t.props.id||"panel-"+r},u.a.createElement("div",{className:"View__panel-in"},u.a.cloneElement(t,{ref:e.getRef,activePanel:l,nextPanel:s})))})),p&&u.a.createElement("div",{className:"View__mask"}),p&&u.a.createElement("div",{className:"View__popout"},o))}}]),t}(s.Component);g.defaultProps={style:{},children:null,popout:void 0,header:null},t.a=g},function(e,t,n){"use strict";function r(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.7.0rc",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),c=n.n(i),s=n(1),u=(n.n(s),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,c,s){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,c,s],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var c=n(26);n.d(t,"List",function(){return c.a});var s=n(12);n.d(t,"ListItem",function(){return s.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var w=n(27);n.d(t,"Radio",function(){return w.a});var _=n(30);n.d(t,"Select",function(){return _.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return A});var A=n(36).version}])}); \ No newline at end of file diff --git a/package.json b/package.json index 6da63ede9a..050a15ed11 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vkui", - "version": "0.6.19", + "version": "0.7.0rc", "private": true, "main": "dist/vkui.js", "devDependencies": { From 27c0d6d5f3b99789c8e96e8bcdf528f59cc9c989 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 16 Jun 2017 13:45:38 +0300 Subject: [PATCH 020/143] Change version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 050a15ed11..844ce33ce1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vkui", - "version": "0.7.0rc", + "version": "0.7.0", "private": true, "main": "dist/vkui.js", "devDependencies": { From f74862b2ab195c948a57c3f9b977b05214b225cf Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 16 Jun 2017 15:04:31 +0300 Subject: [PATCH 021/143] Panel not found warning --- dist/vkui.js | 2 +- src/components/View/View.js | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/dist/vkui.js b/dist/vkui.js index 7092ec107d..8beba2ed70 100644 --- a/dist/vkui.js +++ b/dist/vkui.js @@ -1 +1 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",c===a.c),r(t,e+"--android",c===a.b),t))}var a=n(5),i=n(3);t.a=o;var c=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),c||(c=/android/i.test(i)?o:a),c}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,c=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var s=n(62),u=(n.n(s),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return c();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=_();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,c=n.i(m.b)(e),s=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(c-a),y:Math.round(s-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:_()}),c(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),w(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var c=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,c),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var c=n(0),s=n.n(c),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var c=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(c),a&&i.props.onEndY&&i.props.onEndY(c),o&&i.props.onEndX&&i.props.onEndX(c)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},c=r,a(i,c)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return s.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(c.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/w,a=o*w;o>=1&&(a=Math.min(w+.2*w*(o-1),2*w));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/w,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.nextPanel;return t===n||t===r}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),s.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&s.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},s.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),s.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(c.Component);_.defaultProps={children:""},t.a=_},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:c,value:n+Math.round(i*u)*o}}return{position:s,absolutePosition:c,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return s.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},s.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},s.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},s.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(c.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n-1}),y={"View--header":h,"View--popout":p,"View--animated":2===this.state.visiblePanels.length};return u.a.createElement("section",{className:n.i(f.a)(m,y),style:r},h&&u.a.createElement("div",{className:"View__header",onClick:this.onHeaderClick},u.a.createElement("div",{className:"View__header-in"},d.map(function(e,t){return u.a.createElement("div",{className:n.i(f.a)("View__header-item",{"View__header-item--active":e.props.id===l,"View__header-item--prev":e.props.id===c,"View__header-item--next":e.props.id===s}),key:e.key||e.props.id||"panel-header-"+t},u.a.createElement("div",{className:"View__header-left"},u.a.createElement("div",{className:"View__header-icon"},e.props.header.icon),u.a.createElement("div",{className:"View__header-left-in"},e.props.header.left)),u.a.createElement("div",{className:"View__header-title"},e.props.header.title),u.a.createElement("div",{className:"View__header-right"},e.props.header.right))}))),u.a.createElement("div",{className:"View__panels"},d.map(function(t,r){return u.a.createElement("div",{className:n.i(f.a)("View__panel",{"View__panel--active":t.props.id===l,"View__panel--prev":t.props.id===c,"View__panel--next":t.props.id===s}),onTransitionEnd:e.transitionEndHandler,key:t.key||t.props.id||"panel-"+r},u.a.createElement("div",{className:"View__panel-in"},u.a.cloneElement(t,{ref:e.getRef,activePanel:l,nextPanel:s})))})),p&&u.a.createElement("div",{className:"View__mask"}),p&&u.a.createElement("div",{className:"View__popout"},o))}}]),t}(s.Component);g.defaultProps={style:{},children:null,popout:void 0,header:null},t.a=g},function(e,t,n){"use strict";function r(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.7.0rc",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),c=n.n(i),s=n(1),u=(n.n(s),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,c,s){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,c,s],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var c=n(26);n.d(t,"List",function(){return c.a});var s=n(12);n.d(t,"ListItem",function(){return s.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var w=n(27);n.d(t,"Radio",function(){return w.a});var _=n(30);n.d(t,"Select",function(){return _.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return A});var A=n(36).version}])}); \ No newline at end of file +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",c===a.c),r(t,e+"--android",c===a.b),t))}var a=n(5),i=n(3);t.a=o;var c=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),c||(c=/android/i.test(i)?o:a),c}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,c=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var s=n(62),u=(n.n(s),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return c();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=_();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,c=n.i(m.b)(e),s=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(c-a),y:Math.round(s-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:_()}),c(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),w(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var c=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,c),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var c=n(0),s=n.n(c),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var c=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(c),a&&i.props.onEndY&&i.props.onEndY(c),o&&i.props.onEndX&&i.props.onEndX(c)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},c=r,a(i,c)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return s.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(c.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/w,a=o*w;o>=1&&(a=Math.min(w+.2*w*(o-1),2*w));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/w,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.nextPanel;return t===n||t===r}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),s.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&s.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},s.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),s.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(c.Component);_.defaultProps={children:""},t.a=_},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:c,value:n+Math.round(i*u)*o}}return{position:s,absolutePosition:c,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return s.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},s.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},s.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},s.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(c.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n-1}),y={"View--header":h,"View--popout":p,"View--animated":2===this.state.visiblePanels.length};return u.a.createElement("section",{className:n.i(f.a)(m,y),style:r},h&&u.a.createElement("div",{className:"View__header",onClick:this.onHeaderClick},u.a.createElement("div",{className:"View__header-in"},d.map(function(e,t){return u.a.createElement("div",{className:n.i(f.a)("View__header-item",{"View__header-item--active":e.props.id===l,"View__header-item--prev":e.props.id===c,"View__header-item--next":e.props.id===s}),key:e.key||e.props.id||"panel-header-"+t},u.a.createElement("div",{className:"View__header-left"},u.a.createElement("div",{className:"View__header-icon"},e.props.header.icon),u.a.createElement("div",{className:"View__header-left-in"},e.props.header.left)),u.a.createElement("div",{className:"View__header-title"},e.props.header.title),u.a.createElement("div",{className:"View__header-right"},e.props.header.right))}))),u.a.createElement("div",{className:"View__panels"},d.map(function(t,r){return u.a.createElement("div",{className:n.i(f.a)("View__panel",{"View__panel--active":t.props.id===l,"View__panel--prev":t.props.id===c,"View__panel--next":t.props.id===s}),onTransitionEnd:e.transitionEndHandler,key:t.key||t.props.id||"panel-"+r},u.a.createElement("div",{className:"View__panel-in"},u.a.cloneElement(t,{ref:e.getRef,activePanel:l,nextPanel:s})))})),p&&u.a.createElement("div",{className:"View__mask"}),p&&u.a.createElement("div",{className:"View__popout"},o))}}]),t}(s.Component);g.defaultProps={style:{},children:null,popout:void 0,header:null},t.a=g},function(e,t,n){"use strict";function r(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.7.0",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),c=n.n(i),s=n(1),u=(n.n(s),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,c,s){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,c,s],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var c=n(26);n.d(t,"List",function(){return c.a});var s=n(12);n.d(t,"ListItem",function(){return s.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var w=n(27);n.d(t,"Radio",function(){return w.a});var _=n(30);n.d(t,"Select",function(){return _.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return A});var A=n(36).version}])}); \ No newline at end of file diff --git a/src/components/View/View.js b/src/components/View/View.js index 1aa4e30c5b..c21937de94 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -87,7 +87,13 @@ export default class View extends Component { } } pickPanel (id) { - return document.querySelector('#' + id).parentNode.parentNode; + const elem = document.querySelector('#' + id); + + if (!elem) { + console.warn('Element #' + id + ' not found'); + } + + return elem && elem.parentNode.parentNode; } transitionEndHandler = (e) => { if (osname !== ANDROID || e.propertyName === 'visibility') { From eef295ee25bf844cbf816a9c97c8aff0239e5547 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 16 Jun 2017 15:23:51 +0300 Subject: [PATCH 022/143] Check element exists --- src/components/View/View.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/View/View.js b/src/components/View/View.js index c21937de94..93d2eb6d56 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -63,9 +63,14 @@ export default class View extends Component { // document.body.classList.add('locked'); // Delegate scrollTop from window - this.pickPanel(activePanel).scrollTop = scrolls[activePanel] || 0; + const prevPanelElement = activePanel && this.pickPanel(activePanel); + const nextPanelElement = nextProps.activePanel && this.pickPanel(nextProps.activePanel); - if (isBack) { + if (prevPanelElement) { + prevPanelElement.scrollTop = scrolls[activePanel] || 0; + } + + if (isBack && nextPanelElement) { this.pickPanel(nextProps.activePanel).scrollTop = scrolls[nextProps.activePanel] || 0; } }); @@ -90,7 +95,7 @@ export default class View extends Component { const elem = document.querySelector('#' + id); if (!elem) { - console.warn('Element #' + id + ' not found'); + console.warn(`Element #${id} not found`); } return elem && elem.parentNode.parentNode; From 4bd183453458f4163df1b4830c83669097456a2a Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Fri, 16 Jun 2017 15:24:12 +0300 Subject: [PATCH 023/143] Build --- dist/vkui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/vkui.js b/dist/vkui.js index 8beba2ed70..b6a0231a1f 100644 --- a/dist/vkui.js +++ b/dist/vkui.js @@ -1 +1 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",c===a.c),r(t,e+"--android",c===a.b),t))}var a=n(5),i=n(3);t.a=o;var c=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),c||(c=/android/i.test(i)?o:a),c}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,c=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var s=n(62),u=(n.n(s),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return c();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=_();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,c=n.i(m.b)(e),s=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(c-a),y:Math.round(s-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:_()}),c(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),w(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var c=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,c),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var c=n(0),s=n.n(c),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var c=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(c),a&&i.props.onEndY&&i.props.onEndY(c),o&&i.props.onEndX&&i.props.onEndX(c)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},c=r,a(i,c)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return s.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(c.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/w,a=o*w;o>=1&&(a=Math.min(w+.2*w*(o-1),2*w));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/w,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.nextPanel;return t===n||t===r}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),s.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&s.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},s.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),s.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(c.Component);_.defaultProps={children:""},t.a=_},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:c,value:n+Math.round(i*u)*o}}return{position:s,absolutePosition:c,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return s.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},s.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},s.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},s.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(c.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n-1}),y={"View--header":h,"View--popout":p,"View--animated":2===this.state.visiblePanels.length};return u.a.createElement("section",{className:n.i(f.a)(m,y),style:r},h&&u.a.createElement("div",{className:"View__header",onClick:this.onHeaderClick},u.a.createElement("div",{className:"View__header-in"},d.map(function(e,t){return u.a.createElement("div",{className:n.i(f.a)("View__header-item",{"View__header-item--active":e.props.id===l,"View__header-item--prev":e.props.id===c,"View__header-item--next":e.props.id===s}),key:e.key||e.props.id||"panel-header-"+t},u.a.createElement("div",{className:"View__header-left"},u.a.createElement("div",{className:"View__header-icon"},e.props.header.icon),u.a.createElement("div",{className:"View__header-left-in"},e.props.header.left)),u.a.createElement("div",{className:"View__header-title"},e.props.header.title),u.a.createElement("div",{className:"View__header-right"},e.props.header.right))}))),u.a.createElement("div",{className:"View__panels"},d.map(function(t,r){return u.a.createElement("div",{className:n.i(f.a)("View__panel",{"View__panel--active":t.props.id===l,"View__panel--prev":t.props.id===c,"View__panel--next":t.props.id===s}),onTransitionEnd:e.transitionEndHandler,key:t.key||t.props.id||"panel-"+r},u.a.createElement("div",{className:"View__panel-in"},u.a.cloneElement(t,{ref:e.getRef,activePanel:l,nextPanel:s})))})),p&&u.a.createElement("div",{className:"View__mask"}),p&&u.a.createElement("div",{className:"View__popout"},o))}}]),t}(s.Component);g.defaultProps={style:{},children:null,popout:void 0,header:null},t.a=g},function(e,t,n){"use strict";function r(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.7.0",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),c=n.n(i),s=n(1),u=(n.n(s),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,c,s){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,c,s],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var c=n(26);n.d(t,"List",function(){return c.a});var s=n(12);n.d(t,"ListItem",function(){return s.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var w=n(27);n.d(t,"Radio",function(){return w.a});var _=n(30);n.d(t,"Select",function(){return _.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return A});var A=n(36).version}])}); \ No newline at end of file +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",c===a.c),r(t,e+"--android",c===a.b),t))}var a=n(5),i=n(3);t.a=o;var c=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),c||(c=/android/i.test(i)?o:a),c}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,c=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var s=n(62),u=(n.n(s),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return c();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=_();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,c=n.i(m.b)(e),s=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(c-a),y:Math.round(s-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:_()}),c(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),w(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var c=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,c),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var c=n(0),s=n.n(c),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var c=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(c),a&&i.props.onEndY&&i.props.onEndY(c),o&&i.props.onEndX&&i.props.onEndX(c)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},c=r,a(i,c)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return s.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(c.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/w,a=o*w;o>=1&&(a=Math.min(w+.2*w*(o-1),2*w));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/w,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.nextPanel;return t===n||t===r}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),s.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&s.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},s.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),s.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(c.Component);_.defaultProps={children:""},t.a=_},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:c,value:n+Math.round(i*u)*o}}return{position:s,absolutePosition:c,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return s.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},s.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},s.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},s.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(c.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n-1}),y={"View--header":h,"View--popout":p,"View--animated":2===this.state.visiblePanels.length};return u.a.createElement("section",{className:n.i(f.a)(m,y),style:r},h&&u.a.createElement("div",{className:"View__header",onClick:this.onHeaderClick},u.a.createElement("div",{className:"View__header-in"},d.map(function(e,t){return u.a.createElement("div",{className:n.i(f.a)("View__header-item",{"View__header-item--active":e.props.id===l,"View__header-item--prev":e.props.id===c,"View__header-item--next":e.props.id===s}),key:e.key||e.props.id||"panel-header-"+t},u.a.createElement("div",{className:"View__header-left"},u.a.createElement("div",{className:"View__header-icon"},e.props.header.icon),u.a.createElement("div",{className:"View__header-left-in"},e.props.header.left)),u.a.createElement("div",{className:"View__header-title"},e.props.header.title),u.a.createElement("div",{className:"View__header-right"},e.props.header.right))}))),u.a.createElement("div",{className:"View__panels"},d.map(function(t,r){return u.a.createElement("div",{className:n.i(f.a)("View__panel",{"View__panel--active":t.props.id===l,"View__panel--prev":t.props.id===c,"View__panel--next":t.props.id===s}),onTransitionEnd:e.transitionEndHandler,key:t.key||t.props.id||"panel-"+r},u.a.createElement("div",{className:"View__panel-in"},u.a.cloneElement(t,{ref:e.getRef,activePanel:l,nextPanel:s})))})),p&&u.a.createElement("div",{className:"View__mask"}),p&&u.a.createElement("div",{className:"View__popout"},o))}}]),t}(s.Component);g.defaultProps={style:{},children:null,popout:void 0,header:null},t.a=g},function(e,t,n){"use strict";function r(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.7.0",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),c=n.n(i),s=n(1),u=(n.n(s),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,c,s){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,c,s],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var c=n(26);n.d(t,"List",function(){return c.a});var s=n(12);n.d(t,"ListItem",function(){return s.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var w=n(27);n.d(t,"Radio",function(){return w.a});var _=n(30);n.d(t,"Select",function(){return _.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return A});var A=n(36).version}])}); \ No newline at end of file From 38f490319d7d9084e5f0e859456b1d35f5c577c2 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 21 Jun 2017 15:22:42 +0300 Subject: [PATCH 024/143] Fix pseudoelement for last button in a horizontal layout --- src/components/Alert/Alert.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Alert/Alert.css b/src/components/Alert/Alert.css index b97354d571..89471d44c2 100644 --- a/src/components/Alert/Alert.css +++ b/src/components/Alert/Alert.css @@ -87,7 +87,8 @@ background: #e0e0e0; } .Alert--ios .Alert__btn.Tappable--active::before, - .Alert--ios .Alert__btn.Tappable--active::after { + .Alert--ios .Alert__btn.Tappable--active::after, + .Alert--ios.Alert--h .Alert__btn:last-child:after { content: none; } .Alert--ios .Alert__btn--primary { From 8b8ae713bc687d071a6309e0c1a13d259a03bcc4 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 21 Jun 2017 15:32:15 +0300 Subject: [PATCH 025/143] Transition end callback in View component --- src/components/View/View.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/View/View.js b/src/components/View/View.js index 93d2eb6d56..16322d88ec 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -28,7 +28,8 @@ export default class View extends Component { activePanel: PropTypes.string.isRequired, header: PropTypes.object, children: PropTypes.node, - popout: PropTypes.node + popout: PropTypes.node, + onTransition: PropTypes.func }; static defaultProps = { style: {}, @@ -55,6 +56,7 @@ export default class View extends Component { document.activeElement.blur(); } + // @TODO Lock overscroll on window this.setState({ visiblePanels: [activePanel, nextProps.activePanel], @@ -128,6 +130,10 @@ export default class View extends Component { if (activePanel && isBack) { window.scrollTo(0, this.state.scrolls[activePanel] || 0); } + + if (this.props.onTransition) { + this.props.onTransition(); + } }); } } From dbbb5bfda181ccdccc2494d565eb6cedde339c38 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 21 Jun 2017 15:39:34 +0300 Subject: [PATCH 026/143] Call transitionEnd handler once --- src/components/View/View.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/View/View.js b/src/components/View/View.js index 16322d88ec..b28a5d1353 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -56,7 +56,6 @@ export default class View extends Component { document.activeElement.blur(); } - // @TODO Lock overscroll on window this.setState({ visiblePanels: [activePanel, nextProps.activePanel], @@ -215,7 +214,7 @@ export default class View extends Component { 'View__panel--prev': panel.props.id === prevPanel, 'View__panel--next': panel.props.id === nextPanel })} - onTransitionEnd={this.transitionEndHandler} + onTransitionEnd={panel.props.id === nextPanel ? this.transitionEndHandler : null} key={panel.key || panel.props.id || `panel-${i}`} >
From ebd252796f226e01354e223dbc7f628239868684 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 21 Jun 2017 17:22:50 +0300 Subject: [PATCH 027/143] Links inside group description --- src/components/Group/Group.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Group/Group.css b/src/components/Group/Group.css index 8cc25100b8..ad2ba11c55 100644 --- a/src/components/Group/Group.css +++ b/src/components/Group/Group.css @@ -1,3 +1,5 @@ +@import '../../styles/constants.css'; + .Group { margin: 0; padding: 15px 0 15px; @@ -23,6 +25,11 @@ padding: 7px 15px 0; } + .Group__description a { + text-decoration: none; + color: var(--vk-color); + } + /** * Android */ From cb5321e0d91f2fdd46cafe6a305da8b5d825dcbe Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 21 Jun 2017 17:23:08 +0300 Subject: [PATCH 028/143] Minimal height for buttons --- src/components/Button/Button.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css index 69f5e9719f..31d46fb4a0 100644 --- a/src/components/Button/Button.css +++ b/src/components/Button/Button.css @@ -11,6 +11,7 @@ background: #fff; text-align: left; user-select: none; + min-height: 22px; } .Button--ios::before, .Button--ios::after { @@ -44,7 +45,7 @@ * Disabled */ .Button[disabled] { - color: #8E8E93; + color: #8e8e93; background: #fff; } @@ -124,6 +125,7 @@ display: inline-block; font-size: 14px; line-height: 16px; + min-height: 16px; padding: 8px 12px; border-radius: 2px; } @@ -153,6 +155,7 @@ font-size: 16px; font-weight: 500; line-height: 20px; + min-height: 20px; padding: 14px; background: #5181B8; box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .24); From b666877320d45984ac582c340507dada9e1a207b Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 21 Jun 2017 22:31:19 +0300 Subject: [PATCH 029/143] Blur inputs when popup shown --- src/components/View/View.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/View/View.js b/src/components/View/View.js index b28a5d1353..d9f45d14bc 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -52,9 +52,7 @@ export default class View extends Component { }); // Blur inputs on panel transition - if (typeof window !== 'undefined' && document.activeElement) { - document.activeElement.blur(); - } + this.blurActiveElement(); // @TODO Lock overscroll on window this.setState({ @@ -76,6 +74,15 @@ export default class View extends Component { } }); } + + if (!!nextProps.popout && !this.props.popout) { + this.blurActiveElement(); + } + } + blurActiveElement() { + if (typeof window !== 'undefined' && document.activeElement) { + document.activeElement.blur(); + } } componentDidUpdate () { if (this.state.visiblePanels.length === 2 && !this.state.animated) { From e75a456d20310496e4926e4ec418f0b7d74a426b Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Wed, 21 Jun 2017 22:33:29 +0300 Subject: [PATCH 030/143] Build --- dist/vkui.css | 2 +- dist/vkui.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/vkui.css b/dist/vkui.css index 9e8c6ee0e0..80dc4fec8d 100644 --- a/dist/vkui.css +++ b/dist/vkui.css @@ -1 +1 @@ -.View{position:relative;height:100%;width:100%;background:#efeff4;word-wrap:break-word}.View--animated{pointer-events:none;overflow:hidden}.View__header{white-space:nowrap}.View__header-in{position:fixed;top:0;right:0;left:0;color:#fff;z-index:5;background:#5181b8}.View__header-item{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;visibility:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-left,.View__header-right{-ms-flex:0 1 22%;flex:0 1 22%;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:20px}.View__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-icon{-ms-flex:0 0 auto;flex:0 0 auto}.View__header-left-in{-ms-flex:0 1 auto;flex:0 1 auto;text-overflow:ellipsis;overflow:hidden}.View__header-right{text-align:right}.View__header-title{-ms-flex:1 1 56%;flex:1 1 56%;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 6px}.View__panel,.View__panels{height:100%;width:100%}.View__panel{position:relative;box-sizing:border-box;z-index:1;visibility:hidden}.View--animated .View__panel{position:absolute;top:0;left:0;overflow:hidden}.View__mask,.View__popout{position:fixed;top:0;right:0;bottom:0;left:0}.View__mask{background:rgba(0,0,0,.4);animation:animation-full-fade-in .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:7}.View__popout{z-index:8;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.View--ios{font-family:-apple-system,Helvetica Neue,Helvetica,sans-serif}.View--ios .View__header{position:fixed;width:100%;height:64px;z-index:2}.View--ios .View__header-in{height:64px}.View--ios .View__header-item{top:20px;height:44px;-ms-flex-pack:center;justify-content:center;padding:0 6px}.View--ios .View__header-title{-ms-flex-preferred-size:56%;flex-basis:56%}.View--ios .View__header-left,.View--ios .View__header-right{width:22%;padding:0 2px}.View--ios .View__header-item--next,.View--ios .View__header-item--prev{position:absolute;top:20px;left:0;overflow:hidden;visibility:visible;transition:visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-title{font:500 17px/44px -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;text-align:center}.View--ios .View__header-item--next .View__header-icon,.View--ios .View__header-item--next .View__header-left-in,.View--ios .View__header-item--next .View__header-right,.View--ios .View__header-item--next .View__header-title,.View--ios .View__header-item--prev .View__header-icon,.View--ios .View__header-item--prev .View__header-left-in,.View--ios .View__header-item--prev .View__header-right,.View--ios .View__header-item--prev .View__header-title{transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1),opacity .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-icon,.View--ios .View__header-item--prev .View__header-icon,.View--ios .View__header-item--prev .View__header-left-in,.View--ios .View__header-item--prev .View__header-right,.View--ios .View__header-item--prev .View__header-title,.View--ios .View__header-left-in,.View--ios .View__header-right,.View--ios .View__header-title{opacity:0}.View--ios .View__header-item--next .View__header-icon,.View--ios .View__header-item--next .View__header-left-in,.View--ios .View__header-item--next .View__header-right,.View--ios .View__header-item--next .View__header-title{opacity:1}.View--ios .View__header-item .View__header-left-in{transform:translate3d(-60%,0,0)}.View--ios .View__header-item--next .View__header-left-in{transform:translateZ(0)}.View--ios .View__header-item--next~.View__header-item .View__header-left-in{transform:translate3d(60%,0,0)}.View--ios .View__header-item .View__header-title{transform:translate3d(-60%,0,0)}.View--ios .View__header-item--next .View__header-title{transform:translateZ(0)}.View--ios .View__header-item--next~.View__header-item .View__header-title{transform:translate3d(100%,0,0)}.View--ios .View__header-item--active{visibility:visible}.View--ios .View__header-item--active~.View__header-item .View__header-left-in{transform:translate3d(50%,0,0)}.View--ios .View__header-item--active~.View__header-item .View__header-title{transform:translate3d(100%,0,0)}.View--ios .View__header-item--active .View__header-icon,.View--ios .View__header-item--active .View__header-right{opacity:1;visibility:visible}.View--ios .View__header-item--active .View__header-left-in,.View--ios .View__header-item--active .View__header-title{opacity:1;visibility:visible;transform:translateZ(0)}.View--ios .View__panel{background:#efeff4}.View--ios.View--header .View__panel{padding-top:64px}.View--ios .View__panel-in{position:relative;min-height:100%}.View--ios .View__panel--next,.View--ios .View__panel--prev{display:block;visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel{transform:translate3d(-50%,0,0)}.View--ios .View__panel--next{transform:translateZ(0)}.View--ios .View__panel--active~.View__panel,.View--ios .View__panel--next~.View__panel{transform:translate3d(100%,0,0)}.View--ios .View__panel--next>.View__panel-in:before,.View--ios .View__panel--prev>.View__panel-in:before{position:absolute;top:0;right:0;left:0;bottom:0;z-index:10;background:#000;content:"";pointer-events:none}.View--ios .View__panel--prev>.View__panel-in:before{animation:animation-fade-in .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel--next>.View__panel-in:before{animation:animation-fade-out .6s cubic-bezier(.36,.66,.04,1)}.View--android .View__panel--active:before,.View--ios .View__panel--active:before,.View--ios .View__panel--next~.View__panel--prev>.View__panel-in:before,.View--ios .View__panel--prev~.View__panel--next>.View__panel-in:before{content:none}.View--ios .View__panel--active{visibility:visible;transform:translateZ(0)}.View--android{font-family:Roboto,Droid,Open Sans,sans-serif}.View--android .View__header{position:absolute;top:0;left:0;width:100%;height:64px}.View--android .View__header-in{height:64px;box-shadow:0 0 4px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.16)}.View--android .View__header-item{top:0;height:64px;padding:0 10px}.View--android .View__header-left,.View--android .View__header-right{padding:1px 6px 0;font-size:14px;line-height:16px;font-weight:500;text-transform:uppercase;color:#fff;color:rgba(255,255,255,.7)}.View--android .View__header-left:active,.View--android .View__header-right:active{color:#fff;color:rgba(255,255,255,.9)}.View--android .View__header-left{-ms-flex:0 0 auto;flex:0 0 auto;max-width:22%}.View--android .View__header-left:empty{display:none}.View--android .View__header-item--next,.View--android .View__header-item--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__header-item{background:#5181b8;transform:translateZ(0);opacity:0}.View--android .View__header-item--next{transform:translateZ(0);opacity:1}.View--android .View__header-item--next~.View__header-item{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__header-item--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__header-item--active~.View__header-item{transform:translate3d(0,80px,0)}.View--android .View__header-title{font:500 20px/56px Roboto,Open Sans,sans-serif}.View--android .View__panel,.View--android .View__panel-in{background:#fff}.View--android.View--header .View__panel{padding-top:64px}.View--android .View__panel--next,.View--android .View__panel--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__panel{transform:translateZ(0);opacity:0}.View--android .View__panel--next{transform:translateZ(0);opacity:1}.View--android .View__panel--next~.View__panel{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__panel--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__panel--active~.View__panel{transform:translate3d(0,80px,0)}@keyframes animation-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes animation-fade-out{0%{opacity:.3}to{opacity:0}}@keyframes animation-full-fade-in{0%{opacity:0}to{opacity:1}}.ScrollView{position:relative;width:100%;min-height:100%;overflow-x:hidden}.ScrollView__top{position:absolute;z-index:1}.ScrollView--ios .ScrollView__top{right:0;left:0;height:60px;bottom:100%}.ScrollView--android .ScrollView__top{position:absolute;top:-24px;left:50%;height:40px;width:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3)}.ScrollView__in{transform:translateZ(0)}.Spinner{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.Spinner--ios .Spinner__self{position:relative}.Spinner--android.Spinner--on .Spinner__self{animation:rotator 1.4s linear infinite}.Spinner--android .Spinner__path{transform-origin:center}.Spinner--ios .Spinner__part{width:7.5%;height:27.5%;x:46.25%;y:36.25%}.Spinner--ios.Spinner--on .Spinner__part{animation:fade 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:1}to{opacity:.1}}.Group{padding:15px 0}.Alert--android .Alert__content p,.Alert--ios .Alert__content p,.Group,.Group__title{margin:0}.Group--ios .Group__title{font:13px/18px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#6d6d72;padding:0 15px 7px}.Group__description{font:13px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#6d6d72;padding:7px 15px 0}.Group--android .Group__title{font:500 14px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#5181b8;padding:0 16px 17px}.Entity{position:relative;height:64px;padding:0 0 0 75px;text-align:left}.Entity--small{height:48px;padding:0 0 0 60px}.Entity__aside{position:absolute;top:0;left:0;width:64px;height:64px}.Entity--small .Entity__aside{width:48px;height:48px}.Entity--no-photo .Entity__aside{background:#d4dae1;border-radius:50%}.Entity__photo{width:64px;height:64px;border-radius:50%}.Entity--small .Entity__photo{width:48px;height:48px}.Entity__main{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.Entity__description,.Entity__title{max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:20px;white-space:nowrap}.Entity__title{font-size:15px;font-weight:500;color:#2c2d2e;margin:0 0 3px}.Entity__description{font-size:14px;color:#909499}.Entity--ios{margin:0 15px}.Entity--android{margin:0 16px}.List{position:relative;margin:0;padding:0;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.List--ios{background:#fff}.List--ios:after,.List--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:"";bottom:100%;background:#dfdfdf}.List--ios:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.List--ios:after,.List--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem{position:relative;margin:0;padding:0;white-space:nowrap;font-size:17px;line-height:22px}.ListItem__in{position:relative;display:-ms-flexbox;display:flex;max-width:100%}.ListItem__icon{position:relative;-ms-flex:0 0 auto;flex:0 0 auto}.Icon>img,.Icon>svg,.ListItem__icon-in>img,.ListItem__icon-in>svg{vertical-align:top}.ListItem__main{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.ListItem__aside,.ListItem__indicator{-ms-flex:0 0 auto;flex:0 0 auto;max-width:75%;color:#8e8e93;text-align:right;text-overflow:ellipsis}.ListItem__indicator{overflow:hidden}.ListItem__aside{padding:0;overflow:visible}.ListItem--ios{font-size:17px;line-height:22px}.ListItem--ios.ListItem--expandable:before{position:absolute;top:50%;right:16px;margin-top:-4px;width:7px;height:7px;border-top:2px solid #c7c7cc;border-right:2px solid #c7c7cc;content:"";transform:rotate(45deg);z-index:1}.ListItem--ios .ListItem__in{padding:0 15px;background:#fff}.ListItem--ios.ListItem--expandable .ListItem__in{padding:0 35px 0 15px}.List--ios.List--icon-indent .ListItem__icon:empty,.ListItem--ios.ListItem--icon-indent .ListItem__icon:empty{padding-left:44px}.ListItem--ios .ListItem__icon:before{position:absolute;bottom:0;left:100%;width:100vw;height:1px;background:#dfdfdf;content:""}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.ListItem--ios .ListItem__icon:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem--ios .ListItem__icon-in{width:29px;height:29px;padding:7px 15px 9px 0}.ListItem--ios .ListItem__main{padding:11px .5em 12px 0}.ListItem--ios .ListItem__aside,.ListItem--ios .ListItem__indicator{padding:11px 0 12px}.ListItem--android{font-size:16px;color:#2e3033}.ListItem--android .ListItem__in{padding:0 16px}.ListItem--android .ListItem__icon-in{width:24px;height:24px;padding:14px 32px 18px 0}.ListItem--android .ListItem__main{padding:16px .5em 17px 0}.ListItem--android .ListItem__aside,.ListItem--android .ListItem__indicator{padding:16px 0 17px}.Tappable--ios.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Button--vk-wide-primary){background:#d9d9d9!important}.Tappable--ios.Tappable--active:after,.Tappable--ios.Tappable--active:before{content:"";position:absolute;right:0;left:0;height:1px;background:#dfdfdf;z-index:2}.Tappable--ios.Tappable--active:before{bottom:100%}.Tappable--ios.Tappable--active:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.Tappable--ios.Tappable--active:before{background:linear-gradient(180deg,#c8c7cc 50%,#d9d9d9 0)}.Tappable--ios.Tappable--active:after{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Tappable--android{position:relative;transition:background-color .15s ease-out}.Tappable--android.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Alert__btn--primary):not(.Button--vk-wide-primary){background:#f0f1f3!important}.Tappable--android .Tappable__waves{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.Tappable--android .Tappable__wave{position:absolute;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;content:"";border-radius:50%;background:rgba(128,128,128,.1);animation:animation-wave .3s cubic-bezier(.4,0,.2,1)}@keyframes animation-wave{0%{transform:scale(1);opacity:1}30%{opacity:1}to{transform:scale(8);opacity:0}}.FormLayout{width:100%;position:relative;margin:0;padding:0;background:#fff;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{position:absolute;right:0;left:0;z-index:1;height:1px;background:#dfdfdf;content:""}.FormLayout--ios.FormLayout:before{bottom:100%}.FormLayout--ios.FormLayout:after{top:100%}.FormLayout__row{display:-ms-flexbox;display:flex;position:relative;margin:0;white-space:nowrap;line-height:22px;max-width:100%}.FormLayout--ios .FormLayout__row{font-size:17px}.FormLayout--android .FormLayout__row{font-size:16px}.FormLayout__separator{position:relative;width:0}.FormLayout--ios .FormLayout__separator:before{position:absolute;bottom:0;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout__row:last-child .FormLayout__label:before,.FormLayout__row:last-child .FormLayout__separator:before{content:none}.FormLayout--ios .FormLayout__separator{left:15px}.FormLayout--android .FormLayout__separator{left:0}.FormLayout__label{position:relative;-ms-flex:0 0 100px;flex:0 0 100px;max-width:100px;vertical-align:top}.FormLayout--ios .FormLayout__label:before{position:absolute;bottom:0;left:15px;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout--android .FormLayout__label{display:none}.FormLayout__label-in{overflow:hidden;text-overflow:ellipsis}.FormLayout--ios .FormLayout__label-in{padding:11px 15px 12px}.FormLayout--android .FormLayout__label-in{padding:16px 15px 18px}.FormLayout__field{-ms-flex:1 0 auto;flex:1 0 auto;padding:0 15px;vertical-align:top}.FormLayout--ios .FormLayout__underline{display:none}.FormLayout--android .FormLayout__underline{position:absolute;bottom:9px;left:16px;right:16px;height:2px;background:linear-gradient(0deg,transparent 50%,#d6d6d6 0);content:""}.FormLayout--android .FormLayout__underline:before{position:absolute;top:0;right:0;bottom:0;left:0;background:#518bcc;content:"";transform:scaleX(0);transition:transform .1s cubic-bezier(.4,0,.2,1)}.FormLayout--android input:focus+.FormLayout__underline:before,.FormLayout--android textarea:focus+.FormLayout__underline:before{transform:scaleX(1);transition:transform .14s cubic-bezier(.4,0,.2,1)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.FormLayout--ios .FormLayout__label:before,.FormLayout--ios .FormLayout__separator:before,.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Icon--verbose{background:#ccc}.Icon--ios{width:29px;height:29px;border-radius:7px;overflow:hidden}.Icon--android{width:24px;height:24px}.Text p{margin:0 0 1em}.Text b,.Text strong{font-weight:700}.Text em,.Text i{font-style:italic}.Text a{text-decoration:none;color:#5181b8;font-weight:500}.Text--left{text-align:left}.Text--center{text-align:center}.Text--right{text-align:right}.Text--ios{font-size:15px;line-height:20px;color:#2e3033;padding:8px 15px}.Text--ios p{margin:0 0 20px}.Text--android{color:#2e3033;font-size:16px;line-height:24px;padding:8px 16px}.Text--android p{margin:0 0 24px}.Div--ios{padding:8px 15px}.Div--android{padding:8px 16px}.Div--shadow{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06)}.Div--border,.Div--shadow{position:relative;background:#fff}.Div--border:after,.Div--border:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Div--border:before{bottom:100%;background:#dfdfdf}.Div--border:after{bottom:0;background:#dfdfdf}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Div--border:after,.Div--border:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Flex{display:-ms-flexbox;display:flex;margin:0 -6px}.Flex__item{margin:0 6px}.BackButton{vertical-align:top;padding:0 4px 1px;color:#fff}.Button{box-sizing:border-box;position:relative;display:block;margin:0;width:100%;outline:0;border:0;background:#fff;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Button--ios:after,.Button--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Button--ios:before{bottom:100%;background:#dfdfdf}.Button--ios:after{bottom:0;background:#dfdfdf}.Button--ios{font:17px/22px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;padding:11px 15px 12px}.Button--android{font:16px/22px Roboto,Droid,Open Sans,sans-serif;padding:16px 16px 18px}.Button[disabled]{color:#8e8e93;background:#fff}.Button--left{text-align:left}.Button--center{text-align:center}.Button--right{text-align:right}.Button--ios.Button--primary{color:#007aff;font-weight:500}.Button--ios.Button--danger{color:#ff3f34}.Button--android.Button--primary{color:#518bcc}.Button--android.Button--danger{color:#e64646}.Button--vk-wide,.Button--vk-wide-primary{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);background:#fff;font-weight:500}.Button--vk-wide-primary{background:#5181b8;color:#fff}.Button--vk-primary.Tappable--active:not([disabled]),.Button--vk-primary:active:not([disabled]),.Button--vk-rich.Tappable--active:not([disabled]),.Button--vk-rich:active:not([disabled]),.Button--vk-wide-primary.Tappable--active:not([disabled]),.Button--vk-wide-primary:active:not([disabled]){background:#4872a3}.Button+.Button:before,.Button--ios.Button--vk-primary.Tappable--active:after,.Button--ios.Button--vk-primary.Tappable--active:before,.Button--ios.Button--vk-primary:after,.Button--ios.Button--vk-primary:before,.Button--ios.Button--vk-rich.Tappable--active:after,.Button--ios.Button--vk-rich.Tappable--active:before,.Button--ios.Button--vk-rich:after,.Button--ios.Button--vk-rich:before,.Button--ios.Button--vk-secondary.Tappable--active:after,.Button--ios.Button--vk-secondary.Tappable--active:before,.Button--ios.Button--vk-secondary:after,.Button--ios.Button--vk-secondary:before,.Button--ios.Button--vk-tertiary.Tappable--active:after,.Button--ios.Button--vk-tertiary.Tappable--active:before,.Button--ios.Button--vk-tertiary:after,.Button--ios.Button--vk-tertiary:before,.Button--vk-wide-primary.Tappable--active:after,.Button--vk-wide-primary.Tappable--active:before,.Button--vk-wide-primary:after,.Button--vk-wide-primary:before{content:none}.Button--vk-wide-primary[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-rich{display:inline-block}.Button--vk-primary,.Button--vk-secondary,.Button--vk-tertiary{display:inline-block;font-size:14px;line-height:16px;padding:8px 12px;border-radius:2px}.Button--vk-rich{font-size:16px;font-weight:500;line-height:20px;padding:14px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.24);border-radius:2px}.Button--vk-rich[disabled]{box-shadow:0 0 2px rgba(0,0,0,.05),0 2px 2px rgba(0,0,0,.1)}.Button--vk-primary,.Button--vk-rich{color:#fff;background:#5181b8}.Button--vk-primary[disabled],.Button--vk-rich[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-secondary{color:#4774a8;background:rgba(0,57,115,.1)}.Button--vk-secondary.Tappable--active:not([disabled]),.Button--vk-secondary:active:not([disabled]){background:rgba(0,57,115,.2)}.Button--vk-secondary[disabled]{color:rgba(71,116,168,.4);background:rgba(0,57,115,.05)}.Button--vk-tertiary{background:0 0;color:#4774a8}.Button--vk-tertiary.Tappable--active:not([disabled]),.Button--vk-tertiary:active:not([disabled]){background:rgba(0,57,115,.1)}.Button--vk-tertiary[disabled]{color:rgba(71,116,168,.4);background:0 0}.Button--wide{width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Button--ios:after,.Button--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Checkbox{display:block;margin:-11px -15px;padding:8px 15px}.Checkbox__self{display:none}.Checkbox__pseudo{position:relative;display:block;-webkit-tap-highlight-color:transparent}.Checkbox__pseudo:before{position:absolute;content:"";transition:transform .1s ease}.Checkbox__self:checked+.Checkbox__pseudo:before{transform:translateX(20px)}.Checkbox--ios .Checkbox__pseudo{width:48px;height:28px;border:1px solid #e6e6e6;background:#fff;border-radius:15px;transition:background-color .1s ease,border-color .1s ease}.Checkbox--ios .Checkbox__self:checked+.Checkbox__pseudo{border-color:#4cd864;background:#4cd864}.Checkbox--ios .Checkbox__self[disabled]+.Checkbox__pseudo{border-color:#ddd;background:#ddd}.Checkbox--ios .Checkbox__pseudo:before{top:0;left:0;width:28px;height:28px;border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Checkbox--android .Checkbox__pseudo{width:34px;height:14px;background:#c6c5c5;border-radius:7px;transition:background-color .1s ease}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo{background:#a8bfdb}.Checkbox--android .Checkbox__self[disabled]+.Checkbox__pseudo{opacity:.5}.Checkbox--android .Checkbox__pseudo:before{top:-3px;left:-3px;width:20px;height:20px;background:#f1f1f1;border-radius:10px;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24)}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo:before,.Radio__self:checked~.Radio__icon:before{background:#5181b8}.File{display:block;position:relative;overflow:hidden;padding:1px 0 0}.File__self{position:absolute;top:0;right:0;bottom:0;left:0;font-size:10em;z-index:1;opacity:0}.Input{position:relative;display:block;margin:0;width:100%;height:22px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;min-width:140px}.Input--left{text-align:left}.Input--center{text-align:center}.Input--right{text-align:right}.Input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1000px #fff}.Input--ios{font-size:17px;padding:11px 0 12px}.Input--android{font-size:16px;padding:16px 0 18px}.Textarea{display:block;margin:0;width:100%;height:66px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;resize:none}.Textarea--ios{font-size:17px;padding:11px 0 12px}.Textarea--android{font-size:16px;padding:16px 0 18px}.Radio{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;margin-right:-.5em;-ms-flex-align:center;align-items:center}.Radio__self{display:none}.Radio__label{-ms-flex:1 1 auto;flex:1 1 auto}.Radio__icon{-ms-flex:0 0 auto;flex:0 0 auto}.Radio--ios{margin:-11px 0 -12px;padding:11px 0 12px}.Radio--ios .Radio__icon{width:13px;height:11px;opacity:0;transition:opacity .14s ease}.Radio--ios .Radio__self:checked~.Radio__icon{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='26' height='21' viewBox='0 0 26 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4 14.471L2.829 8.9.001 11.728l8.485 8.485 2.828-2.828-.086-.086L25.699 2.828 22.871 0z' fill='%23007AFF'/%3E%3C/svg%3E") 0 0/100% no-repeat;opacity:1}.Radio--android{margin:-16px 0 -17px;padding:16px 0 17px;-ms-flex-align:center;align-items:center}.Radio--android .Radio__label{-ms-flex-order:1;order:1;padding:0 0 0 18px}.Radio--android .Radio__icon{-ms-flex-order:0;order:0;position:relative;width:16px;height:16px;border-radius:10px;border:2px solid #c4c8cc;transition:border-color .14s ease}.Radio--android .Radio__icon:before{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;content:"";background:0 0;transition:background-color .14s ease}.Radio__self:checked~.Radio__icon{border-color:#5181b8}.Select,.Select__self{display:block;outline:0}.Select{margin:0;overflow:hidden;min-width:140px}.Select__self{font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:0 0;width:100%}.Select--ios .Select__self{font-size:17px;padding:11px 0 12px}.Select--android .Select__self{font-size:16px;padding:16px 0 18px}.Slider{position:relative;height:28px;margin:2px 14px}.Slider__in{height:100%}.Slider__dragger{position:absolute;top:50%;left:0;width:0;height:0}.Slider__dragger:before{position:absolute;top:0;width:100%;content:"";height:1px;background:#0f7afb}.Slider__thumb{position:absolute;top:-14px;right:-14px;width:28px;height:28px;content:"";transition:transform .1s ease}.Slider--ios{background:linear-gradient(180deg,#b7b7b7 1px,transparent 0) 0 14px repeat-x}.Slider--ios .Slider__thumb{border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Slider--android{background:linear-gradient(180deg,#bfbfbf 2px,transparent 0) 0 14px repeat-x}.Slider--android .Slider__dragger:before{height:2px;background:#5181b8}.Slider--android .Slider__thumb{top:-13px}.Slider--android .Slider__thumb:before{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;content:"";background:#5181b8;border-radius:6px;transition:box-shadow .14s ease,transform .14s ease}.Slider--android.Slider--active .Slider__thumb:before{box-shadow:0 0 0 3px rgba(128,128,128,.2);transform:scale(1.25)}#root,body,html{margin:0;padding:0;height:100%;background:#efeff4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}body{overflow-x:hidden}.Alert{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Alert--ios{width:270px;-ms-flex:0 0 auto;flex:0 0 auto;background:#fafafa;border-radius:12px;animation:animation-ios-alert-intro .2s ease}.Alert--ios .Alert__content{position:relative;padding:19px 16px 20px;font:13px/16px -apple-system,Helvetica Neue,Helvetica,sans-serif;text-align:center}.Alert--ios .Alert__content:after{content:"";position:absolute;top:100%;height:1px;right:0;left:0;background:#e0e0e0}.Alert--ios .Alert__content h2{margin:0 0 7px;font:500 17px/22px -apple-system,Helvetica Neue,Helvetica,sans-serif}.Alert__footer{display:-ms-flexbox;display:flex;margin-top:1px}.Alert--ios.Alert--v .Alert__footer{-ms-flex-direction:column;flex-direction:column}.Alert--ios .Alert__btn{position:relative;background:#fafafa;-ms-flex:1 0 auto;flex:1 0 auto;font-size:17px;line-height:44px;color:#007aff;border:0;padding:0;margin:0;height:44px;display:block;outline:0}.Alert--ios .Alert__btn:active{z-index:1}.Alert--ios .Alert__btn:after{content:"";position:absolute;top:0;bottom:0;left:100%;width:1px;height:auto;background:#e0e0e0}.Alert--ios .Alert__btn.Tappable--active:after,.Alert--ios .Alert__btn.Tappable--active:before{content:none}.Alert--ios .Alert__btn--primary{font-weight:500}.Alert--ios.Alert--h .Alert__btn{margin-right:1px}.Alert--ios.Alert--h .Alert__btn:first-child{border-radius:0 0 0 12px}.Alert--ios.Alert--h .Alert__btn:last-child{border-radius:0 0 12px 0;margin:0}.Alert--ios.Alert--h .Alert__btn:first-child:last-child{border-radius:0 0 12px 12px}.Alert--ios.Alert--v .Alert__btn{margin:0 0 1px}.Alert--ios.Alert--v .Alert__btn:after{content:"";position:absolute;top:100%;right:0;left:0;width:100%;height:1px;background:#e0e0e0}.Alert--ios.Alert--v .Alert__btn:last-child{border-radius:0 0 12px 12px;margin:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Alert--ios .Alert__content:after{background:linear-gradient(0deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn:after{background:linear-gradient(270deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn.Tappable--active:after{background:linear-gradient(270deg,#e0e0e0 50%,#d9d9d9 0)}.Alert--ios.Alert--h .Alert__btn:last-child:after{content:none}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before,.Alert--ios.Alert--v .Alert__btn:after{position:absolute;right:0;left:0;height:1px;background:linear-gradient(0deg,transparent 50%,#e0e0e0 0);content:""}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before{bottom:100%;background:linear-gradient(180deg,transparent 50%,#e0e0e0 0);top:auto}.Alert--ios.Alert--v .Alert__btn:after{top:100%}.Alert--ios.Alert--v .Alert__btn:last-child:after{content:none}}.Alert--android{min-width:280px;margin:auto 24px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.22),0 24px 24px rgba(0,0,0,.3);border-radius:2px;animation:animation-android-alert-intro .2s ease}.Alert--android .Alert__content{padding:18px 24px 16px;font-size:16px;line-height:24px;color:#71757a}.Alert--android .Alert__content h2{margin:0 0 8px;font-weight:500;font-size:20px;line-height:28px;color:#2e3033}.Alert--android .Alert__content p+p{margin:24px 0 0}.Alert--android .Alert__footer{padding:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.Alert--android .Alert__btn{background:0 0;border:0;-ms-flex:0 0 auto;flex:0 0 auto;text-transform:uppercase;font-weight:500;font-size:14px;line-height:16px;padding:8px;border-radius:2px;margin:0 0 0 12px;color:#5181b8;outline:0}.Alert--android .Alert__btn--primary{color:#fff;background:#5181b8}.Alert--android .Alert__btn--primary.Tappable--active,.Alert--android .Alert__btn--primary:active{background:#4872a3}@keyframes animation-ios-alert-intro{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes animation-android-alert-intro{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.AlertInput{position:relative;z-index:1}.AlertInput--android{margin:3px -15px 9px}.AlertInput--ios{margin:11px 0 12px}.AlertInput--ios:before{position:absolute;z-index:-1;background:#9f9f9f;width:100%;height:100%;padding:1px 1px 0 0;transform:translate3d(-.5px,-.5px,0);content:""}.AlertInput__self{position:relative;box-sizing:border-box;width:100%;background:#fff;z-index:1;border:0;height:24px;font-size:13px;line-height:24px;padding:0 5px;border-radius:0}.AlertInput__self:focus{outline:0}.ScreenSpinner{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex:0 0 auto;flex:0 0 auto}.ScreenSpinner--ios{width:88px;height:88px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:8px} \ No newline at end of file +.View{position:relative;height:100%;width:100%;background:#efeff4;word-wrap:break-word}.View--animated{pointer-events:none;overflow:hidden}.View__header{white-space:nowrap}.View__header-in{position:fixed;top:0;right:0;left:0;color:#fff;z-index:5;background:#5181b8}.View__header-item{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;visibility:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-left,.View__header-right{-ms-flex:0 1 22%;flex:0 1 22%;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:20px}.View__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.View__header-icon{-ms-flex:0 0 auto;flex:0 0 auto}.View__header-left-in{-ms-flex:0 1 auto;flex:0 1 auto;text-overflow:ellipsis;overflow:hidden}.View__header-right{text-align:right}.View__header-title{-ms-flex:1 1 56%;flex:1 1 56%;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 6px}.View__panel,.View__panels{height:100%;width:100%}.View__panel{position:relative;box-sizing:border-box;z-index:1;visibility:hidden}.View--animated .View__panel{position:absolute;top:0;left:0;overflow:hidden}.View__mask,.View__popout{position:fixed;top:0;right:0;bottom:0;left:0}.View__mask{background:rgba(0,0,0,.4);animation:animation-full-fade-in .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:7}.View__popout{z-index:8;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.View--ios{font-family:-apple-system,Helvetica Neue,Helvetica,sans-serif}.View--ios .View__header{position:fixed;width:100%;height:64px;z-index:2}.View--ios .View__header-in{height:64px}.View--ios .View__header-item{top:20px;height:44px;-ms-flex-pack:center;justify-content:center;padding:0 6px}.View--ios .View__header-title{-ms-flex-preferred-size:56%;flex-basis:56%}.View--ios .View__header-left,.View--ios .View__header-right{width:22%;padding:0 2px}.View--ios .View__header-item--next,.View--ios .View__header-item--prev{position:absolute;top:20px;left:0;overflow:hidden;visibility:visible;transition:visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-title{font:500 17px/44px -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;text-align:center}.View--ios .View__header-item--next .View__header-icon,.View--ios .View__header-item--next .View__header-left-in,.View--ios .View__header-item--next .View__header-right,.View--ios .View__header-item--next .View__header-title,.View--ios .View__header-item--prev .View__header-icon,.View--ios .View__header-item--prev .View__header-left-in,.View--ios .View__header-item--prev .View__header-right,.View--ios .View__header-item--prev .View__header-title{transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1),opacity .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__header-icon,.View--ios .View__header-item--prev .View__header-icon,.View--ios .View__header-item--prev .View__header-left-in,.View--ios .View__header-item--prev .View__header-right,.View--ios .View__header-item--prev .View__header-title,.View--ios .View__header-left-in,.View--ios .View__header-right,.View--ios .View__header-title{opacity:0}.View--ios .View__header-item--next .View__header-icon,.View--ios .View__header-item--next .View__header-left-in,.View--ios .View__header-item--next .View__header-right,.View--ios .View__header-item--next .View__header-title{opacity:1}.View--ios .View__header-item .View__header-left-in{transform:translate3d(-60%,0,0)}.View--ios .View__header-item--next .View__header-left-in{transform:translateZ(0)}.View--ios .View__header-item--next~.View__header-item .View__header-left-in{transform:translate3d(60%,0,0)}.View--ios .View__header-item .View__header-title{transform:translate3d(-60%,0,0)}.View--ios .View__header-item--next .View__header-title{transform:translateZ(0)}.View--ios .View__header-item--next~.View__header-item .View__header-title{transform:translate3d(100%,0,0)}.View--ios .View__header-item--active{visibility:visible}.View--ios .View__header-item--active~.View__header-item .View__header-left-in{transform:translate3d(50%,0,0)}.View--ios .View__header-item--active~.View__header-item .View__header-title{transform:translate3d(100%,0,0)}.View--ios .View__header-item--active .View__header-icon,.View--ios .View__header-item--active .View__header-right{opacity:1;visibility:visible}.View--ios .View__header-item--active .View__header-left-in,.View--ios .View__header-item--active .View__header-title{opacity:1;visibility:visible;transform:translateZ(0)}.View--ios .View__panel{background:#efeff4}.View--ios.View--header .View__panel{padding-top:64px}.View--ios .View__panel-in{position:relative;min-height:100%}.View--ios .View__panel--next,.View--ios .View__panel--prev{display:block;visibility:visible;transition:transform .6s cubic-bezier(.36,.66,.04,1),visibility .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel{transform:translate3d(-50%,0,0)}.View--ios .View__panel--next{transform:translateZ(0)}.View--ios .View__panel--active~.View__panel,.View--ios .View__panel--next~.View__panel{transform:translate3d(100%,0,0)}.View--ios .View__panel--next>.View__panel-in:before,.View--ios .View__panel--prev>.View__panel-in:before{position:absolute;top:0;right:0;left:0;bottom:0;z-index:10;background:#000;content:"";pointer-events:none}.View--ios .View__panel--prev>.View__panel-in:before{animation:animation-fade-in .6s cubic-bezier(.36,.66,.04,1)}.View--ios .View__panel--next>.View__panel-in:before{animation:animation-fade-out .6s cubic-bezier(.36,.66,.04,1)}.View--android .View__panel--active:before,.View--ios .View__panel--active:before,.View--ios .View__panel--next~.View__panel--prev>.View__panel-in:before,.View--ios .View__panel--prev~.View__panel--next>.View__panel-in:before{content:none}.View--ios .View__panel--active{visibility:visible;transform:translateZ(0)}.View--android{font-family:Roboto,Droid,Open Sans,sans-serif}.View--android .View__header{position:absolute;top:0;left:0;width:100%;height:64px}.View--android .View__header-in{height:64px;box-shadow:0 0 4px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.16)}.View--android .View__header-item{top:0;height:64px;padding:0 10px}.View--android .View__header-left,.View--android .View__header-right{padding:1px 6px 0;font-size:14px;line-height:16px;font-weight:500;text-transform:uppercase;color:#fff;color:rgba(255,255,255,.7)}.View--android .View__header-left:active,.View--android .View__header-right:active{color:#fff;color:rgba(255,255,255,.9)}.View--android .View__header-left{-ms-flex:0 0 auto;flex:0 0 auto;max-width:22%}.View--android .View__header-left:empty{display:none}.View--android .View__header-item--next,.View--android .View__header-item--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__header-item{background:#5181b8;transform:translateZ(0);opacity:0}.View--android .View__header-item--next{transform:translateZ(0);opacity:1}.View--android .View__header-item--next~.View__header-item{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__header-item--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__header-item--active~.View__header-item{transform:translate3d(0,80px,0)}.View--android .View__header-title{font:500 20px/56px Roboto,Open Sans,sans-serif}.View--android .View__panel,.View--android .View__panel-in{background:#fff}.View--android.View--header .View__panel{padding-top:64px}.View--android .View__panel--next,.View--android .View__panel--prev{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1) .2s,opacity .3s cubic-bezier(.4,0,.2,1) .2s,visibility .3s cubic-bezier(.4,0,.2,1) .2s}.View--android .View__panel{transform:translateZ(0);opacity:0}.View--android .View__panel--next{transform:translateZ(0);opacity:1}.View--android .View__panel--next~.View__panel{transform:translate3d(0,80px,0);opacity:0;visibility:hidden}.View--android .View__panel--active{visibility:visible;transform:translateZ(0);opacity:1}.View--android .View__panel--active~.View__panel{transform:translate3d(0,80px,0)}@keyframes animation-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes animation-fade-out{0%{opacity:.3}to{opacity:0}}@keyframes animation-full-fade-in{0%{opacity:0}to{opacity:1}}.ScrollView{position:relative;width:100%;min-height:100%;overflow-x:hidden}.ScrollView__top{position:absolute;z-index:1}.ScrollView--ios .ScrollView__top{right:0;left:0;height:60px;bottom:100%}.ScrollView--android .ScrollView__top{position:absolute;top:-24px;left:50%;height:40px;width:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3)}.ScrollView__in{transform:translateZ(0)}.Spinner{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.Spinner--ios .Spinner__self{position:relative}.Spinner--android.Spinner--on .Spinner__self{animation:rotator 1.4s linear infinite}.Spinner--android .Spinner__path{transform-origin:center}.Spinner--ios .Spinner__part{width:7.5%;height:27.5%;x:46.25%;y:36.25%}.Spinner--ios.Spinner--on .Spinner__part{animation:fade 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:1}to{opacity:.1}}.Group{padding:15px 0}.Alert--android .Alert__content p,.Alert--ios .Alert__content p,.Group,.Group__title{margin:0}.Group--ios .Group__title{font:13px/18px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#6d6d72;padding:0 15px 7px}.Group__description{font:13px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#6d6d72;padding:7px 15px 0}.Group__description a{text-decoration:none;color:#5181b8}.Group--android .Group__title{font:500 14px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#5181b8;padding:0 16px 17px}.Entity{position:relative;height:64px;padding:0 0 0 75px;text-align:left}.Entity--small{height:48px;padding:0 0 0 60px}.Entity__aside{position:absolute;top:0;left:0;width:64px;height:64px}.Entity--small .Entity__aside{width:48px;height:48px}.Entity--no-photo .Entity__aside{background:#d4dae1;border-radius:50%}.Entity__photo{width:64px;height:64px;border-radius:50%}.Entity--small .Entity__photo{width:48px;height:48px}.Entity__main{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.Entity__description,.Entity__title{max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:20px;white-space:nowrap}.Entity__title{font-size:15px;font-weight:500;color:#2c2d2e;margin:0 0 3px}.Entity__description{font-size:14px;color:#909499}.Entity--ios{margin:0 15px}.Entity--android{margin:0 16px}.List{position:relative;margin:0;padding:0;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.List--ios{background:#fff}.List--ios:after,.List--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:"";bottom:100%;background:#dfdfdf}.List--ios:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.List--ios:after,.List--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem{position:relative;margin:0;padding:0;white-space:nowrap;font-size:17px;line-height:22px}.ListItem__in{position:relative;display:-ms-flexbox;display:flex;max-width:100%}.ListItem__icon{position:relative;-ms-flex:0 0 auto;flex:0 0 auto}.Icon>img,.Icon>svg,.ListItem__icon-in>img,.ListItem__icon-in>svg{vertical-align:top}.ListItem__main{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.ListItem__aside,.ListItem__indicator{-ms-flex:0 0 auto;flex:0 0 auto;max-width:75%;color:#8e8e93;text-align:right;text-overflow:ellipsis}.ListItem__indicator{overflow:hidden}.ListItem__aside{padding:0;overflow:visible}.ListItem--ios{font-size:17px;line-height:22px}.ListItem--ios.ListItem--expandable:before{position:absolute;top:50%;right:16px;margin-top:-4px;width:7px;height:7px;border-top:2px solid #c7c7cc;border-right:2px solid #c7c7cc;content:"";transform:rotate(45deg);z-index:1}.ListItem--ios .ListItem__in{padding:0 15px;background:#fff}.ListItem--ios.ListItem--expandable .ListItem__in{padding:0 35px 0 15px}.List--ios.List--icon-indent .ListItem__icon:empty,.ListItem--ios.ListItem--icon-indent .ListItem__icon:empty{padding-left:44px}.ListItem--ios .ListItem__icon:before{position:absolute;bottom:0;left:100%;width:100vw;height:1px;background:#dfdfdf;content:""}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.ListItem--ios .ListItem__icon:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.ListItem--ios .ListItem__icon-in{width:29px;height:29px;padding:7px 15px 9px 0}.ListItem--ios .ListItem__main{padding:11px .5em 12px 0}.ListItem--ios .ListItem__aside,.ListItem--ios .ListItem__indicator{padding:11px 0 12px}.ListItem--android{font-size:16px;color:#2e3033}.ListItem--android .ListItem__in{padding:0 16px}.ListItem--android .ListItem__icon-in{width:24px;height:24px;padding:14px 32px 18px 0}.ListItem--android .ListItem__main{padding:16px .5em 17px 0}.ListItem--android .ListItem__aside,.ListItem--android .ListItem__indicator{padding:16px 0 17px}.Tappable--ios.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Button--vk-wide-primary){background:#d9d9d9!important}.Tappable--ios.Tappable--active:after,.Tappable--ios.Tappable--active:before{content:"";position:absolute;right:0;left:0;height:1px;background:#dfdfdf;z-index:2}.Tappable--ios.Tappable--active:before{bottom:100%}.Tappable--ios.Tappable--active:after{bottom:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.Tappable--ios.Tappable--active:before{background:linear-gradient(180deg,#c8c7cc 50%,#d9d9d9 0)}.Tappable--ios.Tappable--active:after{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Tappable--android{position:relative;transition:background-color .15s ease-out}.Tappable--android.Tappable--active:not([disabled]):not(.Button--vk-primary):not(.Button--vk-secondary):not(.Button--vk-tertiary):not(.Button--vk-rich):not(.Alert__btn--primary):not(.Button--vk-wide-primary){background:#f0f1f3!important}.Tappable--android .Tappable__waves{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.Tappable--android .Tappable__wave{position:absolute;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;content:"";border-radius:50%;background:rgba(128,128,128,.1);animation:animation-wave .3s cubic-bezier(.4,0,.2,1)}@keyframes animation-wave{0%{transform:scale(1);opacity:1}30%{opacity:1}to{transform:scale(8);opacity:0}}.FormLayout{width:100%;position:relative;margin:0;padding:0;background:#fff;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{position:absolute;right:0;left:0;z-index:1;height:1px;background:#dfdfdf;content:""}.FormLayout--ios.FormLayout:before{bottom:100%}.FormLayout--ios.FormLayout:after{top:100%}.FormLayout__row{display:-ms-flexbox;display:flex;position:relative;margin:0;white-space:nowrap;line-height:22px;max-width:100%}.FormLayout--ios .FormLayout__row{font-size:17px}.FormLayout--android .FormLayout__row{font-size:16px}.FormLayout__separator{position:relative;width:0}.FormLayout--ios .FormLayout__separator:before{position:absolute;bottom:0;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout__row:last-child .FormLayout__label:before,.FormLayout__row:last-child .FormLayout__separator:before{content:none}.FormLayout--ios .FormLayout__separator{left:15px}.FormLayout--android .FormLayout__separator{left:0}.FormLayout__label{position:relative;-ms-flex:0 0 100px;flex:0 0 100px;max-width:100px;vertical-align:top}.FormLayout--ios .FormLayout__label:before{position:absolute;bottom:0;left:15px;width:100vw;height:1px;background:#dfdfdf;content:""}.FormLayout--android .FormLayout__label{display:none}.FormLayout__label-in{overflow:hidden;text-overflow:ellipsis}.FormLayout--ios .FormLayout__label-in{padding:11px 15px 12px}.FormLayout--android .FormLayout__label-in{padding:16px 15px 18px}.FormLayout__field{-ms-flex:1 0 auto;flex:1 0 auto;padding:0 15px;vertical-align:top}.FormLayout--ios .FormLayout__underline{display:none}.FormLayout--android .FormLayout__underline{position:absolute;bottom:9px;left:16px;right:16px;height:2px;background:linear-gradient(0deg,transparent 50%,#d6d6d6 0);content:""}.FormLayout--android .FormLayout__underline:before{position:absolute;top:0;right:0;bottom:0;left:0;background:#518bcc;content:"";transform:scaleX(0);transition:transform .1s cubic-bezier(.4,0,.2,1)}.FormLayout--android input:focus+.FormLayout__underline:before,.FormLayout--android textarea:focus+.FormLayout__underline:before{transform:scaleX(1);transition:transform .14s cubic-bezier(.4,0,.2,1)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.FormLayout--ios .FormLayout__label:before,.FormLayout--ios .FormLayout__separator:before,.FormLayout--ios.FormLayout:after,.FormLayout--ios.FormLayout:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Icon--verbose{background:#ccc}.Icon--ios{width:29px;height:29px;border-radius:7px;overflow:hidden}.Icon--android{width:24px;height:24px}.Text p{margin:0 0 1em}.Text b,.Text strong{font-weight:700}.Text em,.Text i{font-style:italic}.Text a{text-decoration:none;color:#5181b8;font-weight:500}.Text--left{text-align:left}.Text--center{text-align:center}.Text--right{text-align:right}.Text--ios{font-size:15px;line-height:20px;color:#2e3033;padding:8px 15px}.Text--ios p{margin:0 0 20px}.Text--android{color:#2e3033;font-size:16px;line-height:24px;padding:8px 16px}.Text--android p{margin:0 0 24px}.Div--ios{padding:8px 15px}.Div--android{padding:8px 16px}.Div--shadow{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06)}.Div--border,.Div--shadow{position:relative;background:#fff}.Div--border:after,.Div--border:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Div--border:before{bottom:100%;background:#dfdfdf}.Div--border:after{bottom:0;background:#dfdfdf}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Div--border:after,.Div--border:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Flex{display:-ms-flexbox;display:flex;margin:0 -6px}.Flex__item{margin:0 6px}.BackButton{vertical-align:top;padding:0 4px 1px;color:#fff}.Button{box-sizing:border-box;position:relative;display:block;margin:0;width:100%;outline:0;border:0;background:#fff;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:22px}.Button--ios:after,.Button--ios:before{position:absolute;right:0;left:0;z-index:1;height:1px;content:""}.Button--ios:before{bottom:100%;background:#dfdfdf}.Button--ios:after{bottom:0;background:#dfdfdf}.Button--ios{font:17px/22px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;padding:11px 15px 12px}.Button--android{font:16px/22px Roboto,Droid,Open Sans,sans-serif;padding:16px 16px 18px}.Button[disabled]{color:#8e8e93;background:#fff}.Button--left{text-align:left}.Button--center{text-align:center}.Button--right{text-align:right}.Button--ios.Button--primary{color:#007aff;font-weight:500}.Button--ios.Button--danger{color:#ff3f34}.Button--android.Button--primary{color:#518bcc}.Button--android.Button--danger{color:#e64646}.Button--vk-wide,.Button--vk-wide-primary{box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);background:#fff;font-weight:500}.Button--vk-wide-primary{background:#5181b8;color:#fff}.Button--vk-primary.Tappable--active:not([disabled]),.Button--vk-primary:active:not([disabled]),.Button--vk-rich.Tappable--active:not([disabled]),.Button--vk-rich:active:not([disabled]),.Button--vk-wide-primary.Tappable--active:not([disabled]),.Button--vk-wide-primary:active:not([disabled]){background:#4872a3}.Button+.Button:before,.Button--ios.Button--vk-primary.Tappable--active:after,.Button--ios.Button--vk-primary.Tappable--active:before,.Button--ios.Button--vk-primary:after,.Button--ios.Button--vk-primary:before,.Button--ios.Button--vk-rich.Tappable--active:after,.Button--ios.Button--vk-rich.Tappable--active:before,.Button--ios.Button--vk-rich:after,.Button--ios.Button--vk-rich:before,.Button--ios.Button--vk-secondary.Tappable--active:after,.Button--ios.Button--vk-secondary.Tappable--active:before,.Button--ios.Button--vk-secondary:after,.Button--ios.Button--vk-secondary:before,.Button--ios.Button--vk-tertiary.Tappable--active:after,.Button--ios.Button--vk-tertiary.Tappable--active:before,.Button--ios.Button--vk-tertiary:after,.Button--ios.Button--vk-tertiary:before,.Button--vk-wide-primary.Tappable--active:after,.Button--vk-wide-primary.Tappable--active:before,.Button--vk-wide-primary:after,.Button--vk-wide-primary:before{content:none}.Button--vk-wide-primary[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-rich{display:inline-block}.Button--vk-primary,.Button--vk-secondary,.Button--vk-tertiary{display:inline-block;font-size:14px;line-height:16px;min-height:16px;padding:8px 12px;border-radius:2px}.Button--vk-rich{font-size:16px;font-weight:500;line-height:20px;min-height:20px;padding:14px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.24);border-radius:2px}.Button--vk-rich[disabled]{box-shadow:0 0 2px rgba(0,0,0,.05),0 2px 2px rgba(0,0,0,.1)}.Button--vk-primary,.Button--vk-rich{color:#fff;background:#5181b8}.Button--vk-primary[disabled],.Button--vk-rich[disabled]{color:#fff;background:rgba(81,129,184,.4)}.Button--vk-secondary{color:#4774a8;background:rgba(0,57,115,.1)}.Button--vk-secondary.Tappable--active:not([disabled]),.Button--vk-secondary:active:not([disabled]){background:rgba(0,57,115,.2)}.Button--vk-secondary[disabled]{color:rgba(71,116,168,.4);background:rgba(0,57,115,.05)}.Button--vk-tertiary{background:0 0;color:#4774a8}.Button--vk-tertiary.Tappable--active:not([disabled]),.Button--vk-tertiary:active:not([disabled]){background:rgba(0,57,115,.1)}.Button--vk-tertiary[disabled]{color:rgba(71,116,168,.4);background:0 0}.Button--wide{width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Button--ios:after,.Button--ios:before{background:linear-gradient(0deg,#c8c7cc 50%,transparent 0)}}.Checkbox{display:block;margin:-11px -15px;padding:8px 15px}.Checkbox__self{display:none}.Checkbox__pseudo{position:relative;display:block;-webkit-tap-highlight-color:transparent}.Checkbox__pseudo:before{position:absolute;content:"";transition:transform .1s ease}.Checkbox__self:checked+.Checkbox__pseudo:before{transform:translateX(20px)}.Checkbox--ios .Checkbox__pseudo{width:48px;height:28px;border:1px solid #e6e6e6;background:#fff;border-radius:15px;transition:background-color .1s ease,border-color .1s ease}.Checkbox--ios .Checkbox__self:checked+.Checkbox__pseudo{border-color:#4cd864;background:#4cd864}.Checkbox--ios .Checkbox__self[disabled]+.Checkbox__pseudo{border-color:#ddd;background:#ddd}.Checkbox--ios .Checkbox__pseudo:before{top:0;left:0;width:28px;height:28px;border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Checkbox--android .Checkbox__pseudo{width:34px;height:14px;background:#c6c5c5;border-radius:7px;transition:background-color .1s ease}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo{background:#a8bfdb}.Checkbox--android .Checkbox__self[disabled]+.Checkbox__pseudo{opacity:.5}.Checkbox--android .Checkbox__pseudo:before{top:-3px;left:-3px;width:20px;height:20px;background:#f1f1f1;border-radius:10px;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24)}.Checkbox--android .Checkbox__self:checked+.Checkbox__pseudo:before,.Radio__self:checked~.Radio__icon:before{background:#5181b8}.File{display:block;position:relative;overflow:hidden;padding:1px 0 0}.File__self{position:absolute;top:0;right:0;bottom:0;left:0;font-size:10em;z-index:1;opacity:0}.Input{position:relative;display:block;margin:0;width:100%;height:22px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;min-width:140px}.Input--left{text-align:left}.Input--center{text-align:center}.Input--right{text-align:right}.Input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1000px #fff}.Input--ios{font-size:17px;padding:11px 0 12px}.Input--android{font-size:16px;padding:16px 0 18px}.Textarea{display:block;margin:0;width:100%;height:66px;outline:0;border:0;background:0 0;font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;resize:none}.Textarea--ios{font-size:17px;padding:11px 0 12px}.Textarea--android{font-size:16px;padding:16px 0 18px}.Radio{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;margin-right:-.5em;-ms-flex-align:center;align-items:center}.Radio__self{display:none}.Radio__label{-ms-flex:1 1 auto;flex:1 1 auto}.Radio__icon{-ms-flex:0 0 auto;flex:0 0 auto}.Radio--ios{margin:-11px 0 -12px;padding:11px 0 12px}.Radio--ios .Radio__icon{width:13px;height:11px;opacity:0;transition:opacity .14s ease}.Radio--ios .Radio__self:checked~.Radio__icon{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='26' height='21' viewBox='0 0 26 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4 14.471L2.829 8.9.001 11.728l8.485 8.485 2.828-2.828-.086-.086L25.699 2.828 22.871 0z' fill='%23007AFF'/%3E%3C/svg%3E") 0 0/100% no-repeat;opacity:1}.Radio--android{margin:-16px 0 -17px;padding:16px 0 17px;-ms-flex-align:center;align-items:center}.Radio--android .Radio__label{-ms-flex-order:1;order:1;padding:0 0 0 18px}.Radio--android .Radio__icon{-ms-flex-order:0;order:0;position:relative;width:16px;height:16px;border-radius:10px;border:2px solid #c4c8cc;transition:border-color .14s ease}.Radio--android .Radio__icon:before{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;content:"";background:0 0;transition:background-color .14s ease}.Radio__self:checked~.Radio__icon{border-color:#5181b8}.Select,.Select__self{display:block;outline:0}.Select{margin:0;overflow:hidden;min-width:140px}.Select__self{font-family:-apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;line-height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:0 0;width:100%}.Select--ios .Select__self{font-size:17px;padding:11px 0 12px}.Select--android .Select__self{font-size:16px;padding:16px 0 18px}.Slider{position:relative;height:28px;margin:2px 14px}.Slider__in{height:100%}.Slider__dragger{position:absolute;top:50%;left:0;width:0;height:0}.Slider__dragger:before{position:absolute;top:0;width:100%;content:"";height:1px;background:#0f7afb}.Slider__thumb{position:absolute;top:-14px;right:-14px;width:28px;height:28px;content:"";transition:transform .1s ease}.Slider--ios{background:linear-gradient(180deg,#b7b7b7 1px,transparent 0) 0 14px repeat-x}.Slider--ios .Slider__thumb{border-radius:14px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.15)}.Slider--android{background:linear-gradient(180deg,#bfbfbf 2px,transparent 0) 0 14px repeat-x}.Slider--android .Slider__dragger:before{height:2px;background:#5181b8}.Slider--android .Slider__thumb{top:-13px}.Slider--android .Slider__thumb:before{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;content:"";background:#5181b8;border-radius:6px;transition:box-shadow .14s ease,transform .14s ease}.Slider--android.Slider--active .Slider__thumb:before{box-shadow:0 0 0 3px rgba(128,128,128,.2);transform:scale(1.25)}#root,body,html{margin:0;padding:0;height:100%;background:#efeff4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}body{overflow-x:hidden}.Alert{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Alert--ios{width:270px;-ms-flex:0 0 auto;flex:0 0 auto;background:#fafafa;border-radius:12px;animation:animation-ios-alert-intro .2s ease}.Alert--ios .Alert__content{position:relative;padding:19px 16px 20px;font:13px/16px -apple-system,Helvetica Neue,Helvetica,sans-serif;text-align:center}.Alert--ios .Alert__content:after{content:"";position:absolute;top:100%;height:1px;right:0;left:0;background:#e0e0e0}.Alert--ios .Alert__content h2{margin:0 0 7px;font:500 17px/22px -apple-system,Helvetica Neue,Helvetica,sans-serif}.Alert__footer{display:-ms-flexbox;display:flex;margin-top:1px}.Alert--ios.Alert--v .Alert__footer{-ms-flex-direction:column;flex-direction:column}.Alert--ios .Alert__btn{position:relative;background:#fafafa;-ms-flex:1 0 auto;flex:1 0 auto;font-size:17px;line-height:44px;color:#007aff;border:0;padding:0;margin:0;height:44px;display:block;outline:0}.Alert--ios .Alert__btn:active{z-index:1}.Alert--ios .Alert__btn:after{content:"";position:absolute;top:0;bottom:0;left:100%;width:1px;height:auto;background:#e0e0e0}.Alert--ios .Alert__btn.Tappable--active:after,.Alert--ios .Alert__btn.Tappable--active:before,.Alert--ios.Alert--h .Alert__btn:last-child:after{content:none}.Alert--ios .Alert__btn--primary{font-weight:500}.Alert--ios.Alert--h .Alert__btn{margin-right:1px}.Alert--ios.Alert--h .Alert__btn:first-child{border-radius:0 0 0 12px}.Alert--ios.Alert--h .Alert__btn:last-child{border-radius:0 0 12px 0;margin:0}.Alert--ios.Alert--h .Alert__btn:first-child:last-child{border-radius:0 0 12px 12px}.Alert--ios.Alert--v .Alert__btn{margin:0 0 1px}.Alert--ios.Alert--v .Alert__btn:after{content:"";position:absolute;top:100%;right:0;left:0;width:100%;height:1px;background:#e0e0e0}.Alert--ios.Alert--v .Alert__btn:last-child{border-radius:0 0 12px 12px;margin:0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-resolution:192dpi){.Alert--ios .Alert__content:after{background:linear-gradient(0deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn:after{background:linear-gradient(270deg,#e0e0e0 50%,#fafafa 0)}.Alert--ios.Alert--h .Alert__btn.Tappable--active:after{background:linear-gradient(270deg,#e0e0e0 50%,#d9d9d9 0)}.Alert--ios.Alert--h .Alert__btn:last-child:after{content:none}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before,.Alert--ios.Alert--v .Alert__btn:after{position:absolute;right:0;left:0;height:1px;background:linear-gradient(0deg,transparent 50%,#e0e0e0 0);content:""}.Alert--ios.Alert--v .Alert__btn.Tappable--active:before{bottom:100%;background:linear-gradient(180deg,transparent 50%,#e0e0e0 0);top:auto}.Alert--ios.Alert--v .Alert__btn:after{top:100%}.Alert--ios.Alert--v .Alert__btn:last-child:after{content:none}}.Alert--android{min-width:280px;margin:auto 24px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.22),0 24px 24px rgba(0,0,0,.3);border-radius:2px;animation:animation-android-alert-intro .2s ease}.Alert--android .Alert__content{padding:18px 24px 16px;font-size:16px;line-height:24px;color:#71757a}.Alert--android .Alert__content h2{margin:0 0 8px;font-weight:500;font-size:20px;line-height:28px;color:#2e3033}.Alert--android .Alert__content p+p{margin:24px 0 0}.Alert--android .Alert__footer{padding:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.Alert--android .Alert__btn{background:0 0;border:0;-ms-flex:0 0 auto;flex:0 0 auto;text-transform:uppercase;font-weight:500;font-size:14px;line-height:16px;padding:8px;border-radius:2px;margin:0 0 0 12px;color:#5181b8;outline:0}.Alert--android .Alert__btn--primary{color:#fff;background:#5181b8}.Alert--android .Alert__btn--primary.Tappable--active,.Alert--android .Alert__btn--primary:active{background:#4872a3}@keyframes animation-ios-alert-intro{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes animation-android-alert-intro{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.AlertInput{position:relative;z-index:1}.AlertInput--android{margin:3px -15px 9px}.AlertInput--ios{margin:11px 0 12px}.AlertInput--ios:before{position:absolute;z-index:-1;background:#9f9f9f;width:100%;height:100%;padding:1px 1px 0 0;transform:translate3d(-.5px,-.5px,0);content:""}.AlertInput__self{position:relative;box-sizing:border-box;width:100%;background:#fff;z-index:1;border:0;height:24px;font-size:13px;line-height:24px;padding:0 5px;border-radius:0}.AlertInput__self:focus{outline:0}.ScreenSpinner{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex:0 0 auto;flex:0 0 auto}.ScreenSpinner--ios{width:88px;height:88px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:8px} \ No newline at end of file diff --git a/dist/vkui.js b/dist/vkui.js index b6a0231a1f..307285150a 100644 --- a/dist/vkui.js +++ b/dist/vkui.js @@ -1 +1 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",c===a.c),r(t,e+"--android",c===a.b),t))}var a=n(5),i=n(3);t.a=o;var c=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),c||(c=/android/i.test(i)?o:a),c}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,c=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var s=n(62),u=(n.n(s),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),y=n(4),v=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return c();E===v.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=_();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,c=n.i(m.b)(e),s=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(c-a),y:Math.round(s-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:_()}),c(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),w(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var c=n.i(y.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,c),E===v.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var c=n(0),s=n.n(c),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,y=h>=5&&h>p,v=d&&!!i.props.onMoveX||!!i.props.onMove,b=y&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=y,i.gesture.isX=d,i.gesture.isSlideX=v,i.gesture.isSlideY=b,i.gesture.isSlide=v||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var c=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(c),a&&i.props.onEndY&&i.props.onEndY(c),o&&i.props.onEndX&&i.props.onEndX(c)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},c=r,a(i,c)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return s.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(c.Component);y.defaultProps={component:"div",children:""},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),y=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/w,a=o*w;o>=1&&(a=Math.min(w+.2*w*(o-1),2*w));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/w,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.nextPanel;return t===n||t===r}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),s.a.createElement(o,v({className:n.i(y.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&s.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},s.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),s.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(c.Component);_.defaultProps={children:""},t.a=_},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:c,value:n+Math.round(i*u)*o}}return{position:s,absolutePosition:c,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return s.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},s.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},s.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},s.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(c.Component);y.defaultProps={min:0,max:100,value:0,step:0},t.a=y},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),c=(n.n(i),n(0)),s=n.n(c),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n-1}),y={"View--header":h,"View--popout":p,"View--animated":2===this.state.visiblePanels.length};return u.a.createElement("section",{className:n.i(f.a)(m,y),style:r},h&&u.a.createElement("div",{className:"View__header",onClick:this.onHeaderClick},u.a.createElement("div",{className:"View__header-in"},d.map(function(e,t){return u.a.createElement("div",{className:n.i(f.a)("View__header-item",{"View__header-item--active":e.props.id===l,"View__header-item--prev":e.props.id===c,"View__header-item--next":e.props.id===s}),key:e.key||e.props.id||"panel-header-"+t},u.a.createElement("div",{className:"View__header-left"},u.a.createElement("div",{className:"View__header-icon"},e.props.header.icon),u.a.createElement("div",{className:"View__header-left-in"},e.props.header.left)),u.a.createElement("div",{className:"View__header-title"},e.props.header.title),u.a.createElement("div",{className:"View__header-right"},e.props.header.right))}))),u.a.createElement("div",{className:"View__panels"},d.map(function(t,r){return u.a.createElement("div",{className:n.i(f.a)("View__panel",{"View__panel--active":t.props.id===l,"View__panel--prev":t.props.id===c,"View__panel--next":t.props.id===s}),onTransitionEnd:e.transitionEndHandler,key:t.key||t.props.id||"panel-"+r},u.a.createElement("div",{className:"View__panel-in"},u.a.cloneElement(t,{ref:e.getRef,activePanel:l,nextPanel:s})))})),p&&u.a.createElement("div",{className:"View__mask"}),p&&u.a.createElement("div",{className:"View__popout"},o))}}]),t}(s.Component);g.defaultProps={style:{},children:null,popout:void 0,header:null},t.a=g},function(e,t,n){"use strict";function r(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.7.0",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),c=n.n(i),s=n(1),u=(n.n(s),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,c,s){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,c,s],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var c=n(26);n.d(t,"List",function(){return c.a});var s=n(12);n.d(t,"ListItem",function(){return s.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var y=n(9);n.d(t,"Button",function(){return y.a});var v=n(19);n.d(t,"Checkbox",function(){return v.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var w=n(27);n.d(t,"Radio",function(){return w.a});var _=n(30);n.d(t,"Select",function(){return _.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return A});var A=n(36).version}])}); \ No newline at end of file +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/assets/",t(t.s=69)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(68)()},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){var t;return n.i(i.a)(e,(t={},r(t,e+"--ios",s===a.c),r(t,e+"--android",s===a.b),t))}var a=n(5),i=n(3);t.a=o;var s=n.i(a.a)()},function(e,t,n){"use strict";function r(){var e=[];return[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){if(t)switch(void 0===t?"undefined":o(t)){case"string":e.push(t);break;case"object":Object.keys(t).forEach(function(n){t[n]&&e.push(n)});break;default:e.push(""+t)}}),e.join(" ")}t.a=r;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=Object.assign({},e);return t.forEach(function(e){return delete n[e]}),n}t.a=r},function(e,t,n){"use strict";function r(e){return i||(i=e||navigator&&navigator.userAgent||""),s||(s=/android/i.test(i)?o:a),s}n.d(t,"b",function(){return o}),n.d(t,"c",function(){return a}),t.a=r;var o="android",a="ios",i=void 0,s=void 0},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){Object.keys(k).filter(function(t){return t!==e}).forEach(function(e){clearTimeout(k[e].activeTimeout),clearTimeout(k[e].timeout),k[e].stop(),delete k[e]})}var c=n(62),u=(n.n(c),n(0)),l=n.n(u),f=n(1),p=(n.n(f),n(7)),h=n(3),d=n(2),v=n(4),y=n(5),b=n(14),m=n(15),g=Object.assign||function(e){for(var t=1;t1)return s();E===y.b&&i.onDown(t),k[i.id]={},i.getStorage().stop=i.stop,i.getStorage().activeTimeout=setTimeout(i.start,j)},i.onMove=function(e){(e.shiftXAbs>20||e.shiftYAbs>20)&&(i.isSlide=!0,i.stop())},i.onEnd=function(e){var t=e.originalEvent,n=_();if(t.touches&&t.touches.length>0)return void(i.isSlide=!1);if(i.state.active)if(setTimeout(function(){return i.callback()},0),n-i.state.ts>=100)i.stop();else{var r=setTimeout(i.stop,P-n+i.state.ts),o=i.getStorage();o&&(o.timeout=r)}else if(!i.isSlide){setTimeout(function(){return i.callback()},0),i.start();var a=setTimeout(i.stop,P);i.getStorage()?(clearTimeout(i.getStorage().activeTimeout),i.getStorage().timeout=a):i.timeout=a}i.isSlide=!1},i.onDown=function(e){var t=n.i(b.a)(i.container),o=t.top,a=t.left,s=n.i(m.b)(e),c=n.i(m.c)(e),u="wave"+Date.now();i.setState(function(e){return{clicks:Object.assign({},e.clicks,r({},u,{x:Math.round(s-a),y:Math.round(c-o)}))}}),i.wavesTimeout=setTimeout(function(){i.setState(function(e){var t=Object.assign({},e.clicks);return delete t[u],{clicks:t}})},225)},i.start=function(){i.state.active||i.setState({active:!0,ts:_()}),s(i.id)},i.stop=function(){i.state.active&&i.setState({active:!1,ts:null}),i.getStorage()&&(clearTimeout(i.getStorage().activeTimeout),delete k[i.id])},i.getStorage=function(){return k[i.id]},i.getContainer=function(e){e&&e.container&&(i.container=e.container)},i.id=Math.round(1e8*Math.random()).toString(16),i.state={clicks:{},active:!1,ts:null},i}return i(t,e),w(t,[{key:"callback",value:function(){this.props.onClick&&this.props.onClick()}},{key:"componentWillUnmount",value:function(){k[this.id]&&(clearTimeout(k[this.id].timeout),clearTimeout(k[this.id].activeTimeout),delete k[this.id]),clearTimeout(this.wavesTimeout)}},{key:"render",value:function(){var e=this.state,t=e.clicks,r=e.active,o=this.props.onClick?p.a:this.props.component,a=n.i(h.a)(O,this.props.className,{"Tappable--active":r,"Tappable--inactive":!r}),i={};this.props.onClick&&(i.component=this.props.component,i.onStart=this.onStart,i.onMove=this.onMove,i.onEnd=this.onEnd,i.ref=this.getContainer);var s=n.i(v.a)(Object.assign({},this.props),["onClick","children","className","component"]);return l.a.createElement(o,g({className:a},i,s),E===y.b&&l.a.createElement("span",{className:"Tappable__waves",ref:this.getContainer},Object.keys(t).map(function(e){return l.a.createElement("span",{className:"Tappable__wave",style:{top:t[e].y,left:t[e].x},key:e})})),this.props.children)}}]),t}(u.Component);S.defaultProps={component:"div"},t.a=S},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=n(0),c=n.n(s),u=n(1),l=(n.n(u),n(15)),f=n(4),p=Object.assign||function(e){for(var t=1;t1)return i.onEnd(e);if(!o&&!a){var d=p>=5&&p>h,v=h>=5&&h>p,y=d&&!!i.props.onMoveX||!!i.props.onMove,b=v&&!!i.props.onMoveY||!!i.props.onMove;i.gesture.isY=v,i.gesture.isX=d,i.gesture.isSlideX=y,i.gesture.isSlideY=b,i.gesture.isSlide=y||b}if(i.gesture.isSlide){i.gesture.shiftX=u,i.gesture.shiftY=f,i.gesture.shiftXAbs=p,i.gesture.shiftYAbs=h;var m=Object.assign({},i.gesture,{originalEvent:e});i.props.onMove&&i.props.onMove(m),i.gesture.isSlideX&&i.props.onMoveX&&i.props.onMoveX(m),i.gesture.isSlideY&&i.props.onMoveY&&i.props.onMoveY(m)}}},i.onEnd=function(e){var t=i.gesture,n=t.isPressed,r=t.isSlide,o=t.isSlideX,a=t.isSlideY;if(n){var s=Object.assign({},i.gesture,{originalEvent:e});i.props.onEnd&&i.props.onEnd(s),a&&i.props.onEndY&&i.props.onEndY(s),o&&i.props.onEndX&&i.props.onEndX(s)}i.cancelClick="A"===e.target.tagName&&r,i.gesture={},document.removeEventListener(d[1],i.onMove),document.removeEventListener(d[2],i.onEnd),document.removeEventListener(d[3],i.onEnd)},i.onDragStart=function(e){return"A"===e.target.tagName||"IMG"===e.target.tagName?e.preventDefault():void 0},i.onClick=function(e){if(i.cancelClick)return i.cancelClick=!1,e.preventDefault()},i.getRef=function(e){i.container=e},s=r,a(i,s)}return i(t,e),h(t,[{key:"render",value:function(){var e,t=(e={},r(e,d[0],this.onStart),r(e,"onDragStart",this.onDragStart),r(e,"onClick",this.onClick),e),o=this.props.component,a=n.i(f.a)(Object.assign({},this.props),["onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnd","onEndX","onEndY","component"]);return c.a.createElement(o,p({},t,a,{ref:this.getRef}),this.props.children)}}]),t}(s.Component);v.defaultProps={component:"div",children:""},t.a=v},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(61),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(2)),f=n(5),p=n(3),h=n(38),d=n(39),v=function(){function e(e,t){for(var n=0;n=0&&r<=0&&null!==n.startShift&&(n.startShift=e.shiftY),r<=0&&e.shiftY>=0){n.started=!0;var o=Math.abs(n.startShift-e.shiftY)/w,a=o*w;o>=1&&(a=Math.min(w+.2*w*(o-1),2*w));var i={shift:a,progress:Math.min(Math.round(100*o),100),pullStyles:{transform:"translate3d(0, "+a+"px, 0)",transition:"none"},styles:m===d.c?{transform:"translate3d(0, "+a+"px, 0)",transition:"none"}:{}};n.setState(i),n.prevScrollTopValue=r,e.originalEvent.preventDefault()}}},n.onEnd=function(e){if(n.started){var t={on:!1,shift:void 0,progress:null,pullStyles:{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}},r=Math.abs(n.startShift-e.shiftY)/w,o=r>=1;n.startShift=null,n.setState({on:o,progress:o?null:Math.min(Math.round(100*r),100),pullStyles:{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"},styles:m===d.c?{transform:"translate3d(0, "+(o?w:0)+"px, 0)",transition:"transform .24s cubic-bezier(.36, .66, .04, 1)"}:{}}),o&&(n.pulled=!0,n.props.onPull().then(function(){n.setState(t),n.pulled=!1})),n.started=!1}},n.getRef=function(e){n.container=e},n.state={on:!1},n}return a(t,e),b(t,[{key:"shouldComponentUpdate",value:function(e){var t=e.id,n=e.activePanel,r=e.nextPanel;return t===n||t===r}},{key:"render",value:function(){var e=this.props,t=e.onPull,r=e.className,o="div",a={};return t&&(o=h.a,a={onMove:this.onMove,onEnd:this.onEnd}),c.a.createElement(o,y({className:n.i(v.a)(g,r)},n.i(f.a)(this.props,["header","onPull","className","activePanel","prevPanel","nextPanel"]),a,{ref:this.getRef}),t&&c.a.createElement("div",{className:"ScrollView__top",style:this.state.pullStyles},c.a.createElement(p.a,{size:m===d.c?27:25,strokeWidth:3,on:this.state.on,progress:this.state.on?null:this.state.progress})),c.a.createElement("div",{className:"ScrollView__in",style:this.state.styles},this.props.children))}}]),t}(s.Component);_.defaultProps={children:""},t.a=_},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(59),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(4)),f=n(2),p=Object.assign||function(e){for(var t=1;t0){var u=Math.round((r-n)/o);return{position:Math.round(i*u)*o/(r-n)*100,absolutePosition:s,value:n+Math.round(i*u)*o}}return{position:c,absolutePosition:s,value:n+(r-n)*i}}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.onResize),this.onResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResize)}},{key:"render",value:function(){var e={"Slider--active":this.state.active};return c.a.createElement("div",{className:n.i(f.a)(d,e),ref:this.getRef},c.a.createElement(l.a,{onStart:this.onStart,onMove:this.onMove,onEnd:this.onEnd,className:"Slider__in"},c.a.createElement("div",{className:"Slider__dragger",style:{width:this.state.position+"%"}},c.a.createElement("span",{className:"Slider__thumb"}))))}}]),t}(s.Component);v.defaultProps={min:0,max:100,value:0,step:0},t.a=v},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(63),s=(n.n(i),n(0)),c=n.n(s),u=n(1),l=(n.n(u),n(3)),f=n(2),p=function(){function e(e,t){for(var n=0;n-1}),v={"View--header":h,"View--popout":p,"View--animated":2===this.state.visiblePanels.length};return u.a.createElement("section",{className:n.i(f.a)(m,v),style:r},h&&u.a.createElement("div",{className:"View__header",onClick:this.onHeaderClick},u.a.createElement("div",{className:"View__header-in"},d.map(function(e,t){return u.a.createElement("div",{className:n.i(f.a)("View__header-item",{"View__header-item--active":e.props.id===l,"View__header-item--prev":e.props.id===s,"View__header-item--next":e.props.id===c}),key:e.key||e.props.id||"panel-header-"+t},u.a.createElement("div",{className:"View__header-left"},u.a.createElement("div",{className:"View__header-icon"},e.props.header.icon),u.a.createElement("div",{className:"View__header-left-in"},e.props.header.left)),u.a.createElement("div",{className:"View__header-title"},e.props.header.title),u.a.createElement("div",{className:"View__header-right"},e.props.header.right))}))),u.a.createElement("div",{className:"View__panels"},d.map(function(t,r){return u.a.createElement("div",{className:n.i(f.a)("View__panel",{"View__panel--active":t.props.id===l,"View__panel--prev":t.props.id===s,"View__panel--next":t.props.id===c}),onTransitionEnd:t.props.id===c?e.transitionEndHandler:null,key:t.key||t.props.id||"panel-"+r},u.a.createElement("div",{className:"View__panel-in"},u.a.cloneElement(t,{ref:e.getRef,activePanel:l,nextPanel:c})))})),p&&u.a.createElement("div",{className:"View__mask"}),p&&u.a.createElement("div",{className:"View__popout"},o))}}]),t}(c.Component);g.defaultProps={style:{},children:null,popout:void 0,header:null},t.a=g},function(e,t,n){"use strict";function r(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"div";return e?"string"==typeof e?a.a.createElement(n,t,e):e:null}var o=n(0),a=n.n(o);t.a=r},function(e,t){e.exports={name:"vkui",version:"0.7.0",private:!0,main:"dist/vkui.js",devDependencies:{"babel-core":"^6.23.1","babel-loader":"^6.4.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.4","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","css-loader":"^0.27.1","csso-webpack-plugin":"^1.0.0-beta.6","extract-text-webpack-plugin":"^2.1.0","postcss-assets":"^4.1.0","postcss-custom-properties":"^5.0.2","postcss-import":"^9.1.0","postcss-loader":"^1.3.3","style-loader":"^0.13.2",webpack:"^2.2.1","webpack-merge":"^4.0.0","webpack-stats-plugin":"^0.1.4"},dependencies:{"prop-types":"^15.5.8"},peerDependencies:{react:"15.4.2"},optionalDependencies:{"babel-eslint":"^7.1.1",eslint:"^3.5.0","eslint-config-semistandard":"^7.0.0","eslint-config-standard":"^6.0.1","eslint-plugin-promise":"^2.0.1","eslint-plugin-react":"^6.10.0","eslint-plugin-standard":"^2.0.0","react-dom":"^15.4.2",stylelint:"^7.2.0","stylelint-config-standard":"^13.0.0"},scripts:{build:"NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/config.js --bail -p --json > stats.json",dev:"webpack --config ./webpack/config.js --hot --watch",clear:"rm -rf dist/*",test:"eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=n(0),s=n.n(i),c=n(1),u=(n.n(c),n(5)),l=(n(3),n(2),n(4)),f=Object.assign||function(e){for(var t=1;t1&&(o=1);var a=e.timing(o);e.draw(a),o<1&&window.requestAnimationFrame(n)})}}t.a=r},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,a,i,s,c){if(o(t),!e){var u;if(void 0===t)u=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,s,c],f=0;u=Error(t.replace(/%s/g,function(){return l[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(66),o=n(67);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);n.d(t,"View",function(){return r.a});var o=n(29);n.d(t,"ScrollView",function(){return o.a});var a=n(24);n.d(t,"Group",function(){return a.a});var i=n(21);n.d(t,"Entity",function(){return i.a});var s=n(26);n.d(t,"List",function(){return s.a});var c=n(12);n.d(t,"ListItem",function(){return c.a});var u=n(10);n.d(t,"FormLayout",function(){return u.a});var l=n(25);n.d(t,"Icon",function(){return l.a});var f=n(32);n.d(t,"Text",function(){return f.a});var p=n(20);n.d(t,"Div",function(){return p.a});var h=n(23);n.d(t,"Flex",function(){return h.a});var d=n(18);n.d(t,"BackButton",function(){return d.a});var v=n(9);n.d(t,"Button",function(){return v.a});var y=n(19);n.d(t,"Checkbox",function(){return y.a});var b=n(22);n.d(t,"File",function(){return b.a});var m=n(11);n.d(t,"Input",function(){return m.a});var g=n(33);n.d(t,"Textarea",function(){return g.a});var w=n(27);n.d(t,"Radio",function(){return w.a});var _=n(30);n.d(t,"Select",function(){return _.a});var O=n(31);n.d(t,"Slider",function(){return O.a});var E=n(6);n.d(t,"Tappable",function(){return E.a});var j=n(7);n.d(t,"Touch",function(){return j.a});var P=n(16);n.d(t,"Alert",function(){return P.a});var k=n(17);n.d(t,"AlertInput",function(){return k.a});var S=n(8);n.d(t,"Spinner",function(){return S.a});var C=n(28);n.d(t,"ScreenSpinner",function(){return C.a});var N=n(3);n.d(t,"classnames",function(){return N.a});var T=n(13);n.d(t,"keyframes",function(){return T.a});var x=n(14);n.d(t,"getOffsetRect",function(){return x.a});var M=n(5);n.d(t,"platform",function(){return M.a}),n.d(t,"ANDROID",function(){return M.b}),n.d(t,"IOS",function(){return M.c});var R=n(4);n.d(t,"removeObjectKeys",function(){return R.a});var V=n(2);n.d(t,"getClassName",function(){return V.a});var L=n(35);n.d(t,"wrapTextNode",function(){return L.a}),n.d(t,"v",function(){return A});var A=n(36).version}])}); \ No newline at end of file From 1a18ee2a6a280df72e4e3349cb87c094d2820899 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Mon, 26 Jun 2017 17:03:08 +0300 Subject: [PATCH 031/143] Tappable radio buttons --- src/components/ListItem/ListItem.css | 7 ++---- src/components/Radio/Radio.css | 37 ++++++++++++++++++++++------ src/components/Radio/Radio.js | 21 ++++++++-------- 3 files changed, 42 insertions(+), 23 deletions(-) diff --git a/src/components/ListItem/ListItem.css b/src/components/ListItem/ListItem.css index 9e32ceb33f..8a56043a06 100644 --- a/src/components/ListItem/ListItem.css +++ b/src/components/ListItem/ListItem.css @@ -51,10 +51,7 @@ } /* iOS */ -.ListItem--ios { - font-size: 17px; - line-height: 22px; - } +.ListItem--ios {} .ListItem--ios.ListItem--expandable::before { position: absolute; top: 50%; @@ -97,7 +94,7 @@ (min-resolution: 192dpi), (min-resolution: 2dppx) { .ListItem--ios .ListItem__icon::before { - background: linear-gradient(to top, #C8C7CC 50%, transparent 50%); + background: linear-gradient(to top, #c8c7cc 50%, transparent 50%); } } diff --git a/src/components/Radio/Radio.css b/src/components/Radio/Radio.css index 70f8f533cd..2611787b9b 100644 --- a/src/components/Radio/Radio.css +++ b/src/components/Radio/Radio.css @@ -1,11 +1,12 @@ @import '../../styles/constants.css'; .Radio { + position: relative; display: flex; - overflow: hidden; - text-overflow: ellipsis; - margin-right: -.5em; align-items: center; + box-sizing: border-box; + font-size: 17px; + line-height: 22px; } .Radio__self { @@ -14,6 +15,9 @@ .Radio__label { flex: 1 1 auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .Radio__icon { @@ -26,9 +30,29 @@ * iOS radio */ .Radio--ios { - margin: -11px 0 -12px; - padding: 11px 0 12px; + padding: 11px 15px 12px; } +.Radio--ios::before { + position: absolute; + bottom: 0; + left: 15px; + width: 100vw; + height: 1px; + background: var(--ios-thick-separator-color); + content: ''; + } +@media + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + .Radio--ios::before { + background: linear-gradient(to top, #c8c7cc 50%, transparent 50%); + } + } + + .Radio--ios .Radio__label { + padding-right: .5em; + } .Radio--ios .Radio__icon { width: 13px; @@ -46,8 +70,7 @@ * Android radio */ .Radio--android { - margin: -16px 0 -17px; - padding: 16px 0 17px; + padding: 16px 16px 17px; align-items: center; } diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js index 2342690c14..ef27a906ac 100644 --- a/src/components/Radio/Radio.js +++ b/src/components/Radio/Radio.js @@ -2,6 +2,7 @@ import './Radio.css'; import React from 'react'; import PropTypes from 'prop-types'; import ListItem from '../ListItem/ListItem'; +import Tappable from '../Tappable/Tappable'; import removeObjectKeys from '../../lib/removeObjectKeys'; import getClassName from '../../helpers/getClassName'; @@ -9,17 +10,15 @@ const baseClassNames = getClassName('Radio'); export default function Radio (props) { return ( - - - + {}} className={baseClassNames}> + + {props.children} + + ); } From ac664118058f995ccc377b0fe614f470b00e4714 Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Mon, 26 Jun 2017 17:11:31 +0300 Subject: [PATCH 032/143] Tappable file input --- src/components/File/File.css | 36 +++++++++++++++++++++--------------- src/components/File/File.js | 26 +++++++++++++++++--------- 2 files changed, 38 insertions(+), 24 deletions(-) diff --git a/src/components/File/File.css b/src/components/File/File.css index 8c496101c0..f82215fd20 100644 --- a/src/components/File/File.css +++ b/src/components/File/File.css @@ -1,17 +1,23 @@ .File { - display: block; - position: relative; - overflow: hidden; - padding: 1px 0 0; -} + min-height: 22px; + } -.File__self { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - font-size: 10em; - z-index: 1; - opacity: 0; -} \ No newline at end of file + .File__in { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + } + + .File__self { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + font-size: 99px; + z-index: 1; + opacity: 0; + } \ No newline at end of file diff --git a/src/components/File/File.js b/src/components/File/File.js index a7b72a15fc..4a06e38f84 100644 --- a/src/components/File/File.js +++ b/src/components/File/File.js @@ -38,15 +38,23 @@ export default class File extends Component { const { style, label, alignment, appearance } = this.props; return ( - + ); } } From 6ab63ba123ff210c77e1b53615a5359728b9c0cc Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Mon, 26 Jun 2017 17:59:51 +0300 Subject: [PATCH 033/143] Block scroll on popout appearance --- src/components/View/View.css | 6 +++++- src/components/View/View.js | 37 +++++++++++++++++++++++++++++------- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/src/components/View/View.css b/src/components/View/View.css index a540ec0562..72896e0d9f 100644 --- a/src/components/View/View.css +++ b/src/components/View/View.css @@ -14,6 +14,9 @@ pointer-events: none; overflow: hidden; } +.View--popout { + overflow: hidden; + } /** * Header @@ -96,7 +99,8 @@ visibility: hidden; } - .View--animated .View__panel { + .View--animated .View__panel, + .View--popout .View__panel { position: absolute; top: 0; left: 0; diff --git a/src/components/View/View.js b/src/components/View/View.js index d9f45d14bc..54fc981a40 100644 --- a/src/components/View/View.js +++ b/src/components/View/View.js @@ -41,13 +41,32 @@ export default class View extends Component { componentWillReceiveProps (nextProps) { const activePanel = this.state.activePanel; + let scrolls, pageYOffset; + + // Popout appearance + if (!!nextProps.popout && !this.props.popout) { + pageYOffset = window.pageYOffset; + + this.blurActiveElement(); + scrolls = Object.assign({}, this.state.scrolls, { + [activePanel]: pageYOffset + }); + + this.setState({ scrolls }, function () { + this.pickPanel(activePanel).scrollTop = scrolls[activePanel]; + }); + } + + // Panel transition if (activePanel !== nextProps.activePanel) { - const pageYOffset = window.pageYOffset; + pageYOffset = pageYOffset || window.pageYOffset; + const firstLayerId = this.props.children.find(panel => { return panel.props.id === activePanel || panel.props.id === nextProps.activePanel; }).props.id; const isBack = firstLayerId === nextProps.activePanel; - const scrolls = Object.assign({}, this.state.scrolls, { + + scrolls = scrolls || Object.assign({}, this.state.scrolls, { [activePanel]: pageYOffset }); @@ -74,10 +93,6 @@ export default class View extends Component { } }); } - - if (!!nextProps.popout && !this.props.popout) { - this.blurActiveElement(); - } } blurActiveElement() { if (typeof window !== 'undefined' && document.activeElement) { @@ -85,8 +100,9 @@ export default class View extends Component { } } componentDidUpdate () { + const scrolls = this.state.scrolls; + if (this.state.visiblePanels.length === 2 && !this.state.animated) { - const scrolls = this.state.scrolls; const [ prevPanel, nextPanel ] = this.state.visiblePanels; window.requestAnimationFrame(() => { @@ -98,6 +114,13 @@ export default class View extends Component { }); }); } + + // Popout disappearance: restore scroll + if (!this.props.popout && scrolls[this.state.activePanel]) { + window.requestAnimationFrame(() => { + window.scrollTo(0, scrolls[this.state.activePanel]); + }); + } } pickPanel (id) { const elem = document.querySelector('#' + id); From 906b645d1a1e4276e8e6f85bf3e7eda6be92396e Mon Sep 17 00:00:00 2001 From: Timophy Chaptykov Date: Mon, 26 Jun 2017 20:16:01 +0300 Subject: [PATCH 034/143] Textarea autogrow --- src/components/Textarea/Textarea.css | 5 ++- src/components/Textarea/Textarea.js | 55 ++++++++++++++++++++++++---- 2 files changed, 51 insertions(+), 9 deletions(-) diff --git a/src/components/Textarea/Textarea.css b/src/components/Textarea/Textarea.css index 345171f7f0..347079f3f9 100644 --- a/src/components/Textarea/Textarea.css +++ b/src/components/Textarea/Textarea.css @@ -2,14 +2,15 @@ display: block; margin: 0; width: 100%; - height: 66px; + min-height: 66px; + max-height: 198px; outline: none; border: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, sans-serif; line-height: 22px; resize: none; -} + } .Textarea--ios { font-size: 17px; diff --git a/src/components/Textarea/Textarea.js b/src/components/Textarea/Textarea.js index b22b6818be..ac26705f7f 100644 --- a/src/components/Textarea/Textarea.js +++ b/src/components/Textarea/Textarea.js @@ -9,37 +9,78 @@ const baseClassNames = getClassName('Textarea'); export default class Textarea extends Component { constructor (props) { super(props); + this.state = {}; + if (typeof props.value !== 'undefined') { this.isControlledOutside = true; } else { - this.state = { - value: props.initialValue || '' - }; + this.state.value = props.initialValue || ''; } } static propTypes = { style: PropTypes.object, - initialValue: PropTypes.string + initialValue: PropTypes.string, + grow: PropTypes.bool }; static defaultProps = { style: {}, - initialValue: '' + initialValue: '', + grow: true }; + getRef = (element) => { + this.element = element; + } onChange = (e) => { + let el = this.element; + + if (el && this.props.grow) { + const { offsetHeight, scrollHeight } = el; + const style = window.getComputedStyle(el); + const paddingTop = parseInt(style.paddingTop); + const paddingBottom = parseInt(style.paddingBottom); + + let diff = paddingTop + paddingBottom; + let height = 0; + + if (scrollHeight + diff <= offsetHeight) { + diff = 0; + } + + if (el.value) { + this.setState({ height: scrollHeight - diff }); + } + + const top = document.body.scrollTop; + + this.setState({ height: 0 }); + + window.requestAnimationFrame(() => { + this.setState({ height: el.scrollHeight - diff }); + document.body.scrollTop = top; + }); + } + if (!this.isControlledOutside) { this.setState({ value: e.target.value }); } + if (this.props.onChange) { this.props.onChange(e); } } render () { + const props = this.props; + const value = this.isControlledOutside ? props.value : this.state.value; + const height = this.state.height || 66; + return (