@import '~components/ui/colors.scss'; @import '~components/ui/fonts.scss'; $userBarHeight: 50px; .root { height: 100%; overflow: hidden; } .viewPort { height: 100%; overflow-y: auto; overflow-x: hidden; } .isPopupActive { filter: blur(5px); transition: filter 0.4s 0.1s ease; overflow: hidden; } .wrapper { max-width: 756px; margin: 0 auto; } .header { position: fixed; top: 0; z-index: 100; height: $userBarHeight; width: 100%; background: $green; } .headerContent { composes: wrapper; position: relative; } .logo { line-height: 50px; padding: 0 20px; display: inline-block; background: darker($green); font-family: $font-family-title; font-size: 33px; color: #fff; } .body { // TODO: должны ли мы здесь описать базовый шрифт, его размер и базовую линию? composes: wrapper; position: relative; // place for header min-height: 100%; // hack to enable min-height/height 100% in parent elements // http://stackoverflow.com/a/21836870/2039203 // http://stackoverflow.com/questions/2341821/height100-vs-min-height100 height: 0; box-sizing: border-box; padding-top: $userBarHeight; } .userbar { position: absolute; right: 0; left: 115px; top: 0; }