diff options
Diffstat (limited to 'StoneIsland/platforms/android/assets/www/css/nav.css')
| -rwxr-xr-x | StoneIsland/platforms/android/assets/www/css/nav.css | 572 |
1 files changed, 0 insertions, 572 deletions
diff --git a/StoneIsland/platforms/android/assets/www/css/nav.css b/StoneIsland/platforms/android/assets/www/css/nav.css deleted file mode 100755 index 705c0824..00000000 --- a/StoneIsland/platforms/android/assets/www/css/nav.css +++ /dev/null @@ -1,572 +0,0 @@ - -/* NAV BAR */ - -#nav { - position: fixed; - top: 0; left: 0; - width: 249px; - -webkit-transform: translateZ(0) translateX(-249px); - -webkit-transition: -webkit-transform 0.1s; - background: #fff; -} -#content { - position: fixed; - top: 0; left: 0; - width: 100%; height: 100%; - overflow: hidden; - -webkit-transform: translateZ(0) translateX(0px); - -webkit-transition: -webkit-transform 0.1s; -} -.nav #nav { - -webkit-transform: translateZ(0) translateX(0); -} -.nav #content { - -webkit-transform: translateZ(0) translateX(249px); -} -.accessible #nav, -.accessible #content { - position: absolute; -} -#nav .logo { - background-image: url(../img/small-logo.png); - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - width: 120px; - height: 80px; - margin-left: 20px; - display: block !important; -} -#nav .menu span { - display: block; - font-size: 1rem; - letter-spacing:1.25px; - text-shadow:0px 0px 1px rgba(0,0,0,.2); - color: #000; -} - -#nav .main_menu span { - padding: 30px 0 10px 20px; -} - -#nav .account_menu span, #nav .faq_menu span { - padding: 20px 0 0px 20px; -} -#nav .account_menu span.menu-emphasis, -#nav .faq_menu span.menu-emphasis { - padding-top: 28px; -} - -#nav .faq_menu span:last-child { - padding-bottom:45px!important; -} - -#nav .main_menu { display: block; animation: mfadein 0.3s; } -#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; animation: mfadein 0.3s; } - -@keyframes mfadein { 0% { display: none; opacity: 0; } 1% { display:block; opacity: 0; } 100% { opacity: 1; } } - -#nav .submenu { - position: absolute; - width: 100%; - padding: 20px 0; - top:0; - border-top: 1px solid #ddd; -} - -#nav .submenu span { - display: block; - font-size: 1rem; - letter-spacing:1.25px; - color: #666; - padding: 4px 0 12px 20px -} - -#nav .social { - position: absolute; - top: calc(100vh - 48px); - left: 0; - border-top: 1px solid #ddd; - display: flex; - flex-direction: row; -} -#nav .social span { - display: block; - width: 61px; - border-left: 1px solid #ddd; - color: #666; - font-size: 1.125rem; - height: 48px; - text-align: center; - justify-content: center; - align-items: center; - display: flex; -} - -#nav .close { - position: absolute; - top: 0; - right: 0; - width: 48px; - height: 48px; - cursor: pointer; - text-align: center; - overflow: hidden; - -webkit-transition: all ease 200ms; - -moz-transition: all ease 200ms; - -o-transition: all ease 200ms; - transition: all ease 200ms; -} -#nav .close:after, -#nav .close:before { - content: ""; - height: 1px; - width: 24px; - background: #888; - position: absolute; - left: 25%; - top: 50%; -} -#nav .close:before { - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); -} -#nav .close:after { - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -#nav-container { - display:flex; - height:calc(100vh - 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 { - display: none; -} -.intro #intro { - display: block; -} -.intro #header, -.intro #footer { - display: none; -} -#intro div { - position: absolute; - top: 50%; - left: 50%; - width: 200px; - height: 100px; - display: flex; - justify-content: center; - align-items: center; - font-size: 1.063rem; -} -#intro #compass { - pointer-events: none; - background-image: url(../img/compass-logo.png); - background-repeat: no-repeat; - background-position: center center; - background-size: 230px 230px; - width: 230px; - height: 230px; - padding: 0px; - border-radius: 50%; -} -#intro .store { - -webkit-transform: translateX(-50%) translateY(-50%) translateY(145px) rotateZ(0deg); -} -#intro .hub { - -webkit-transform: translateX(-50%) translateY(-50%) translateX(140px) rotateZ(90deg); -} -#intro .story { - -webkit-transform: translateX(-50%) translateY(-50%) translateY(-145px) rotateZ(0deg); -} -#intro .archive { - -webkit-transform: translateX(-50%) translateY(-50%) translateX(-140px) rotateZ(270deg); -} -#intro .latlng { - position: absolute; - bottom: 5%; left: 0; width: 100%; - text-align: center; - z-index: 2 -} - -#intro .alert { - box-sizing: border-box; - width: calc(100vw); - text-align: center; - font-size: 0.875rem; - font-weight: bold; - line-height: 0; - text-transform: uppercase; - color: #3E6616; - position: absolute; - height: 0; - left: 0; - top: auto; - bottom: calc(25vh - 58px); - margin: auto 0; - padding: 0; -} - - -/* HEADER AND FOOTER ON MOST PAGES */ - -#header { - display: flex; - justify-content: space-between; - position: absolute; - top: 0; left: 0; width: 100%; - height: 48px; - border-bottom: 1px solid black; -} -#header .logo { - background-image: url(../img/small-logo.png); - background-repeat: no-repeat; - background-position: center center; - position: absolute; - background-size: contain; - width: 100px; height: 48px; - left: 50%; top: -3px; - margin-left: -50px; - top:0px; -} -#header .burger { - display: flex; - font-size: 24px; - width: 48px; - height: 48px; - padding-top: 4px; - box-sizing: border-box; - align-items: center; - flex-direction: row; - justify-content: center; -} - -#header .cart_rapper { - display: flex; - justify-content: center; - align-items: flex-end; - position: relative; - float: right; - width: 44px; height: 48px; -} -#header .cart { - position: relative; - width: 18px; - margin-bottom: 10px; - height: 18px; - background: #fff; - background-image:url(../img/cart-box.png); - background-size:100%; - background-repeat:no-repeat; -} - -#header .cart .cart_count { - position: absolute; - top: 50%; - left: 50%; - transform: translateY(-50%) translateX(-50%); - color: #666; - font-size: 12.35px; -} - -#header .cart::before { - position: absolute; - content: ''; - left: 50%; - transform: translateX(-50%); - color: #a9a9a9; - background-image: url(../img/small-cart-handle.png); - font-size: 20px; - background-size: 16px 8px; - background-repeat: no-repeat; - background-position: center; - width: 16px; - height: 8px; - top: calc(-50%); - opacity: 0.3; -} - -#footer { - display: block; - position: fixed; - bottom: 0; left: 0; width: 100%; - background: #fff; - border-top: 1px solid #ddd; - z-index: 1; -} -#footer div { - width: 50%; - height: 48px; - text-align: center; - color: #000; - float: left; - font-size: 1rem; - font-weight:bold; - padding: 0; - display: flex; - justify-content: center; - align-items: center; -} -#footer .ok { - color: #000; -} -#footer .ok.wide { - width: 100%; -} -#footer .ok.disabled { - color: #666; -} -.accessible #footer { - position: absolute; -} - - -/* CURTAIN FOR LOGIN AND SELECTOR VIEWS */ - -#curtain { - pointer-events: none; - position: fixed; - top: 0; left: 0; - width: 100%; height: 100%; - background: rgba(255,255,255,0.8); - opacity: 0; - -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; - transition: opacity 0.2s, transform 0.2s; - -webkit-transform: translateZ(0) translateX(0); - transform: translateZ(0) translateX(0); -} -.accessible #curtain { - position: absolute; -} -#curtain.visible { - pointer-events: auto; - opacity: 1; - z-index: 2; -} -#curtain.white { - background: rgba(255,255,255,0.8); -} -#curtain.dark { - background: rgba(72,72,72,0.8); -} -#curtain.opaque { - background: #ddd; -} -#curtain.loading .loader { - display: block; -} - -/* MODAL */ - -.modal { - position: absolute; - top: 50%; left: 50%; - transform: translate3d(-50%, -50%, 0); - max-width: 95vw; - background: white; - box-sizing: border-box; - padding: 40px 20px; - box-shadow: 0 2px 2px #ddd; - opacity: 0; - pointer-events: none; - transition: all 0.2s; -} -.modal.visible { - opacity: 1; - pointer-events: auto; -} - -/* CONSENT MODAL */ - -#consent_modal { - display: none; - z-index: 2; - font-size: 1rem; -} -#consent_modal a { - color: black; -} -.modal button { - font-family: pfd, sans-serif; - font-size: 0.875rem; - padding: 10px; - box-sizing: border-box; - margin: 0; - border: 1px solid; - color: black; - background: white; - margin-top: 20px; - width: 100px; -} -#consent_proceed { - display: inline-block; - background: black; - color: white; - border-color: black; -} -#consent_error { - opacity: 0; - color: red; - transition: 0.3s all; -} -#consent_error.visible { - opacity: 1; -} -/* SELECTOR */ - -#selector { - display: none; - position: absolute; - z-index: 2; - box-sizing:border-box; - min-width:100px; - animation: selector-spring .15s forwards; - animation-timing-function: cubic-bezier(.43,1,.89,.95) -} - -@keyframes selector-spring { - 0% { - margin-top: 15px - } - 100% { - margin-top: 0 - } -} - -#selector:not(.selector-outer-wrap) .options div { - background: white; - text-align: center; - padding: 12px 12px; - box-sizing:border-box; - font-size: 0.875rem; - border-left:1px solid black; - border-right:1px solid black; - border-top:1px solid black; -} - -#selector:not(.selector-outer-wrap) .options div:last-of-type { - border-bottom:1px solid black -} - -.selector-full { - width: 100% !important; - box-sizing:border-box -} - -.selector-full > div > div { - padding: 12px 0 !important; -} - -.selector-outer-wrap { - max-width:250px!important; - min-width:250px!important; - box-sizing:border-box!important; - font-size: 0!important; -} - -.selector-outer-wrap .options div { - width:120px!important; - border-bottom:1px solid black!important; - display:inline-block!important; - box-sizing:border-box!important; - margin:0!important; - background: white; - text-align: center; - padding: 7px 12px; - font-size: 0.875rem!important; -} - -.selector-outer-wrap .options div:nth-of-type(odd){ - border-left:1px solid black!important; - border-right:1px solid black!important; -} - -.selector-outer-wrap .options div:nth-of-type(even){ - border-right:1px solid black!important; -} - -.selector-outer-wrap .options div:nth-of-type(-n+2){ - border-top:1px solid black!important; -} - - -/* CONTENT */ - -#story, #hub, #archive, .page, -#collection, #product, #search, #closed, -#login, #logout, #signup, -#cart, -#profile, #shipping, #payment, #settings, #orders { - position: absolute; - top: 49px; - height: -webkit-calc(100% - 49px - 39px); - height: calc(100% - 49px - 39px); - width: 100%; - overflow: hidden; -} -#collection.single { - height: -webkit-calc(100% - 49px); - height: calc(100% - 49px); -} -#story, #hub, #archive, .page, #closed { - /* these things do not have a footer */ - height: -webkit-calc(100% - 49px); - height: calc(100% - 49px); -} - -h1 { - text-align: center; - margin: 0; - display: flex; - justify-content: center; - align-items: center; - border-bottom: 1px solid #000; - height: 48px; - font-size: 1rem; - color: #000; - letter-spacing: 1px; - font-weight: bold; -} - -.msg { - margin: 20px 10px; - display: inline-block; -} - -.msg-condensed { - margin:6px!important; -} |
