diff options
Diffstat (limited to 'StoneIsland/platforms/ios/www/css/nav.css')
| -rw-r--r-- | StoneIsland/platforms/ios/www/css/nav.css | 199 |
1 files changed, 146 insertions, 53 deletions
diff --git a/StoneIsland/platforms/ios/www/css/nav.css b/StoneIsland/platforms/ios/www/css/nav.css index 2463d123..3d2278d4 100644 --- a/StoneIsland/platforms/ios/www/css/nav.css +++ b/StoneIsland/platforms/ios/www/css/nav.css @@ -6,8 +6,8 @@ top: 0; left: 0; width: 249px; -webkit-transform: translateZ(0) translateX(-249px); - -webkit-transition: -webkit-transform 0.3s; - background: #eeeeee; + -webkit-transition: -webkit-transform 0.1s; + background: #fff; } #content { position: absolute; @@ -15,7 +15,7 @@ width: 100%; height: 100%; overflow: hidden; -webkit-transform: translateZ(0) translateX(0px); - -webkit-transition: -webkit-transform 0.3s; + -webkit-transition: -webkit-transform 0.1s; } .ios #nav, .ios #content { @@ -28,7 +28,7 @@ .nav #content { -webkit-transform: translateZ(0) translateX(249px); } -.nav .logo { +#nav .logo { background-image: url(../img/wide-logo.png); background-repeat: no-repeat; background-position: center center; @@ -36,26 +36,52 @@ width: 120px; height: 80px; margin-left: 20px; + display: block !important; } #nav .menu span { display: block; font-size: 14px; + letter-spacing:1.25px; + text-shadow:0px 0px 1px rgba(0,0,0,.2); color: #000; - padding: 15px 0 15px 20px; } + +#nav .main_menu span { + padding: 30px 0 10px 20px; +} + +#nav .account_menu span, #nav .faq_menu span { + padding: 28px 0 0px 20px; +} + +#nav .faq_menu span:last-child { + padding-bottom:45px!important; +} + +#nav .main_menu { display: block; } +#nav .account_menu { display: none; } +#nav .faq_menu { display: none; } +#nav.faq .main_menu, +#nav.account .main_menu { display: none; } +#nav.account .account_menu { display: block; } +#nav.faq .faq_menu { display: block; } + #nav .submenu { position: absolute; width: 100%; padding: 20px 0; - bottom: 33px; + top:0; border-top: 1px solid #ddd; } + #nav .submenu span { display: block; font-size: 14px; + letter-spacing:1.25px; color: #bbb; - padding: 4px 0 5px 20px + padding: 4px 0 7px 20px } + #nav .social { position: absolute; bottom: 0; @@ -73,6 +99,29 @@ text-align: center; } +#nav-container { + display:flex; + height:calc(100% - 40px); + width:100%; + position:absolute; + flex-direction: column; +} + +#nav-row { + box-sizing:border-box; + padding-bottom:30px; +} + +#nav-fill { + flex: 1; + position:relative; +} + +.menu-emphasis { +font-weight:bold; +padding-bottom:0px; +} + /* INTRO PAGE WITH SPINNING COMPASS */ #intro { @@ -131,7 +180,7 @@ position: absolute; top: 0; left: 0; width: 100%; height: 42px; - background: white; + border-bottom: 1px solid black; } #header .logo { background-image: url(../img/wide-logo.png); @@ -139,46 +188,72 @@ background-position: center center; position: absolute; background-size: contain; - width: 80px; height: 38px; - left: 50%; top: 2px; - margin-left: -40px; + width: 120px; height: 40px; + left: 50%; top: -4px; + margin-left: -60px; } #header .burger { display: inline-block; font-size: 24px; padding: 6px 10px; } + #header .cart { display: inline-block; - padding: 6px 10px; float: right; + width: 18px; + top: 15px; + height: 18px; + margin-right:18px; + border: 1px solid #a9a9a9; + position: relative; + background: #fff; } +.cart .cart_count { + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + color: #a9a9a9; + font-size:13px +} + +.cart::before { + position: absolute; + content: '\25E0'; + left:50%; + transform:translateX(-50%); + color:#a9a9a9; + font-size:20px; + top:calc(-100%); +} #footer { display: block; position: absolute; bottom: 0; left: 0; width: 100%; - background: #eee; + background: #fff; border-top: 1px solid #ddd; + z-index: 1; } -#footer span { - display: none; - padding: 10px 0; - color: #bbb; -} -#footer .filter { - float: right; - padding: 10px; -} -#footer .buynow, -#footer .addtocart, -#footer .cancel, -#footer .checkout, -#footer .checkout_proceed { +#footer div { width: 50%; text-align: center; + padding: 10px 0; + color: #000; float: left; + font-size:14px; + font-weight:bold; +} +#footer .ok { + color: #000; +} +#footer .ok.wide { + width: 100%; +} +#footer .ok.disabled { + color: #bbb; } @@ -189,25 +264,24 @@ position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background: rgba(72,72,72,0.8); + background: rgba(255,255,255,0.8); opacity: 0; - -webkit-transition: opacity 0.4s; - transition: opacity 0.4s; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; } #curtain.visible { pointer-events: auto; opacity: 1; + z-index: 2; } - - -/* LOGIN / SIGNUP SCREEN */ - -#login { - display: none; - position: absolute; - top: 50%; left: 50%; - -webkit-transform: translateX(-50%) translateY(-50%); - background: #fff; +#curtain.white { + background: rgba(255,255,255,0.8); +} +#curtain.dark { + background: rgba(72,72,72,0.8); +} +#curtain.loading .loader { + display: block; } @@ -215,27 +289,46 @@ #selector { display: none; - height: 100%; width: 100%; - position: absolute; top: 0; left: 0; - background: #eeeeee; + width: 100%; + position: absolute; bottom: 0; left: 0; + background: #fff; + z-index: 2; +} +#selector .options div { + width: 100%; + background: white; + text-align: center; + padding: 5px; + font-size: 14px; } /* CONTENT */ -#story, #hub, #archive, #collection, #product, #cart { +#story, #hub, #archive, .page, +#collection, #product, #search, #closed, +#login, #logout, #signup, +#cart, +#profile, #shipping, #payment, #settings, #orders { position: absolute; - top: 40px; - height: -webkit-calc(100% - 40px); - height: calc(100% - 40px); + top: 43px; + height: -webkit-calc(100% - 43px - 39px); + height: calc(100% - 43px - 39px); width: 100%; + overflow: hidden; +} +#story, #hub, #archive, .page, #closed { + /* these things do not have a footer */ + height: -webkit-calc(100% - 43px); + height: calc(100% - 43px); } + h1 { text-align: center; margin: 0; - padding: 15px 10px 10px 10px; - border-bottom: 1px solid #ccc; - font-size: 18px; - color: #ccc; - letter-spacing: 2px; - font-weight: 100; + padding: 16px 10px 12px 10px; + border-bottom: 1px solid #000; + font-size: 14px; + color: #000; + letter-spacing: 1px; + font-weight: bold; } |