diff --git a/css/index.styl b/css/index.styl index 213f42e86..8b17a1c31 100644 --- a/css/index.styl +++ b/css/index.styl @@ -6,10 +6,6 @@ @import "_transitions" @import "_mixins&keyframes" -headerHeight = 118px -submitHeight = 70px -iphoneBar = 68px - @media screen and (max-width: 480px) html.auth0-lock-html body & > * @@ -128,15 +124,12 @@ iphoneBar = 68px .auth0-lock-header text-align center - padding 11px - height headerHeight + padding 14px 14px 14px 14px color #333 position relative background #fff border-radius 5px 5px 0 0 overflow hidden - -webkit-box-sizing border-box - box-sizing border-box .auth0-lock-close-button, .auth0-lock-back-button background white @@ -177,7 +170,7 @@ iphoneBar = 68px .auth0-lock-header-bg position absolute - height headerHeight + height 118px width 100% overflow hidden top 0 @@ -228,7 +221,7 @@ iphoneBar = 68px .auth0-lock-header-logo height 55px display inline-block - margin 0 0 11px + margin 0 0 10px vertical-align middle .auth0-lock-firstname @@ -486,7 +479,6 @@ iphoneBar = 68px -webkit-box-sizing border-box box-sizing border-box width 100% - height submitHeight overflow hidden border-radius 0 0 5px 5px -webkit-transition .2s ease-in-out @@ -640,7 +632,7 @@ iphoneBar = 68px .auth0-lock-list-code position relative - height calc(100% - 60px) //inputCode + height calc(100% - 60px) overflow-y scroll ul margin 0 @@ -877,7 +869,7 @@ iphoneBar = 68px //mobile view @media screen and (max-width: 480px) background white - min-height "calc(100vh - %s)" % (headerHeight + submitHeight) + min-height calc(100vh - 118px - 70px) // - header - submit // min-height 375px display table width 100% @@ -886,7 +878,7 @@ iphoneBar = 68px .auth0-lock-body-content //mobile view @media screen and (max-width: 480px) - min-height "calc(100vh - %s)" % (headerHeight + submitHeight + iphoneBar) + min-height calc(100vh - 118px - 70px - 68px) // - header - submit - iphone bar .auth0-lock-content //mobile view @@ -933,18 +925,20 @@ iphoneBar = 68px @media screen and (max-width: 480px) border-radius 0 + + &.auth0-lock-no-submit .auth0-lock-body-content //mobile view @media screen and (max-width: 480px) - min-height "calc(100vh - %s)" % headerHeight + min-height calc(100vh - 118px) // - header &.auth0-lock-iphone &.auth0-lock-no-submit .auth0-lock-body-content //mobile view @media screen and (max-width: 480px) - min-height "calc(100vh - %s)" % (headerHeight + iphoneBar) + min-height calc(100vh - 118px - 68px) // - header - iphone bar &.auth0-lock-with-terms .auth0-lock-content @@ -953,19 +947,18 @@ iphoneBar = 68px top calc(50% - 32px) // - terms &.auth0-lock-with-tabs - .auth0-lock-body-content - //mobile view - @media screen and (max-width: 480px) - min-height "calc(100vh - %s - 40px)" % (headerHeight + submitHeight) // - header - submit - tabs - padding-top 40px - - // .auth0-lock-content + // .auth0-lock-body-content // //mobile view // @media screen and (max-width: 480px) - // position relative - // top auto - // -webkit-transform none - // transform none + // min-height calc(100vh - 118px - 70px - 63px) // - header - submit - tabs + + .auth0-lock-content + //mobile view + @media screen and (max-width: 480px) + position relative + top auto + -webkit-transform none + transform none // Opened in frame @@ -1027,30 +1020,25 @@ iphoneBar = 68px .auth0-lock.auth0-lock .auth0-lock-tabs-container - margin -20px -20px 20px - - //mobile view - @media screen and (max-width: 480px) - position absolute - top 0 - left 0 - width 100% - margin 0 + margin-bottom 20px .auth0-lock-tabs + border 1px solid #5C666F background white padding 0 margin 0 - font-size 13px + border-radius 3px + text-transform uppercase + font-size 11px letter-spacing .7px - box-shadow 0 1px 0 0 rgba(#5C666F,.2) + overflow hidden - display flex - flex-direction row - flex-wrap wrap - justify-content center - align-content center - align-items stretch + display:flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: center; + align-items: stretch; li width 50% @@ -1063,18 +1051,18 @@ iphoneBar = 68px cursor pointer a - padding 11px 10px + padding 8px 10px display block text-decoration none - color rgba(#5C666F,.6) + color #5C666F font-weight 500 &.auth0-lock-tabs-current - box-shadow 0 1px 0 0 #5C666F + background-color #5C666F cursor default - + a - color #5C666F + color white // password strength