summaryrefslogtreecommitdiff
path: root/StoneIsland/platforms/ios/www/css
diff options
context:
space:
mode:
Diffstat (limited to 'StoneIsland/platforms/ios/www/css')
-rw-r--r--StoneIsland/platforms/ios/www/css/account.css396
-rw-r--r--StoneIsland/platforms/ios/www/css/blogs.css191
-rw-r--r--StoneIsland/platforms/ios/www/css/cart.css164
-rw-r--r--StoneIsland/platforms/ios/www/css/index.css19
-rw-r--r--StoneIsland/platforms/ios/www/css/nav.css199
-rw-r--r--StoneIsland/platforms/ios/www/css/products.css198
-rw-r--r--StoneIsland/platforms/ios/www/css/vendor/flickity.css141
7 files changed, 1237 insertions, 71 deletions
diff --git a/StoneIsland/platforms/ios/www/css/account.css b/StoneIsland/platforms/ios/www/css/account.css
new file mode 100644
index 00000000..b709cbdb
--- /dev/null
+++ b/StoneIsland/platforms/ios/www/css/account.css
@@ -0,0 +1,396 @@
+.login #login { display: block }
+#login {
+ display: none;
+}
+
+
+.logout #logout { display: block }
+#logout {
+ display: none;
+}
+
+
+.signup #signup { display: block }
+#signup {
+ display: none;
+}
+
+
+.profile #profile { display: block }
+#profile {
+ display: none;
+}
+
+
+.payment #payment { display: block }
+#payment {
+ display: none;
+}
+
+
+.shipping #shipping { display: block }
+#shipping {
+ display: none;
+}
+
+
+.orders #orders { display: block }
+#orders {
+ display: none;
+}
+
+#orders.list {
+}
+#orders.single {
+}
+
+#order_list {
+}
+#single_order {
+}
+
+.settings #settings { display: block }
+#settings {
+ display: none;
+}
+
+
+
+form h2 {
+ text-align: center;
+ margin: 0;
+ padding: 20px 10px 8px 10px;
+ font-size: 14px;
+ color: #000;
+ letter-spacing: 1px;
+ font-weight: bold;
+}
+
+input[type=text], input[type=password], input[type=number], input[type=date], input[type=email] {
+ font-family:pfd, sans-serif;
+ font-size:14px;
+ outline:none!important;
+ color:#000;
+ letter-spacing:1px;
+ text-transform:uppercase;
+ height:35px;
+ text-align:center;
+ margin: 0px auto;
+ display:block;
+ margin-top:4px;
+ width: calc(100vw - 10px);
+ border:1px solid #a9a9a9;
+ padding: 0;
+ border-radius: 0;
+}
+
+.half-input {
+ margin: 0px auto;
+ display: block;
+ margin-top: 4px;
+ width: calc(100vw - 10px);
+ border: 1px solid #a9a9a9;
+ overflow: auto;
+}
+
+.half-input input, .half-input select {
+ position: relative;
+ margin: 0;
+ border:none;
+ box-sizing: border-box;
+ float: left;
+ width: 50%;
+}
+
+.half-input > input:first-child {
+ border-right: 1px solid #a9a9a9;
+}
+
+.toggle-container {
+ margin: 0px auto;
+ display: table;
+ margin-top: 10px;
+ width: calc(100vw - 10px);
+ box-sizing: border-box;
+ padding:10px 18px 2px;
+ font-size:14px;
+}
+
+.toggle-row {
+ display:block;
+ padding-bottom:16px;
+}
+
+.toggle-container .caption {
+ display:table-cell;
+ vertical-align:middle;
+ width:100%;
+}
+
+.toggle-container .toggle {
+ display: table-cell;
+ vertical-align: middle;
+ text-align: right;
+ position: relative;
+ right: 12px;
+}
+
+.toggle-container h3 {
+ margin:0;
+}
+
+input.switch {
+ max-height: 0;
+ max-width: 0;
+ opacity: 0;
+}
+
+input.switch + label {
+ display: inline-block;
+ box-shadow: inset 0 0 0px 1px rgba(0,0,0,.7);
+ text-indent: -5000px;
+ height: 30px;
+ width: 50px;
+ border-radius: 15px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateX(-50%) translateY(-50%);
+}
+
+input.switch + label:before {
+ content: "";
+ position: absolute;
+ display: block;
+ height: 30px;
+ width: 30px;
+ top: 0;
+ left: 0;
+ border-radius: 15px;
+ background: rgba(19, 191, 17, 0);
+ -moz-transition: .25s ease-in-out;
+ -webkit-transition: .25s ease-in-out;
+ transition: .25s ease-in-out;
+}
+
+input.switch + label:after {
+ content: "";
+ position: absolute;
+ display: block;
+ height: 30px;
+ width: 30px;
+ top: 0;
+ left: 0px;
+ border-radius: 15px;
+ background: white;
+ box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);
+ -moz-transition: .25s ease-in-out;
+ -webkit-transition: .25s ease-in-out;
+ transition: .25s ease-in-out;
+}
+
+input.switch:checked + label:before {
+ width: 50px;
+ background: #136f11;
+}
+
+input.switch:checked + label:after {
+ left: 20px;
+ box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);
+}
+
+.container {
+ position:relative;
+ min-height:calc(100vh - 154px);
+ width:100vw;
+ box-sizing:border-box;
+ display: flex;
+ flex-direction: column;
+ margin:0;
+ left:0;
+ right:0;
+ top: 0;
+}
+
+
+.container-row {
+ box-sizing:border-box;
+}
+
+.container-fill {
+ min-height:40px;
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ position:relative;
+}
+
+.container-row .container-message {
+ color:#000;
+ text-align:center;
+ width:calc(100vw - 10px);
+ box-sizing:border-box;
+ margin:12px auto;
+ position:relative
+
+}
+
+.container-fill .container-message {
+ font-size:12px;
+ letter-spacing:0.5px;
+ text-align:center;
+ position:absolute;
+ top:50%;
+ left:50%;
+ width:100%;
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+ color:#000;
+}
+
+
+
+.premessage {
+ top:calc(50% - 20px)!important;
+}
+
+.submessage {
+ top:75%!important;
+}
+
+.alert-notice {
+ color:red!important
+}
+
+.checkbox-container {
+ font-size:11px;
+ width:calc(100vw - 10px);
+ display:table;
+ box-sizing:border-box;
+ margin:0 auto 5px;
+}
+
+.checkbox-toggle {
+ display:table-cell;
+ box-sizing:border-box;
+ padding-right:15px;
+ position:relative;
+}
+
+.checkbox-toggle input {
+ width:25px; height:35px;
+ opacity:0;
+}
+
+.checkbox-caption {
+ vertical-align:middle;
+ display:table-cell;
+ box-sizing:border-box;
+}
+
+.checkbox-row {
+ margin:12px 0;
+ box-sizing:border-box;
+}
+
+.checkbox-row:first-child {
+ margin:0;
+}
+
+
+.checkbox-toggle label {
+ position:absolute;
+ top:50%;
+ transform:translateY(-50%);
+ cursor: pointer;
+ width: 36px;
+ height: 36px;
+ left: 0;
+ background: #fff;
+ border:1px solid #000;
+ box-sizing:border-box;
+}
+
+.checkbox-toggle label:after {
+ opacity: 0;
+ content: "";
+ top:50%;
+ position:absolute;
+ left:50%;
+ transform:translateX(-50%) translateY(-50%) rotate(45deg);
+ width:2px;
+ height:36px;
+ background:black;
+ transition: opacity .2s;
+}
+
+.checkbox-toggle label:before {
+ opacity: 0;
+ content: "";
+ top:50%;
+ position:absolute;
+ left:50%;
+ transform:translateX(-50%) translateY(-50%) rotate(-45deg);
+ width:2px;
+ height:36px;
+ background:black;
+ transition: opacity .2s;
+}
+
+.checkbox-toggle input[type=checkbox]:checked + label:after, .checkbox-toggle input[type=checkbox]:checked + label:before,
+.checkbox-toggle input[type=radio]:checked + label:after, .checkbox-toggle input[type=radio]:checked + label:before {
+ opacity: 1;
+}
+
+.privacy-msg {
+ text-align: center;
+}
+
+.select-wrapper {
+ position: relative;
+ text-align: center;
+
+ overflow: hidden;
+ font-size: 14px;
+ outline: none !important;
+ color: #000;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ height: 35px;
+ text-align: center;
+ margin: 0px auto;
+ display: block;
+ margin-top: 4px;
+ width: calc(100vw - 10px);
+ border: 1px solid #a9a9a9;
+}
+.half-input .select-wrapper {
+ width: 50%;
+ border: 0;
+ margin-top: -1px;
+ float: left;
+}
+.half-input .select-wrapper span {
+ top: 9px;
+ color: #aaa;
+}
+.select-wrapper select {
+ opacity: 0;
+ width: 100%;
+ height: 35px;
+ line-height: 35px;
+ position: absolute;
+ top: 0; left: 0;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ border: 10px solid;
+}
+.select-wrapper span {
+ position: relative;
+ top: 8px;
+ color: #888;
+}
+.select-wrapper.picked span {
+ color: #000;
+} \ No newline at end of file
diff --git a/StoneIsland/platforms/ios/www/css/blogs.css b/StoneIsland/platforms/ios/www/css/blogs.css
index ec945f65..239e99bf 100644
--- a/StoneIsland/platforms/ios/www/css/blogs.css
+++ b/StoneIsland/platforms/ios/www/css/blogs.css
@@ -1,17 +1,202 @@
.story #story { display: block }
-#content.story { overflow: scroll }
#story {
display: none;
}
+#story .links {
+ margin: 15px 0 0;
+ text-align: center;
+ text-transform:uppercase;
+}
+#story .links li {
+ padding: 10px;
+ list-style-type: none;
+ display: inline-block;
+}
+#story .links li:before {
+ content: ' | ',
+}
+#story .links li:first-child:before {
+ content: '',
+}
+#story .links li.active {
+ font-weight: bold;
+ text-decoration: underline;
+}
+#story .content > div {
+ display: none;
+}
+#story .content div.active {
+ display: block;
+}
.hub #hub { display: block }
-#content.hub { overflow: scroll }
#hub {
display: none;
}
.archive #archive { display: block }
-#content.archive { overflow: scroll }
#archive {
display: none;
+}
+
+.privacy #privacy { display: block }
+.terms #terms { display: block }
+.returns #returns { display: block }
+.care #care { display: block }
+.page {
+ display: none;
+}
+
+.page .content {
+ padding: 10px;
+}
+
+#content .content .body {
+ letter-spacing:0.35px;
+ font-size:12px;
+ width:calc(100vw - 40px);
+ box-sizing:border-box;
+ margin:10px auto 20px;
+}
+
+#content .content .body:last-child {
+ margin:10px auto 100px;
+}
+
+.content-header {
+ width:calc(100vw - 40px);
+ box-sizing:border-box;
+ margin:20px auto 0px;
+}
+
+.content-header .title, .content-header .subtitle {
+ display:block;
+ font-weight:bold;
+ font-size:14px;
+ text-transform:uppercase
+}
+
+.content-header .title {
+ margin:0;
+ padding:0;
+ line-height:13px;
+}
+
+.content-header .subtitle {
+ padding-bottom:10px
+}
+
+.content-share {
+ border:1px solid black;
+ padding:4px 8px;
+ float:right
+}
+
+.content-header span.date, .content-header span.store {
+ font-size:10px;
+}
+
+/* NOTE: optional arrows */
+
+.gallery-multiple-images::before {
+ border:1px solid black;
+ top:50%;
+ transform:scale(.5,1) translateY(-50%);
+ transform-origin:top left;
+ left:20px;
+ content:'\25C0';
+ font-size:18px;
+ padding:3px 14px 3px 11px;
+ z-index:999;
+ position:absolute;
+ display:block;
+ background:rgba(255,255,255,1);
+}
+
+.gallery-multiple-images::after {
+ border:1px solid black;
+ top:50%;
+ transform:scale(.5,1) translateY(-50%);
+ transform-origin:top right;
+ right:20px;
+ content:'\25B6';
+ font-size:18px;
+ padding:3px 11px 3px 14px;
+ z-index:999;
+ position:absolute;
+ display:block;
+ background:rgba(255,255,255,1);
+}
+
+/* NOTE: not sure if this down arrow is necessary.. the fade
+ might do..? what do you think? it can be removed
+ with javascript when the body hits the bottom of
+ the page */
+
+.fade-cover {
+ background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+ position:fixed;
+ bottom:0;
+ width:100vw;
+ height:100px;
+ box-sizing:border-box
+}
+
+.fade-cover::before {
+ border:1px solid black;
+ top:50%;
+ left:50%;
+ margin-left:-24px;
+ transform:scale(1,.5) translateY(-50%);
+ transform-origin:bottom right;
+ content:'\25BC';
+ font-size:17px;
+ padding:9px 11px;
+ z-index:999;
+ position:absolute;
+ display:block;
+ background:rgba(255,255,255,1);
+}
+
+#story img {
+ box-sizing:border-box;
+ width:calc(100vw + 150px);
+ position:relative;
+ left:-75px;
+}
+
+ul.links {
+ -webkit-padding-start: 0px!important
+}
+
+.archive h1 {
+ font-size:26px;
+ border-bottom:0;
+ margin-top:8px;
+ padding-bottom:0;
+ line-height:24px;
+}
+
+.archive .subtitle {
+ box-sizing:border-box;
+ width:calc(100vw - 10px);
+ position:relative;
+ text-align:center;
+ margin:0 0 12px;
+ padding:0;
+ font-weight:bold;
+ font-size:14px;
+}
+
+/* NOTE: not really sure how this is going to work on the archive page
+ based on the pdf mockup */
+
+.archive .above {
+ width:calc(100vw - 80px);
+ box-sizing:border-box;
+ margin:0 auto;
+}
+
+.archive h2 {
+font-size:32px
} \ No newline at end of file
diff --git a/StoneIsland/platforms/ios/www/css/cart.css b/StoneIsland/platforms/ios/www/css/cart.css
index 5a5efcd6..bc5088d5 100644
--- a/StoneIsland/platforms/ios/www/css/cart.css
+++ b/StoneIsland/platforms/ios/www/css/cart.css
@@ -19,22 +19,174 @@
display: inline-block;
font-size: 13px;
text-align: center;
- padding: 5px 0;
+ padding: 11px 0 10px;
color: #bbb;
width: 33%;
+ position:relative;
}
-#cart .steps span.active {
- color: #888;
+.summary_step, .shipping_step {
+border-right: 1px solid #bbb
}
-#summary {
+#cart.summary .summary_step,
+#cart.payment .payment_step,
+#cart.shipping .shipping_step {
+ color: #000;
+}
+
+#cart_summary,
+#cart_shipping,
+#cart_payment,
+#cart_confirm,
+#cart_thanks {
+ height: calc(100vh - 195px);
+ overflow: hidden;
+ position: relative;
+}
+
+#cart.summary #cart_summary { display: block }
+#cart_summary {
+ display: none;
+}
+
+.full .cart_body { display: block; }
+.empty .cart_empty { display: block; }
+.cart_body {
display: none;
}
+.cart_empty {
+ display: none;
+ text-align: center;
+ margin: 0;
+}
-#shipping {
+#cart.payment #cart_payment { display: block }
+#cart_payment {
display: none;
}
-#billing {
+#cart.shipping #cart_shipping { display: block }
+#cart_shipping {
display: none;
}
+
+#cart.confirm #cart_confirm { display: block }
+#cart_confirm {
+ display: none;
+}
+
+#cart.thanks #cart_thanks { display: block }
+#cart_thanks {
+ display: none;
+}
+
+.summary-container {
+ top:0px;
+}
+
+.billing-container {
+ min-height:calc(100vh - 210px);
+ top:16px;
+}
+
+.cart_item_row {
+display:table;
+position:relative;
+width:calc(100vw - 30px);
+margin:0 auto;
+box-sizing:border-box;
+padding-top:20px;
+}
+
+.cart_item_info, .cart_item_price {
+display:table-cell;
+vertical-align:bottom;
+box-sizing:border-box
+}
+
+.cart_item_image {
+display:table-cell;
+vertical-align:middle;
+box-sizing:border-box
+}
+
+.cart_item_image img {
+max-width:calc(33vw - 25px);
+}
+
+.cart_item_info {
+padding-left:30px;
+padding-bottom:5px;
+position:relative;
+width:100%
+}
+
+.cart_item_price {
+text-align:right;
+position:relative;
+padding-bottom:5px;
+padding-left:5px;
+}
+
+.cart_item_price .price {
+font-size:11px;
+font-weight:bold;
+display:block
+}
+
+.cart_item_info .sku {
+font-size:10px;
+font-weight:bold;
+display:block
+}
+
+.cart_item_info .title {
+font-size:10px;
+font-weight:bold;
+display:block;
+line-height:12px;
+text-transform:uppercase;
+}
+
+.cart_item_info .type {
+font-size:10px;
+font-weight:bold;
+display:block;
+text-transform:capitalize;
+}
+
+.cart_item_info .meta {
+padding-top:5px;
+letter-spacing:.75px;
+font-size:8px;
+}
+
+.cart-summary {
+width:calc(100vw - 30px);
+margin:0 auto;
+display:table;
+color:#bbb;
+font-size:11px;
+}
+
+.cart-summary-row {
+display:table-row;
+}
+
+.cart-summary span {
+display:table-cell;
+padding-top:20px;
+vertical-align:bottom;
+}
+
+.cart-summary-row span:not(.label) {
+text-align:right
+}
+
+.cart-summary-row .label {
+font-weight:bold
+}
+
+.cart-summary-row:last-child {
+color:#000;
+} \ No newline at end of file
diff --git a/StoneIsland/platforms/ios/www/css/index.css b/StoneIsland/platforms/ios/www/css/index.css
index db803fa9..0d855aeb 100644
--- a/StoneIsland/platforms/ios/www/css/index.css
+++ b/StoneIsland/platforms/ios/www/css/index.css
@@ -12,7 +12,7 @@ body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
- background: #eeeeee;
+ background: #fff;
font-family: pfd, sans-serif;
font-size: 12px;
}
@@ -22,16 +22,16 @@ body {
width: 80px;
height: 80px;
position: absolute;
- top: 50%;
+ top: 50vh;
left: 50%;
- margin-top: -40px;
+ margin-top: -60px;
margin-left: -40px;
display: none;
}
.loader:before {
content: '';
border-radius: 50%;
- border-top: 3px solid #fff;
+ border-top: 3px solid #999;
border-right: 3px solid transparent;
animation: loading .5s linear infinite;
-webkit-animation: loading .5s linear infinite;
@@ -39,9 +39,20 @@ body {
height: 80px;
display: block;
}
+.loading .loader { display: block; }
@keyframes loading {
to {transform: rotate(360deg)}
}
@-webkit-keyframes loading {
to {-webkit-transform: rotate(360deg)}
}
+
+.scroll {
+ position: absolute;
+ width: 100%;
+}
+
+.error_hilite {
+ color: red !important;
+ border-color: red !important;
+}
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;
}
diff --git a/StoneIsland/platforms/ios/www/css/products.css b/StoneIsland/platforms/ios/www/css/products.css
index bac0d116..6ab9d0bd 100644
--- a/StoneIsland/platforms/ios/www/css/products.css
+++ b/StoneIsland/platforms/ios/www/css/products.css
@@ -1,14 +1,202 @@
.collection #collection { display: block }
-.collection #footer .filter { display: block }
-#content.collection { overflow: scroll }
#collection {
display: none;
+ text-align: center;
+}
+#collection .item {
+ text-align: center;
+ display: inline-block;
+ max-width: 49vw;
+}
+#collection .item img {
+ width: 49vw;
+ height: 63vw;
}
.product #product { display: block }
-.product #footer .buynow { display: block }
-.product #footer .addtocart { display: block }
-#content.product { overflow: scroll }
#product {
display: none;
}
+#product .style {
+ text-transform: uppercase;
+}
+
+#product.loading #gallery,
+#product.loading .content {
+ display: none;
+}
+#product.loading .loader {
+ display: block;
+}
+
+.gallery {
+ width: 100vw;
+ height: 52vh;
+}
+
+.gallery .item {
+ width: 100vw;
+ height: 52vh;
+ background-size: contain;
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+
+.search #search { display: block }
+#search {
+ display: none;
+}
+
+.closed #closed { display: block }
+#closed {
+ display: none;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ transition: background 0.5s ease-in;
+}
+#closed .closed_store_msg {
+ position: absolute;
+ bottom: 20vh;
+ background: rgba(255,255,255,0.9);
+ padding-top: 20px;
+ padding-bottom: 10px;
+ text-align: center;
+ width: 100%;
+}
+
+.product .content {
+ box-sizing:border-box;
+ width:calc(100vw - 50px);
+ position:relative;
+ margin:0 auto 40px;
+ padding:0;
+}
+
+.product .product-header {
+ font-size:14px;
+ margin:18px 0 0;
+ max-width:60%;
+ position:relative;
+ font-weight:bold;
+}
+
+#product::before {
+ content:'';
+ width:100%;
+ background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+ height:40px;
+ z-index:2;
+ position:absolute;
+ bottom:0px;
+ left:0
+}
+
+.product .style {
+ padding:4px 9px;
+ border:1px solid black;
+ float:left
+}
+
+.product .share {
+ float:right;
+ padding:4px 9px;
+ border:1px solid black;
+}
+
+.product .type {
+ display:table-cell;
+ font-size:14px;
+}
+
+.product .size {
+ padding-right:16px;
+ position:relative
+}
+
+.product .price {
+ display:table-cell;
+ font-size:14px;
+ text-align:right;
+ vertical-align:bottom
+}
+
+.product .price, .product .type {
+ font-weight:bold;
+ margin:0;
+ padding: 0 0 7px;
+}
+
+.type-price {
+ display:table;
+ position:relative;
+ width:100%
+}
+
+.style-share {
+ letter-spacing:0.5px;
+}
+
+.size-color {
+ position:relative
+}
+
+.type-price, .style-share {
+ clear:both;
+ position:relative;
+ box-sizing:border-box
+}
+
+
+.size::after {
+ content: '';
+ display: inline-block;
+ width: 1px;
+ height: calc(100% + 4px);
+ transform: translateY(-2px);
+ position: absolute;
+ top: 0;
+ right:5px;
+ background: #999;
+}
+
+
+.product .fit {
+ clear:both;
+ font-size:9px;
+ letter-spacing:0.5px;
+ text-decoration:underline;
+ text-transform:uppercase;
+ padding:12px 0 2px;
+}
+
+#product #gallery::before {
+ border:1px solid black;
+ top:50%;
+ transform:scale(.5,1) translateY(-50%);
+ transform-origin:top left;
+ left:20px;
+ content:'\25C0';
+ font-size:18px;
+ padding:3px 14px 3px 11px;
+ z-index:999;
+ position:absolute;
+ display:block;
+ background:rgba(255,255,255,1);
+}
+
+#product #gallery::after {
+ border:1px solid black;
+ top:50%;
+ transform:scale(.5,1) translateY(-50%);
+ transform-origin:top right;
+ right:20px;
+ content:'\25B6';
+ font-size:18px;
+ padding:3px 11px 3px 14px;
+ z-index:999;
+ position:absolute;
+ display:block;
+ background:rgba(255,255,255,1);
+}
+
diff --git a/StoneIsland/platforms/ios/www/css/vendor/flickity.css b/StoneIsland/platforms/ios/www/css/vendor/flickity.css
new file mode 100644
index 00000000..b8eca4e4
--- /dev/null
+++ b/StoneIsland/platforms/ios/www/css/vendor/flickity.css
@@ -0,0 +1,141 @@
+/*! Flickity v1.0.2
+http://flickity.metafizzy.co
+---------------------------------------------- */
+
+.flickity-enabled {
+ position: relative;
+}
+
+.flickity-enabled:focus { outline: none; }
+
+.flickity-viewport {
+ overflow: hidden;
+ position: relative;
+ height: 100%;
+}
+
+.flickity-slider {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+/* draggable */
+
+.flickity-enabled.is-draggable {
+ -webkit-tap-highlight-color: transparent;
+ tap-highlight-color: transparent;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport {
+ cursor: move;
+ cursor: -webkit-grab;
+ cursor: grab;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
+ cursor: -webkit-grabbing;
+ cursor: grabbing;
+}
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+ position: absolute;
+ top: 50%;
+ width: 44px;
+ height: 44px;
+ border: none;
+ border-radius: 50%;
+ background: white;
+ background: hsla(0, 0%, 100%, 0.75);
+ cursor: pointer;
+ /* vertically center */
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+
+.flickity-prev-next-button:hover { background: white; }
+
+.flickity-prev-next-button:focus {
+ outline: none;
+ box-shadow: 0 0 0 5px #09F;
+}
+
+.flickity-prev-next-button:active {
+ filter: alpha(opacity=60); /* IE8 */
+ opacity: 0.6;
+}
+
+.flickity-prev-next-button.previous { left: 10px; }
+.flickity-prev-next-button.next { right: 10px; }
+/* right to left */
+.flickity-rtl .flickity-prev-next-button.previous {
+ left: auto;
+ right: 10px;
+}
+.flickity-rtl .flickity-prev-next-button.next {
+ right: auto;
+ left: 10px;
+}
+
+.flickity-prev-next-button:disabled {
+ filter: alpha(opacity=30); /* IE8 */
+ opacity: 0.3;
+ cursor: auto;
+}
+
+.flickity-prev-next-button svg {
+ position: absolute;
+ left: 20%;
+ top: 20%;
+ width: 60%;
+ height: 60%;
+}
+
+.flickity-prev-next-button .arrow {
+ fill: #333;
+}
+
+/* color & size if no SVG - IE8 and Android 2.3 */
+.flickity-prev-next-button.no-svg {
+ color: #333;
+ font-size: 26px;
+}
+
+/* ---- page dots ---- */
+
+.flickity-page-dots {
+ position: absolute;
+ width: 100%;
+ bottom: -25px;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ text-align: center;
+ line-height: 1;
+}
+
+.flickity-rtl .flickity-page-dots { direction: rtl; }
+
+.flickity-page-dots .dot {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 0 8px;
+ background: #333;
+ border-radius: 50%;
+ filter: alpha(opacity=25); /* IE8 */
+ opacity: 0.25;
+ cursor: pointer;
+}
+
+.flickity-page-dots .dot.is-selected {
+ filter: alpha(opacity=100); /* IE8 */
+ opacity: 1;
+}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 23:32:10 +0000