First Commit
286
files/main_style.css
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, div.paragraph, blockquote, fieldset, input { margin: 0; padding: 0; }
|
||||
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }
|
||||
a img { border: 0; }
|
||||
a { text-decoration: none; }
|
||||
html { height: 100%; }
|
||||
body { font-family: 'Raleway', sans-serif; font-size: 15px; color: #8e8e8e; min-height: 100%; background: #f9f9f9; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||||
.body-wrap { background-color: #ffffff; }
|
||||
.bg-wrapper { background-color: #ffffff; }
|
||||
h2 { font-family: 'Lora', sans-serif; font-size: 1.7em; font-weight: normal; color: #484848; margin: 0 auto .3em; }
|
||||
div.paragraph, div.paragraph { line-height: 1.5; margin: 0 auto 1em; }
|
||||
p, div.paragraph { line-height: 1.5; margin: 0 auto 1em; }
|
||||
hr.styled-hr { background-color: #d0d0d0; }
|
||||
#wrapper blockquote { border-left: 5px solid #d0d0d0; margin-left: 20px; padding-left: 20px; margin-bottom: 1em; }
|
||||
#header { text-align: center; padding-top: 52px; padding-bottom: 25px; }
|
||||
.wsite-logo a { color: #484848; font-family: 'Raleway'; font-weight: 500; font-size: 36px; text-transform: uppercase; }
|
||||
.wsite-logo a:hover { color: #484848; }
|
||||
a { color: #5199a8; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
|
||||
a:hover { color: #8dc7d3; }
|
||||
.container, #footer-content { width: 960px; padding: 4em 1.6em; margin: 0 auto; box-sizing: border-box; }
|
||||
.wsite-form-container { margin-top: 0 !important; }
|
||||
.paragraph ul, .paragraph ol { padding-left: 3em !important; }
|
||||
body.full-width-off .body-wrap { max-width: 1100px; margin: auto auto 10em; position: relative; top: 5em; -webkit-box-shadow: 0px 0px 2px rgba(99,99,99,0.2); box-shadow: 0px 0px 2px rgba(99,99,99,0.2); }
|
||||
#footer { font-family: 'Raleway', sans-serif; font-size: 14px; background: #f9f9f9; }
|
||||
body.full-width-off #footer { background: #ffffff; border-top: 1px solid rgba(99,99,99,0.1); }
|
||||
#footer-content { width: 960px; margin: auto; }
|
||||
#footer h2 { font-family: 'Raleway', sans-serif; font-size: 18px; text-transform: uppercase; }
|
||||
#navigation { padding-bottom: 40px; width: 960px; margin: auto; text-align: center; text-transform: uppercase; font-family: 'Raleway', sans-serif; font-size: 13px; overflow: hidden; white-space: nowrap; }
|
||||
#navigation ul { display: inline-block; white-space: normal; }
|
||||
#navigation a { display: inline-block; padding: 10px 14px; }
|
||||
#navigation:before, #navigation:after { background-color: #d0d0d0; content: ""; display: inline-block; height: 1px; bottom: .1em; position: relative; vertical-align: middle; width: 50%; }
|
||||
body.full-width-off #navigation:before, body.full-width-off #navigation:after { display: none; }
|
||||
#navigation:before { right: 29px; margin-left: -50%; }
|
||||
#navigation:after { left: 29px; margin-right: -50%; }
|
||||
#navigation li { display: inline-block; }
|
||||
#navigation li:hover, #navigation li#active { background-color: #f6f6f6; color: #00B1B3; }
|
||||
#navigation a { color: #00788e; }
|
||||
.wsite-menu { list-style-type: none; margin-left: 25px; }
|
||||
#wsite-menus .wsite-menu li a { background-color: #f6f6f6; border: none; color: #484848; }
|
||||
#wsite-menus .wsite-menu li a:hover { background-color: #e8e8e8; color: #484848; }
|
||||
.wsite-menu-arrow { font-size: 0; margin-left: 10px; }
|
||||
.wsite-menu-arrow:before { display: inline-block; content: '\203A'; vertical-align: bottom; font-size: 20px; }
|
||||
.wsite-button, .wsite-button .wsite-button-inner, .wsite-editor .wsite-button, .wsite-editor .wsite-button .wsite-button-inner { color: white; background-image: none !important; background-color: #5199a8; }
|
||||
.wsite-button, .wsite-editor .wsite-button { padding: 8px 20px !important; }
|
||||
.wsite-button-large, .wsite-editor .wsite-button-large { padding: 10px 25px !important; }
|
||||
.wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { background-color: inherit; height: auto !important; line-height: 1.25 !important; padding: 0 !important; }
|
||||
.wsite-button-highlight, .wsite-editor .wsite-button-highlight { background-color: #5199a8; }
|
||||
.wsite-button-highlight:hover, .wsite-editor .wsite-button-highlight:hover { background-color: #5cb0c2; }
|
||||
.wsite-button-highlight:active, .wsite-editor .wsite-button-highlight:active { background-color: #44818e; }
|
||||
.wsite-button-normal, .wsite-editor .wsite-button-normal { background-color: #484848; }
|
||||
.wsite-button-normal:hover, .wsite-editor.wsite-button-normal:hover { background-color: #616161; }
|
||||
.wsite-button-normal:active, .wsite-editor .wsite-button-normal:active { background-color: #303030; }
|
||||
.galleryCaptionHover .galleryCaptionHolder { height: 100%; opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; -webkit-backface-visibility: hidden; }
|
||||
.partialImageGalleryCaption.galleryCaptionHolder { height: auto; }
|
||||
.galleryCaptionHover.galleryImageHolder:hover .galleryCaptionHolder { opacity: 1; }
|
||||
.galleryCaptionHolderInner { display: table; height: 100%; }
|
||||
.galleryCaptionInnerTextHolder { display: table-cell; vertical-align: middle; }
|
||||
#content-wrapper .container .galleryImageBorder { border-color: #d0d0d0; }
|
||||
#content-wrapper .wsite-image-border-hairline a img, #content-wrapper .wsite-image-border-thin a img, #content-wrapper .wsite-image-border-medium a img, #content-wrapper .wsite-image-border-thick a img { border-color: #d0d0d0; }
|
||||
.banner-wrap { position: relative; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; }
|
||||
.wsite-header-section, .wsite-background { background-image: url(theme/images/default_header.jpg?1687185415); background-position: center center; }
|
||||
.wsite-header-section:before, .wsite-background:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; min-height: 100%; height: inherit; background: rgba(0,0,0,0.1); z-index: 1; }
|
||||
.wsite-section-bg-color:before { display: none; }
|
||||
#banner { position: relative; width: 900px; height: 100%; margin: auto; display: table; table-layout: fixed; z-index: 3; }
|
||||
#banner-container { display: table-cell; vertical-align: middle; padding: 4em 1.6em; }
|
||||
.banner-wrap a { color: #8dc7d3; }
|
||||
.banner-wrap a:hover { text-decoration: underline; }
|
||||
.banner-wrap .wsite-button-inner, .wsite-editor .banner-wrap .wsite-button-inner { font-family: 'Raleway', sans-serif; text-transform: uppercase; font-size: 15px; }
|
||||
#banner h2 { font-size: 50px; color: white; }
|
||||
#banner .paragraph { font-size: 1.33em; color: white; }
|
||||
.header-page .wsite-header-section { height: 460px; }
|
||||
body.splash-page, .splash-page .body-wrap, .splash-page { width: 100%; height: 100%; display: table; }
|
||||
.splash-page .spacer { height: 16%; }
|
||||
.splash-page #banner { height: 100%; }
|
||||
.splash-page #wrapper { height: 100%; width: 100%; border-spacing: 0; }
|
||||
.splash-page #wrapper td { padding: 0; }
|
||||
.splash-page #header, .splash-page #footer { padding-top: 25px; background: #ffffff; border: none !important; }
|
||||
.splash-page #navigation, .splash-page #footer { padding-bottom: 25px; }
|
||||
.splash-page #footer-content { display: none; }
|
||||
body.no-header #navigation { padding-bottom: 0; }
|
||||
.wsite-product { border: 1px solid #d0d0d0; border-radius: 2px; background: inherit; box-shadow: none; }
|
||||
.wsite-product .wsite-product-title { font-family: 'Lora', sans-serif; font-size: 26px; }
|
||||
.wsite-product-image { border: 1px solid #d0d0d0; border-radius: 0; }
|
||||
.wsite-input, .wsite-form-input, .wsite-form-field select, .wsite-com-product-option select { border: solid 1px #d0d0d0; border-radius: 0; margin: 8px 0; background-image: none; min-height: 35px !important; padding: 8px !important; font-size: 13px; box-sizing: border-box; }
|
||||
.wsite-input:focus, .wsite-form-input:focus, .wsite-form-input--focus, .wsite-form-field select:focus, .wsite-com-product-option select:focus { border-color: #5199a8; }
|
||||
.wsite-form-phone-separator { margin: 8px 0; }
|
||||
.wsite-form-label { font-weight: normal; }
|
||||
.wsite-form-field select, .wsite-com-product-option select { font-family: 'Raleway', sans-serif; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: .01px; text-overflow: ''; padding-left: 8px; padding-top: 2px; padding-bottom: 2px; background: url(theme/images/downarrow.png?1687185415) no-repeat 97% 13px; background-color: white; }
|
||||
select::-ms-expand { display: none; }
|
||||
#wsite-com-checkout-payment-info select { background: white; }
|
||||
.wsite-form-field input[type='checkbox'], .wsite-form-field input[type='radio'], .wsite-com-product-option-groups input[type='radio'], .wsite-com-product-option-groups input[type='checkbox'] { display: none; }
|
||||
.wsite-form-field input[type='checkbox'] + label:before, .wsite-form-field input[type='radio'] + label:before, .wsite-com-product-option-groups input[type='radio'] + span:before, .wsite-com-product-option-groups input[type='checkbox'] + span:before { content: ''; display: inline-block; height: 22px; width: 22px; vertical-align: middle; margin-right: 8px; }
|
||||
.wsite-form-field input[type='checkbox'] + label:before, .wsite-com-product-option-groups input[type='checkbox'] + span:before { background: url(theme/images/default_icons.png?1687185415) -714px -35px; }
|
||||
.wsite-form-field input[type='checkbox']:checked + label:before, .wsite-com-product-option-groups input[type='checkbox']:checked + span:before { background: url(theme/images/teal_icons.png?1687185415) -722px -32px; }
|
||||
.wsite-form-field input[type='radio'] + label:before, .wsite-com-product-option-groups input[type='radio'] + span:before { background: url(theme/images/default_icons.png?1687185415) -663px -35px; }
|
||||
.wsite-form-field input[type='radio']:checked + label:before, .wsite-com-product-option-groups input[type='radio']:checked + span:before { background: url(theme/images/teal_icons.png?1687185415) -671px -32px; }
|
||||
.blog-sidebar { padding-left: 60px; }
|
||||
.column-blog { width: 100%; }
|
||||
.blog-sidebar-separator { padding: 0; }
|
||||
.blogCommentText div.paragraph, #secondlist .blogCommentText div.paragraph, .blog-date span { font: inherit !important; color: #8e8e8e !important; }
|
||||
.blogCommentText p, #secondlist .blogCommentText p, .blog-date span { font: inherit !important; color: #8e8e8e !important; }
|
||||
.blogCommentHeading .blogCommentHeadingInner, .blogCommentWrap, .blogCommentHeading, .blogCommentHeading .blogCommentAuthor { background: none !important; }
|
||||
.blogCommentHeading .blogCommentAuthor span.name, .blogCommentHeading .blogCommentAuthor a.name, .blogCommentHeading .blogCommentDate { color: #8e8e8e !important; font: inherit !important; text-shadow: none !important; }
|
||||
.blogCommentReplyWrapper iframe { height: 460px !important; }
|
||||
#wsite-com-product-gen { padding: 0 !important; }
|
||||
#wsite-com-heirarchy { font-size: 15px; font-family: 'Raleway', sans-serif; }
|
||||
#wsite-com-hierarchy .wsite-link-unselected { color: inherit; }
|
||||
#wsite-com-hierarchy .wsite-selected, #wsite-com-hierarchy .wsite-com-link:hover { color: #5199a8; }
|
||||
#wsite-com-store #wsite-com-hierarchy ul li { line-height: 1; text-transform: uppercase; font-size: 15px; font-family: 'Raleway', sans-serif; }
|
||||
#wsite-com-store #wsite-com-hierarchy ul .wsite-com-link-text { margin-bottom: 1em; }
|
||||
.wsite-com-category-product-group .wsite-com-category-product-wrap, .wsite-com-category-product-featured-group .wsite-com-category-product-wrap, .wsite-com-category-product-featured-group .wsite-com-category-product-featured-wrap, .wsite-com-category-subcategory-group .wsite-com-category-subcategory-wrap { margin: 0 10px 20px; }
|
||||
.wsite-com-category-subcategory-name { top: 0; }
|
||||
.wsite-com-category-subcategory-name-text { position: relative; display: table; width: 100%; height: 100%; padding: 0; }
|
||||
.wsite-com-category-subcategory-name-text span { display: table-cell; vertical-align: middle; }
|
||||
.wsite-com-category-subcategory-name-bg { -webkit-transition: opacity 0.3s ease-in-out !important; -moz-transition: opacity 0.3s ease-in-out !important; -o-transition: opacity 0.3s ease-in-out !important; -ms-transition: opacity 0.3s ease-in-out !important; transition: opacity 0.3s ease-in-out !important; }
|
||||
.wsite-com-category-subcategory-link:hover .wsite-com-category-subcategory-name-bg { opacity: .3; }
|
||||
.wsite-social { white-space: normal; }
|
||||
.wsite-social-item { font-size: 1.35em; display: inline-block; margin: 0 8px 10px; color: #b9b9b9; }
|
||||
.wsite-social-item:hover { color: #5199a8; }
|
||||
#header { background: #ffffff; }
|
||||
#navigation ul { list-style-type: none; }
|
||||
#navigation ul li { display: inline-block; }
|
||||
.nav-trigger { display: none; text-align: center; }
|
||||
.nav-trigger span.mobile { display: block; background-color: #484848; height: 3px; width: 24px; position: relative; margin: 0 auto 5px; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; }
|
||||
.nav-trigger span.mobile:last-child { margin-bottom: 0; }
|
||||
.navmobile-wrapper { display: none; }
|
||||
.navmobile-wrapper .nav-trigger { padding: 0; }
|
||||
.navmobile-wrapper label { padding: 10px; }
|
||||
@media (max-width: 1024px) {
|
||||
#navigation, #banner, .container, #footer-content { width: auto; min-width: 100%; }
|
||||
#wrapper { box-sizing: border-box; }
|
||||
#wrapper { position: relative; left: 0%; -webkit-transition: left 0.3s ease-in-out !important; -moz-transition: left 0.3s ease-in-out !important; -o-transition: left 0.3s ease-in-out !important; -ms-transition: left 0.3s ease-in-out !important; transition: left 0.3s ease-in-out !important; }
|
||||
#wsite-com-product-images a div { padding-right: 10px; }
|
||||
#footer { background: #f9f9f9; }
|
||||
#wsite-search-submit { border-radius: 0; margin-top: 2px; }
|
||||
.blog-sidebar { padding-left: 40px; }
|
||||
#wsite-mini-cart .wsite-product-image { padding: 10px; }
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
body.full-width-off .body-wrap { margin: 0 auto; }
|
||||
h2, #wsite-search-header h2 { font-size: 1.4em; margin-bottom: 7px; padding-top: 0; display: block; }
|
||||
.container .paragraph font { font-size: inherit; }
|
||||
.wsite-com-content { padding: 0; }
|
||||
.short-header .banner-wrap { margin-bottom: 1.5em; }
|
||||
.wsite-button-inner, .wsite-editor .wsite-button-inner { font-size: 0.8em; }
|
||||
.paragraph { font-size: 1em !important; line-height: 1.5em !important; }
|
||||
.navmobile-wrapper { position: fixed; display: block; opacity: 0; width: 275px; height: 100%; padding: 80px 0 20px 0; top: 0; left: 0; box-sizing: border-box; overflow-y: auto; background: #ffffff; -webkit-transition: opacity 0s 1s linear; -moz-transition: opacity 0s 1s linear; -o-transition: opacity 0s 1s linear; transition: opacity 0s 1s linear; }
|
||||
#navmobile { margin: 0 15px; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.01em; font-family: 'Raleway', sans-serif; }
|
||||
#navmobile ul { list-style-type: none; width: 60% !important; }
|
||||
.nav-trigger, nav#nav-mobile { display: block; margin: 10px; }
|
||||
#navigation, .wsite-menu-arrow, #wsite-menus { display: none; }
|
||||
.nav-trigger { display: table-cell; vertical-align: middle; width: 24px; }
|
||||
#navigation { display: none; }
|
||||
.wsite-nav-cart.wsite-nav-3 { position: absolute; top: -52px; right: 0; }
|
||||
.postload { height: 100%; }
|
||||
.postload .body-wrap { position: relative; width: 100%; min-height: 100%; }
|
||||
#wrapper { box-sizing: border-box; z-index: 10; background: #f9f9f9; position: relative; width: 100%; min-height: 100%; padding-top: 64px; -webkit-box-shadow: 0px 0px 5px rgba(87,87,87,0.2); -moz-box-shadow: 0px 0px 5px rgba(87,87,87,0.2); -o-box-shadow: 0px 0px 5px rgba(87,87,87,0.2); box-shadow: 0px 0px 5px rgba(87,87,87,0.2); }
|
||||
input.nav-trigger, input.nav-trigger-close { display: none; }
|
||||
body.menu-open #wrapper { left: 275px; }
|
||||
body.menu-open, body.menu-open .body-wrap { overflow: hidden; }
|
||||
body.menu-open .navmobile-wrapper { opacity: 1; -webkit-transition: opacity 0s 0s linear; -moz-transition: opacity 0s 0s linear; -o-transition: opacity 0s 0s linear; transition: opacity 0s 0s linear; }
|
||||
.close-btn { display: inline-block; padding: 4px 0; margin: 1px; }
|
||||
.open-btn { display: block; position: relative; z-index: 11; width: 24px; padding: 15px; cursor: pointer; }
|
||||
.wsite-menu-default a, .wsite-menu a { color: inherit; padding: 10px; display: block; }
|
||||
.wsite-menu-default a:hover, .wsite-menu a:hover { background: #f6f6f6; color: #484848; }
|
||||
.wsite-menu-back-item a, .wsite-menu-default a, .wsite-menu a { cursor: pointer; }
|
||||
.wsite-menu-back-item a { color: inherit; }
|
||||
.wsite-menu-mobile-arrow { display: inline-block !important; font-size: inherit !important; padding: 0 5px; }
|
||||
.wsite-menu-mobile-arrow:before { display: inline-block; content: '\203A'; vertical-align: bottom; }
|
||||
.wsite-menu-back-item .wsite-menu-mobile-arrow:before { content: '\2039'; }
|
||||
.wsite-menu-slide li { margin: 0 0 10px; }
|
||||
.wsite-menu-slide li#active a { background: #f6f6f6; color: #484848; }
|
||||
.wsite-menu { margin-left: 0; }
|
||||
#footer { padding: 0; }
|
||||
.footer-full { padding-bottom: 5em !important; }
|
||||
#header { padding: 0 10px; border-bottom: solid 1px #d0d0d0; height: 65px; box-sizing: border-box; display: table; width: 100%; position: fixed; top: 0; left: 0; background: #ffffff; z-index: 11; }
|
||||
body.wsite-native-mobile-editor #header, body.wsite-checkout-page #header { position: absolute; }
|
||||
.splash-page #header { padding-top: 0; }
|
||||
#sitename { margin: 0 60px; vertical-align: middle; display: table-cell; }
|
||||
.wsite-logo a { font-size: 1.5em; }
|
||||
.wsite-logo #wsite-title { font-size: 1em !important; }
|
||||
.wsite-logo { margin: 3px 54px 0 0; }
|
||||
.landing-page .banner-wrap { height: auto; }
|
||||
.wsite-logo a img { margin: 0 !important; max-height: 45px; max-width: 170px; }
|
||||
#banner h2 { font-size: 3em !important; line-height: 1; }
|
||||
#banner h2 span, #banner h2 span font { font-size: inherit !important; }
|
||||
#banner div.paragraph { font-size: 1em; }
|
||||
#banner p { font-size: 1em; }
|
||||
.banner-wrap .wsite-button-inner, .wsite-editor .banner-wrap .wsite-button-inner { font-size: 0.8em; }
|
||||
#banner div.paragraph > span:before { padding-top: 25px; }
|
||||
#banner p > span:before { padding-top: 25px; }
|
||||
.banner-wrap .button-wrap > div:before { padding-top: 35px; }
|
||||
.splash-page .spacer { height: 0; }
|
||||
.column-blog { width: 100%; }
|
||||
.blog-sidebar-separator { padding: 0; }
|
||||
#commentPostDiv .field input[type=text] { height: 40px; line-height: 20px; padding: 0 10px; box-sizing: border-box; }
|
||||
.mousetrap { width: auto !important; }
|
||||
#wrapper iframe#content img { max-width: 100%; }
|
||||
#wsite-com-product-sku { font-size: 1em; float: none; padding-bottom: 5px; }
|
||||
#wsite-mini-cart { width: auto; margin: 10px; z-index: 11; }
|
||||
#wsite-com-checkout-list th, #wsite-com-checkout-summary-list th, #wsite-com-checkout-list .wsite-com-checkout-item-heading a, #wsite-com-checkout-summary-list .wsite-com-checkout-item-heading a, #wsite-com-checkout-list th, #wsite-com-checkout-summary-list th, #wsite-com-checkout-list td, #wsite-com-checkout-summary-list td, #wsite-com-checkout-cart-footer, .wsite-checkout-button .wsite-button-inner { font-size: 0.8em; }
|
||||
.wsite-com-checkout-item-image { max-width: 90%; height: auto; }
|
||||
#wsite-com-checkout-list .wsite-remove-button, #wsite-com-checkout-summary-list .wsite-remove-button { left: 0; margin-left: 0; top: 10px; }
|
||||
#wsite-com-checkout-list .wsite-com-checkout-item-image { width: 40px; height: 40px; }
|
||||
#wsite-mini-cart { bottom: 0; top: auto !important; opacity: 1 !important; position: fixed !important; margin: 0; border-radius: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
|
||||
#wsite-mini-cart.full { display: block !important; }
|
||||
.wsite-product-list li { display: none !important; }
|
||||
#wsite-mini-cart.arrow-top-left:after, #wsite-mini-cart.arrow-top-left:before { border: none; }
|
||||
h2.wsite-checkout-header { padding-bottom: 5px; }
|
||||
#wsite-mini-cart .wsite-product-image { padding: 10px; }
|
||||
body.menu-open #wsite-mini-cart { bottom: -70px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
|
||||
.wsite-product-list { display: none !important; }
|
||||
#wsite-search-form-container { float: none; }
|
||||
#wsite-search-query { font-size: 1.25em; }
|
||||
#wsite-search-sidebar { display: none; }
|
||||
#wsite-search-results, #wsite-search-product-results .wsite-search-product-result { width: 100%; }
|
||||
.wsite-input { height: 40px; padding: 2px 10px; }
|
||||
.wsite-com-column-group.wsite-com-category-product-featured-group .wsite-com-column, #wsite-com-store .wsite-com-category-product-group .wsite-com-column { width: 50% !important; }
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#wsite-com-store #close { display: none !important; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.wsite-section-elements { overflow: hidden; }
|
||||
#navmobile ul { width: 100% !important; }
|
||||
.wsite-logo a { font-size: 1.25em; }
|
||||
.wsite-multicol-col { max-width: 100% !important; display: block; width: auto !important; margin: 0 auto 1em !important; }
|
||||
.wsite-section { height: auto !important; }
|
||||
#banner h2 { font-size: 2em !important; }
|
||||
.banner-wrap .button-wrap > div:before { padding-top: 30px; }
|
||||
#wsite-com-product-info { margin: 0; }
|
||||
#blogTable > tbody > tr > td { display: block !important; width: 100% !important; margin: 0 auto; padding: 0 !important; }
|
||||
.blog-body { float: none !important; }
|
||||
.blog-header { text-align: left; }
|
||||
.blog-sidebar .column-blog { width: 100%; float: none; padding-top: 3em; border-top: 1px solid ; }
|
||||
.galleryCaptionHolder { top: 0; }
|
||||
.imageGallery .galleryCaptionInnerText div.paragraph, .imageGallery .galleryCaptionInnerText { font-size: 1.2em; line-height: 19px; font-weight: 200; }
|
||||
.imageGallery .galleryCaptionInnerText p, .imageGallery .galleryCaptionInnerText { font-size: 1.2em; line-height: 19px; font-weight: 200; }
|
||||
.galleryCaptionHolder { display: none; }
|
||||
.fullwidth-mobile .galleryCaptionHolder { display: block; }
|
||||
.fullwidth-mobile { width: 100% !important; }
|
||||
.fullwidth-mobile > div { margin: 5px 0 !important; }
|
||||
.fancybox-overlay { background: #f9f9f9 !important; }
|
||||
.fancybox-opened .fancybox-skin { box-shadow: none; height: 100% !important; padding: 0 0 10% !important; background: transparent; }
|
||||
div.fancybox-wrap.fancybox-mobile.fancybox-type-image.fancybox-opened { height: 100% !important; padding-top: 50px; }
|
||||
a.fancybox-item.fancybox-close { display: none; }
|
||||
.fancybox-overlay:after, .fancybox-overlay:before, .fancybox-overlay-fixed.fancybox-overlay:after, .fancybox-overlay-fixed.fancybox-overlay:before, .fancybox-overlay:before, .fancybox-overlay:after { content: ''; width: 25px; height: 3px; position: fixed; top: 21px; right: 10px; background: #415161; z-index: 11; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
|
||||
.fancybox-overlay-fixed.fancybox-overlay:before, .fancybox-overlay:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
|
||||
.fancybox-wrap { top: 0 !important; position: fixed !important; display: table !important; }
|
||||
.fancybox-wrap > div { display: table-cell !important; vertical-align: middle !important; padding-top: 60px !important; text-align: center; border-radius: 0; }
|
||||
.fancybox-inner { margin: 0 auto; width: 100% !important; height: auto !important; }
|
||||
.fancybox-nav, .fancybox-nav:active, .fancybox-nav:focus { right: 0px !important; display: none !important; }
|
||||
.fancybox-close { top: 10px; right: 10px; }
|
||||
.fancybox-opened ~ #wsite-mini-cart { display: none; }
|
||||
#fancybox-thumbs.bottom { bottom: 0; background: #f9f9f9; padding: 10px 0; }
|
||||
.wsite-name-field .wsite-form-input-first-name, .wsite-name-field .wsite-form-input-last-name { width: 100%; }
|
||||
#wsite-com-product-images { width: 100%; padding-bottom: 15px; }
|
||||
#wsite-com-product-info { margin-left: 0; }
|
||||
#wsite-com-product-images a div { padding-right: 0px; }
|
||||
#wsite-com-store .wsite-com-category-subcategory-group .wsite-com-column, #wsite-com-store .wsite-com-category-product-featured-group .wsite-com-column, #wsite-com-store .wsite-com-category-product-group .wsite-com-column { width: 50% !important; }
|
||||
.wsite-com-content { width: 100%; margin-left: 0; }
|
||||
.wsite-com-category-subcategory-name-text { font-size: 0.85em; }
|
||||
.wsite-com-category-subcategory-name { top: 0; }
|
||||
#wsite-com-product-list { padding-top: 20px; }
|
||||
#wsite-com-store .wsite-com-sidebar { width: 100%; float: none !important; padding: 0 !important; text-align: center; position: relative; z-index: 10; margin: 0 auto 15px; cursor: pointer; min-height: 40px; background: #5199a8; }
|
||||
#wsite-com-store .wsite-com-sidebar:before { content: 'VIEW ALL CATEGORIES \25be'; padding: 0; text-align: center; font-weight: 900 !important; text-transform: uppercase; color: white; padding: 10px 18px; display: block; }
|
||||
#wsite-com-store .sidebar-expanded.wsite-com-sidebar:before { content: 'CLOSE \25b4'; }
|
||||
#wsite-com-store .sidebar-expanded { cursor: pointer; }
|
||||
#wsite-com-store .wsite-com-content-with-sidebar { margin-left: 0 !important; padding: 0 !important; }
|
||||
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy > ul { width: 100%; padding: 1.5em 0 !important; }
|
||||
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy { width: 100%; max-height: 0px; overflow: hidden; margin: 0 auto; display: block; -webkit-transition: max-height 350ms linear; -moz-transition: max-height 350ms linear; -o-transition: max-height 350ms linear; -ms-transition: max-height 350ms linear; transition: max-height 350ms linear; }
|
||||
#wsite-com-store .sidebar-expanded #wsite-com-hierarchy { max-height: 8000px !important; margin: 0 auto .25em; }
|
||||
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy a, #wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy { color: white; }
|
||||
#wsite-com-hierarchy .wsite-selected { font-weight: bold; color: #fff; }
|
||||
.wsite-com-checkout-payment-column, .wsite-com-checkout-summary-column { display: block !important; width: auto !important; max-width: 100% !important; margin: 0 auto 1em !important; }
|
||||
#wsite-com-checkout-list .wsite-coupon-input, #wsite-com-checkout-summary-list .wsite-coupon-input { width: 120px; margin: 0; }
|
||||
#wsite-com-checkout-cart-footer { text-align: center; }
|
||||
.wsite-com-continue-shopping { display: block; margin: 0 auto 5px; }
|
||||
#wsite-com-checkout-cart-footer form { float: none !important; }
|
||||
.wsite-com-continue-shopping .caret { vertical-align: middle; }
|
||||
#wsite-com-checkout-payment-order { margin-left: 0; }
|
||||
}
|
||||
|
||||
div.paragraph ul, div.paragraph ol { padding-left: 3em !important; margin: 5px 0 !important; }
|
||||
div.paragraph li { padding-left: 5px !important; margin: 3px 0 0 !important; }
|
||||
div.paragraph ul, div.paragraph ul li { list-style: disc outside !important; }
|
||||
div.paragraph ol, div.paragraph ol li { list-style: decimal outside !important; }
|
||||
95
files/theme/files/custom.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
jQuery(function($) {
|
||||
|
||||
// Define Theme specific functions
|
||||
var Theme = {
|
||||
// Swiping mobile galleries wwith Hammer.js
|
||||
swipeGallery: function() {
|
||||
setTimeout(function() {
|
||||
var touchGallery = document.getElementsByClassName("fancybox-wrap")[0];
|
||||
var mc = new Hammer(touchGallery);
|
||||
mc.on("panleft panright", function(ev) {
|
||||
if (ev.type == "panleft") {
|
||||
$("a.fancybox-next").trigger("click");
|
||||
} else if (ev.type == "panright") {
|
||||
$("a.fancybox-prev").trigger("click");
|
||||
}
|
||||
Theme.swipeGallery();
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
swipeInit: function() {
|
||||
if ('ontouchstart' in window) {
|
||||
$("body").on("click", "a.w-fancybox", function() {
|
||||
Theme.swipeGallery();
|
||||
});
|
||||
}
|
||||
// Add fullwidth class to gallery thumbs if less than 6
|
||||
$('.imageGallery').each(function(){
|
||||
if ($(this).children('div').length <= 6) {
|
||||
$(this).children('div').addClass('fullwidth-mobile');
|
||||
}
|
||||
});
|
||||
},
|
||||
toggleClick: function(click, target, classname){
|
||||
$(click).click(function(){
|
||||
$(target).toggleClass(classname);
|
||||
});
|
||||
},
|
||||
// Interval function to execute post-post-load events
|
||||
interval: function(condition, action, duration, limit) {
|
||||
var counter = 0;
|
||||
var looper = setInterval(function(){
|
||||
if (counter >= limit || Theme.checkElement(condition)) {
|
||||
clearInterval(looper);
|
||||
} else {
|
||||
action();
|
||||
counter++;
|
||||
}
|
||||
}, duration);
|
||||
},
|
||||
checkElement: function(selector) {
|
||||
return $(selector).length;
|
||||
},
|
||||
moveLogin: function() {
|
||||
var login = $("#member-login");
|
||||
login.detach().appendTo("#navmobile .wsite-menu-default");
|
||||
},
|
||||
setPosition: function(){
|
||||
$("#wrapper").height() < $(window).height() ? $("#wrapper").css({"position": "absolute"}) : $("#wrapper").css({"position": "relative"});
|
||||
},
|
||||
cartDisplay: function() {
|
||||
if (Number($('#wsite-nav-cart-num').text()) > 0 ) {
|
||||
$('#wsite-mini-cart').addClass('full');
|
||||
$('#footer').addClass('footer-full');
|
||||
}
|
||||
else {
|
||||
$('#wsite-mini-cart').removeClass('full');
|
||||
$('#footer').removeClass('footer-full');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$("body").addClass("postload");
|
||||
Theme.swipeInit();
|
||||
Theme.toggleClick(".wsite-com-sidebar", ".wsite-com-sidebar", "sidebar-expanded");
|
||||
Theme.toggleClick(".hamburger", "body", "menu-open");
|
||||
Theme.interval("#wsite-mini-cart.full", Theme.cartDisplay, 800, 10);
|
||||
$('.wsite-product-button, #wsite-com-product-add-to-cart, .wsite-product-item .wsite-remove-button').on('click', function(){
|
||||
setTimeout(function() { Theme.cartDisplay(); }, 800);
|
||||
});
|
||||
$(".navmobile-wrapper").css({ "padding-top" : $("#header").outerHeight() + 20 + "px"});
|
||||
if ($(window).width() <= 1024) {
|
||||
Theme.moveLogin();
|
||||
Theme.setPosition();
|
||||
// Add fullwidth class to gallery thumbs if less than 6
|
||||
$('.imageGallery').each(function(){
|
||||
if ($(this).children('div').length <= 6) {
|
||||
$(this).children('div').addClass('fullwidth-mobile');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
BIN
files/theme/files/images/blue_icons.png
Normal file
|
After Width: | Height: | Size: 6.5 KiB |
BIN
files/theme/files/images/default_header.jpg
Normal file
|
After Width: | Height: | Size: 226 KiB |
BIN
files/theme/files/images/default_icons.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
files/theme/files/images/downarrow.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
files/theme/files/images/green_icons.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
files/theme/files/images/orange_icons.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
files/theme/files/images/pink_icons.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
files/theme/files/images/red_icons.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
files/theme/files/images/social_icons.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
files/theme/files/images/teal_icons.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
files/theme/files/images/yellow_icons.png
Normal file
|
After Width: | Height: | Size: 6.5 KiB |
62
files/theme/files/manifest.json
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
{
|
||||
"responsive": true,
|
||||
"glyph-icons": true,
|
||||
"description": "Clean Lines is a true universal theme, and lives up to its name with a design that's crisp and professional. Clean Lines makes an impact with full-width-headers and classy color palettes. With both dark and light color schemes, Clean Lines is a beautifully styled blank slate for your brand to build on. Perfect for shops, consultants, nutritionists, and service businesses.",
|
||||
"enableEditorJS": true,
|
||||
"features": [
|
||||
"responsive",
|
||||
"full-width-headers",
|
||||
"light-dark-palletes",
|
||||
"css-buttons",
|
||||
"social-icons",
|
||||
"navigation-top",
|
||||
"color-palettes"
|
||||
],
|
||||
"variations": [
|
||||
{
|
||||
"value": "teal",
|
||||
"sample": "#5199a8",
|
||||
"is-dark": false
|
||||
},
|
||||
{
|
||||
"value": "orange",
|
||||
"sample": "#ff9a22",
|
||||
"is-dark": true
|
||||
},
|
||||
{
|
||||
"value": "red",
|
||||
"sample": "#f64c3f",
|
||||
"is-dark": false
|
||||
},
|
||||
{
|
||||
"value": "pink",
|
||||
"sample": "#ff7f6e",
|
||||
"is-dark": true
|
||||
},
|
||||
{
|
||||
"value": "green",
|
||||
"sample": "#52ae8c",
|
||||
"is-dark": true
|
||||
},
|
||||
{
|
||||
"value": "blue",
|
||||
"sample": "#5b72dc",
|
||||
"is-dark": false
|
||||
},
|
||||
{
|
||||
"value": "yellow",
|
||||
"sample": "#dea227",
|
||||
"is-dark": false
|
||||
}
|
||||
],
|
||||
"custom-options" : [
|
||||
{
|
||||
"name" : "full-width",
|
||||
"title": "Full Width",
|
||||
"type" : "toggle",
|
||||
"default" : true,
|
||||
"is-body-class" : true,
|
||||
"is-less-var" : false
|
||||
}
|
||||
]
|
||||
}
|
||||
426
files/theme/files/mobile.js
Normal file
|
|
@ -0,0 +1,426 @@
|
|||
//// mobile.js submenu nav - all below
|
||||
Weebly = Weebly || {};
|
||||
|
||||
Weebly.mobile_navigation = (function($) {
|
||||
|
||||
var isOpen = false,
|
||||
isMoving = false,
|
||||
supportsTouch = false,
|
||||
pendingResizeData = null,
|
||||
isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false),
|
||||
supports3D = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()),
|
||||
supportsTouch = false,
|
||||
menuOffsetY = 0,
|
||||
$menuWrapper, $menu, $body, supports3D;
|
||||
|
||||
|
||||
/**
|
||||
* Add a css transition
|
||||
*
|
||||
* @param jquery $o object to animate
|
||||
* @param string property a css transitionable property
|
||||
* @param number speed the ms speed of animation
|
||||
* @param function cb callback function after animation completes
|
||||
* @return undefined
|
||||
*/
|
||||
|
||||
var addTransition = function($o, property, speed, cb) {
|
||||
if (!speed) {
|
||||
speed = 500;
|
||||
}
|
||||
|
||||
$o.css({
|
||||
webkitTransitionDuration: speed + 'ms',
|
||||
webkitTransitionProperty: property,
|
||||
webkitTransitionTimingFunction: 'linear'
|
||||
});
|
||||
|
||||
var onTransistionEnd = function(e) {
|
||||
$o.off('webkitTransitionEnd', onTransistionEnd);
|
||||
|
||||
$o.css({
|
||||
webkitTransitionDuration: '',
|
||||
webkitTransitionProperty: '',
|
||||
webkitTransitionTimingFunction: ''
|
||||
});
|
||||
|
||||
cb();
|
||||
}
|
||||
|
||||
|
||||
|
||||
$o.on('webkitTransitionEnd', onTransistionEnd);
|
||||
};
|
||||
|
||||
/**
|
||||
* Utility animate function for css transitions
|
||||
*
|
||||
* @param jquery $o object to animate
|
||||
* @param object from css properties to animate from
|
||||
* @param object to css properties to animate to
|
||||
* @param number speed the ms speed of animation
|
||||
* @param function cb callback function after animation completes
|
||||
* @return undefined
|
||||
*/
|
||||
var animate = function($o, from, to, speed, cb) {
|
||||
if (!speed) {
|
||||
speed = 500;
|
||||
}
|
||||
if (supports3D) {
|
||||
|
||||
$o.css({
|
||||
webkitTransitionDuration: '0ms'
|
||||
});
|
||||
$o.css(from);
|
||||
|
||||
setTimeout(function() {
|
||||
addTransition($o, 'all', speed, cb);
|
||||
|
||||
var props = {};
|
||||
for (property in to) {
|
||||
if (!to.hasOwnProperty(property)) {
|
||||
continue;
|
||||
}
|
||||
props[property] = to[property];
|
||||
}
|
||||
$o.css(props);
|
||||
}, 0);
|
||||
} else {
|
||||
//jquery.animate isn't working too well here, disable for now
|
||||
to.avoidCSSTransitions = true;
|
||||
$o.animate(to, {
|
||||
duration: speed,
|
||||
complete: cb
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Controls the menu effect when a menu button is tapped
|
||||
*
|
||||
* @param event e event handler
|
||||
* @return undefined
|
||||
*/
|
||||
var menuTap = function(e) {
|
||||
var menuHeight = '100%',
|
||||
effectStart, effectEnd, fromCSS, toCSS;
|
||||
|
||||
if (isMoving) {
|
||||
return;
|
||||
}
|
||||
|
||||
isOpen = !isOpen;
|
||||
|
||||
isMoving = true;
|
||||
|
||||
if (isOpen) {
|
||||
$body.addClass('menu-open');
|
||||
}
|
||||
|
||||
var cb = function() {
|
||||
isMoving = false;
|
||||
|
||||
if (!isOpen) {
|
||||
$body.removeClass('menu-open');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Tweens the menu left or right
|
||||
*
|
||||
* @param jquery $oldSlide the current slide being moved out
|
||||
* @param jquery $newSlide the new slide being moved in
|
||||
* @param bool rightToLeft move to the right if true, left if false
|
||||
* @return undefined
|
||||
*/
|
||||
var tweenMenu = function($oldSlide, $newSlide, rightToLeft) {
|
||||
var $animContainer = $('.wsite-animation-wrap', $menu),
|
||||
sign = (rightToLeft) ? 1 : -1;
|
||||
|
||||
if (isMoving) {
|
||||
return;
|
||||
}
|
||||
|
||||
isMoving = true;
|
||||
|
||||
var menuWidth = $menu.width();
|
||||
|
||||
var toX = -sign * menuWidth + 'px';
|
||||
|
||||
var fromCSS = {
|
||||
'-webkit-transform': 'translate3d( 0, 0px, 0)'
|
||||
};
|
||||
|
||||
var toCSS = {
|
||||
'-webkit-transform': 'translate3d(' + toX + ', 0px, 0)'
|
||||
};
|
||||
|
||||
if (supports3D) {
|
||||
$newSlide.css({
|
||||
'-webkit-transform': 'translate3d(' + (sign * menuWidth) + 'px, 0px, 0)'
|
||||
});
|
||||
} else {
|
||||
$newSlide.css({
|
||||
'left': (sign * menuWidth) + 'px'
|
||||
});
|
||||
|
||||
fromCSS = {
|
||||
left: 0
|
||||
};
|
||||
toCSS = {
|
||||
left: toX
|
||||
};
|
||||
}
|
||||
|
||||
$newSlide.show();
|
||||
|
||||
var cb = function() {
|
||||
$oldSlide.hide();
|
||||
$animContainer.css(fromCSS);
|
||||
$newSlide.css(fromCSS);
|
||||
|
||||
isMoving = false;
|
||||
};
|
||||
|
||||
animate($animContainer, fromCSS, toCSS, 300, cb);
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds a an active state css class so that button presses
|
||||
* can be styled
|
||||
*
|
||||
* @param jquery $element element(s) to add state to
|
||||
* @param string tagName selector to filter dom elemenets
|
||||
* @return undefined
|
||||
*/
|
||||
var addActiveState = function($element, tagName) {
|
||||
$element.on('touchstart', tagName, function(ev) {
|
||||
$(this).addClass('active');
|
||||
});
|
||||
$element.on('touchend', tagName, function(ev) {
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Measures the size of the content area to try and place footer
|
||||
* fixed at the bottom of the screen if the screen space is larger
|
||||
*
|
||||
* @return undefined
|
||||
*/
|
||||
var resizeContentWindow = function() {};
|
||||
|
||||
|
||||
/**
|
||||
* Resizes the vertical height of the mobile menu
|
||||
*
|
||||
* @return undefined
|
||||
*/
|
||||
var resizeMenu = function() {
|
||||
if (!$menu) {
|
||||
return;
|
||||
}
|
||||
var menuHeight = $menu.find('.wsite-menu-slide:visible').outerHeight();
|
||||
if (menuHeight > 0) {
|
||||
$menu.css({
|
||||
height: '100%',
|
||||
'overflow-y': 'auto',
|
||||
'-webkit-overflow-scrolling': 'touch'
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Inits the body to detect touch support
|
||||
*
|
||||
* @return undefined
|
||||
*/
|
||||
var initBody = function() {
|
||||
$body = $('body');
|
||||
|
||||
if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
|
||||
$body.removeClass('no-touch');
|
||||
$body.addClass('touch');
|
||||
supportsTouch = true;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Inits the mobile menu structure
|
||||
*
|
||||
* @return undefined
|
||||
*/
|
||||
|
||||
var initMenu = function() {
|
||||
var $sideMenus = $('#navmobile .wsite-menu-wrap'),
|
||||
$headerUl, $sliderContainer;
|
||||
|
||||
$headerUl = $('#navmobile .wsite-menu-default');
|
||||
|
||||
$headerUl.wrap('<div class="wsite-mobile-menu" />');
|
||||
$menu = $headerUl.up('.wsite-mobile-menu');
|
||||
$menuWrapper = $headerUl.up('#wrapper');
|
||||
$menuWrapper = ($menuWrapper.length > 0) ? $menuWrapper : $menu;
|
||||
|
||||
isOpen = false;
|
||||
isMoving = false;
|
||||
|
||||
var slideCSS = {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
};
|
||||
|
||||
// something to select on
|
||||
$headerUl.addClass('wsite-menu-slide').css(slideCSS);
|
||||
$sideMenus.addClass('wsite-menu-slide').css(slideCSS);
|
||||
|
||||
// new css settings can cause jarring while animations render,
|
||||
// set the settings here even though they don't really 'do anything'
|
||||
$headerUl.css({
|
||||
'left': '0'
|
||||
});
|
||||
if (supports3D) {
|
||||
$headerUl.css({
|
||||
'-webkit-transform': 'translate3d( 0, 0px, 0)'
|
||||
});
|
||||
}
|
||||
|
||||
$menu.append('<div class="wsite-animation-wrap"></div>');
|
||||
$sliderContainer = $('.wsite-animation-wrap', $menu);
|
||||
$sliderContainer.css({
|
||||
position: 'relative',
|
||||
height: '100%'
|
||||
});
|
||||
if (supports3D) {
|
||||
$sliderContainer.css({
|
||||
'-webkit-backface-visibility': 'hidden'
|
||||
});
|
||||
}
|
||||
$sliderContainer.append($headerUl);
|
||||
|
||||
$sideMenus.each(function() {
|
||||
var $sideMenu = $(this),
|
||||
$parentAnchor = $sideMenu.prev(),
|
||||
$ul = $sideMenu.children('ul'),
|
||||
$previousMenu = $sideMenu.parents('.wsite-menu-slide');
|
||||
|
||||
var $backLink = $('<li class="wsite-menu-back-item">' + '<a><span class="wsite-menu-mobile-arrow"></span><span class="wsite-menu-back">Back</span></a>' + '</li>');
|
||||
$backLink.unbind("click");
|
||||
$backLink.on('click', function(ev) {
|
||||
tweenMenu($sideMenu, $previousMenu, false);
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
if ($parentAnchor.attr("href")) {
|
||||
var $sideMenuRoot = $parentAnchor.clone(true, true);
|
||||
var $rootLink = $('<li class="wsite-menu-master-item"></li>').html($sideMenuRoot);
|
||||
}
|
||||
|
||||
$ul.prepend($rootLink);
|
||||
$ul.prepend($backLink);
|
||||
|
||||
$parentAnchor.unbind( "click" );
|
||||
$parentAnchor.append('<span class="wsite-menu-mobile-arrow"></span>');
|
||||
$parentAnchor.on('click', function(ev) {
|
||||
tweenMenu($previousMenu, $sideMenu, true);
|
||||
return false;
|
||||
});
|
||||
|
||||
$sideMenu.css({
|
||||
'left': '0'
|
||||
});
|
||||
if (supports3D) {
|
||||
$sideMenu.css({
|
||||
'-webkit-transform': 'translate3d( 0, 0px, 0)'
|
||||
});
|
||||
}
|
||||
|
||||
$sliderContainer.append($sideMenu);
|
||||
});
|
||||
|
||||
$menu.css({
|
||||
'display': 'block'
|
||||
});
|
||||
$menuWrapper.css({
|
||||
'display': 'block'
|
||||
});
|
||||
resizeMenu();
|
||||
|
||||
// prefer active state classes over html active
|
||||
if (supportsTouch) {
|
||||
addActiveState($('.wsite-home-link'));
|
||||
addActiveState($menu, 'a');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Close the menu
|
||||
*
|
||||
* @return undefined
|
||||
*/
|
||||
var closeMenu = function() {
|
||||
if (isOpen) {
|
||||
menuTap(null);
|
||||
}
|
||||
};
|
||||
|
||||
var isMenuOpen = function() {
|
||||
return isOpen;
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
$body = $('#icontent');
|
||||
$body = ($body.length > 0) ? $body : $('body');
|
||||
|
||||
// May be able to dump this flag in the future,
|
||||
// but fixing 3d transition flickering issues was in theme css
|
||||
if (!$body.hasClass('wsite-render3d')) {
|
||||
supports3D = false;
|
||||
}
|
||||
|
||||
initMenu();
|
||||
};
|
||||
|
||||
if (!Weebly.mobile) {
|
||||
// reset iframe content sizes
|
||||
$(window).on("message", function(event) {
|
||||
if (!event.origin || event.origin.indexOf('weebly.com') === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
pendingResizeData = event.data;
|
||||
});
|
||||
}
|
||||
|
||||
// dom ready
|
||||
$(function() {
|
||||
|
||||
setTimeout(function(){
|
||||
initBody();
|
||||
init();
|
||||
}, 1000);
|
||||
|
||||
if (window.FastClick) {
|
||||
FastClick.attach($('.wsite-mobile-menu')[0]);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return {
|
||||
init: init,
|
||||
closeMenu: closeMenu,
|
||||
resizeScreen: resizeContentWindow,
|
||||
resizeMenu: resizeMenu,
|
||||
menuTap: menuTap,
|
||||
isMenuOpen: isMenuOpen
|
||||
};
|
||||
|
||||
}(Weebly.jQuery));
|
||||