Page Menu
Home
In-Portal Phabricator
Search
Configure Global Search
Log In
Files
F847477
modern-store
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Fri, Apr 18, 6:00 PM
Size
43 KB
Mime Type
text/x-diff
Expires
Sun, Apr 20, 6:00 PM (9 h, 23 m)
Engine
blob
Format
Raw Data
Handle
602329
Attached To
rTMST Themes.Modern-Store
modern-store
View Options
Index: branches/1.0.x/inc/styles.css
===================================================================
--- branches/1.0.x/inc/styles.css (revision 14899)
+++ branches/1.0.x/inc/styles.css (revision 14900)
@@ -1,1181 +1,1181 @@
@charset "UTF-8";
/* Basic Blocks
*******************************************************************************/
html {
min-width: 1000px;
}
body {
background: #fff url(@templates_base@/img/bg-header.jpg) repeat-y 0 0;
color: #3c3c3c;
font: 0.813em/1.231em Arial,Verdana,Tahoma,Sans-Serif;
}
img { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td { padding: 0; vertical-align: top; }
a, a:hover, a:focus { color: #333; outline: none; text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }
.clear { clear: both !important; }
.fix { border: 1px solid #f00; }
/* Header
*******************************************************************************/
#header {
margin: 0 auto;
width: 960px;
}
#header .logo {
float: left;
padding: 18px 0;
}
#header .infoblock {
float: right;
position: relative;
width: 580px;
}
#header .infoblock .welcome {
color: #343338;
float: right;
padding: 9px 0;
position: relative;
}
#header .infoblock .welcome div { float: left; }
#header .infoblock .welcome .txt { padding: 0 0 0 20px; }
#header .infoblock .welcome .logged { padding-top: 5px; }
#header .infoblock .welcome .txt a { font-weight: bold; }
#header .infoblock .welcome .lang .with-icon {
background: url(@templates_base@/img/lang/eng.gif) no-repeat 10px 7px;
padding: 5px 10px 10px 35px;
}
#header .infoblock .welcome .lang .without-icon {
padding: 5px 10px 10px 10px;
}
#header .infoblock .welcome .txt,
#header .infoblock .welcome .lang,
#header .infoblock .welcome .currency,
#header .infoblock .welcome .profile-menu {
position: relative;
}
#header .infoblock .welcome .profile-menu { margin-left: 10px; margin-right: 10px; }
#header .infoblock .welcome .txt .login,
#header .infoblock .welcome .currency .cur,
#header .infoblock .welcome .profile-menu .link {
padding: 5px 10px 10px;
}
#header .infoblock .welcome .currency { margin-left: 5px; }
#header .infoblock .welcome .currency .cur.plashka-sel { margin-left: -1px; }
a#lang,
a#currency,
a#profile {
background: url(@templates_base@/img/icon-select.gif) no-repeat 100% 6px;
display: block;
padding: 0 12px 0 0;
text-decoration: none;
}
#header .infoblock .cart {
background: url(@templates_base@/img/bg-cart.jpg) no-repeat 100% 0;
float: left;
font-size: 1.154em;
font-weight: bold;
padding: 15px 0;
}
#header .infoblock .cart span,
#header .infoblock .cart a { float: left; }
#header .infoblock .cart a {
background: url(@templates_base@/img/icon-checkout.gif) no-repeat 100% 12px;
color: #75b833;
line-height: 33px;
padding: 0 12px 0 0;
text-decoration: none;
}
#header .infoblock .cart i {
font-size: 0.733em;
}
#header .infoblock .cart .items {
background: url(@templates_base@/img/icon-cart.png) no-repeat 0 0;
line-height: 33px;
padding: 0 0 0 50px;
}
#header .infoblock .cart .delim {
color: #b5b5b5;
font-weight: normal;
line-height: 33px;
padding: 0 15px;
}
#header .infoblock .cart .phone {
color: #535353;
font: bold 1.385em Tahoma,Arial,Verdana,Sans-Serif;
line-height: 33px;
padding-right: 50px;
}
#header .infoblock .welcome .lang #lang-sel a {
text-decoration: underline;
}
#header .infoblock .welcome .lang #lang-sel .eng {
background: url(@templates_base@/img/lang/eng.gif) no-repeat 0 0;
padding: 0 0 0 25px;
}
#header .infoblock .welcome .lang #lang-sel .deutch {
background: url(@templates_base@/img/lang/deutch.gif) no-repeat 0 0;
padding: 0 0 0 25px;
}
#header .infoblock .welcome .lang #lang-sel .rus {
background: url(@templates_base@/img/lang/rus.gif) no-repeat 0 0;
padding: 0 0 0 25px;
}
.plashka {
background-color: #fff;
border: 1px solid #d0d0d0;
display: none;
padding: 10px 20px 5px;
position: absolute;
top: 31px;
right: -1px;
z-index: 95;
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-topright: 0;
border-radius: 5px;
border-top-right-radius: 0;
-moz-box-shadow: 0 0 8px #ccc;
-webkit-box-shadow: 0 0 8px #ccc;
box-shadow: 0 0 8px #ccc;
}
.plashka-sel {
background-color: #fff !important;
border: 1px solid #d0d0d0;
border-bottom: 1px solid #fff;
margin: -1px -1px 0 0;
position: relative;
z-index: 96;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-box-shadow: #ccc 0 -3px 8px -1px;
-webkit-box-shadow: #ccc 0 -3px 8px -1px;
box-shadow: #ccc 0 -3px 8px -1px;
}
#header .infoblock .welcome .plashka li {
padding: 0 0 5px;
white-space: nowrap;
}
#header .infoblock .welcome .plashka .active { color: #2d85d6; }
#header .infoblock .welcome .txt .plashka,
#header .infoblock .welcome .profile-menu .plashka { right: 0; }
.plashka-sel a#lang,
.plashka-sel a#currency,
.plashka-sel a#profile {
background: url(@templates_base@/img/icon-close.gif) no-repeat 100% 6px;
}
#header .infoblock .welcome .login,
.login-alt .login {
display: inline-block;
float: none;
}
.login-alt .login { font-size: 0.867em; padding-left: 5px; }
#header .infoblock .welcome .login a,
.login-alt .login a {
background: url(@templates_base@/img/bg-button-login.jpg) no-repeat 0 0;
display: block;
height: 18px;
text-align: center;
text-decoration: none;
width: 61px;
}
#header .infoblock .welcome .txt .login.plashka-sel,
.login-alt .login.plashka-sel {
margin-left: 4px;
margin-bottom: 1px;
padding: 5px 18px 10px;
}
.login-alt .login.plashka-sel { padding: 5px 10px 10px; }
#header .infoblock .welcome .login.plashka-sel a,
.login-alt .login.plashka-sel a {
background: none;
height: auto;
width: auto;
}
.icon-close { right: 10px; position: absolute; }
/*** Menu ***/
.menu {
background: #3e3e3e url(@templates_base@/img/bg-menu.jpg) repeat-x 0 0;
height: 46px;
position: relative;
width: 100%;
}
.menu .padding {
margin: 0 auto;
width: 960px;
}
.menu ul {
float: left;
width: 740px;
}
.menu ul li {
color: #fff;
float: left;
font-size: 1.154em;
font-weight: bold;
}
.menu ul li a {
color: #fff;
display: block;
line-height: 46px;
padding: 0 18px;
text-decoration: none;
}
.menu ul li a:hover,
.menu ul li a:focus {
background: #4b4b4b url(@templates_base@/img/bg-menu.jpg) repeat-x 0 -46px;
}
.menu ul li a.active {
background: #2d85d6 url(@templates_base@/img/bg-menu.jpg) repeat-x 0 -92px;
}
.menu .searchbox {
background: url(@templates_base@/img/bg-searchbox-l.jpg) no-repeat 0 0;
float: right;
margin-top: 10px;
text-align: right;
width: 210px;
}
.menu .searchbox input[type="text"] {
border: none;
background: #fff url(@templates_base@/img/bg-searchbox-r.jpg) no-repeat 100% 0;
height: 23px;
line-height: 23px;
padding-top: 2px;
width: 180px;
}
.level2 {
background-color: #fff;
left: 273px;
position: absolute;
z-index: 4000;
}
.level2-bg {
border: 1px solid #3e3e3e;
float: left;
width: auto;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 0 3px #444;
-moz-box-shadow: 0 0 3px #444;
-webkit-box-shadow: 0 0 3px #444;
}
#level2-menu {
background-color: #3e3e3e;
float: left;
padding: 8px 0;
width: 200px;
}
#level2-menu h3 {
background-color: #3e3e3e;
padding: 7px 12px;
white-space: nowrap;
}
#level2-menu h3 a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
#level2-menu h3 a:hover {
text-decoration: underline;
}
#level2-menu ul {
width: 100%;
}
#level2-menu ul li {
background-color: #eaeaea;
font-size: 0.923em;
font-weight: normal;
width: 100%;
}
#level2-menu ul li a {
color: #3e3e3e;
line-height: 20px;
padding: 3px 13px 5px;
text-decoration: none;
}
#level2-menu ul li a:hover,
#level2-menu ul li a:focus {
background: none;
text-decoration: underline;
}
#level2-menu ul li a.active {
background: none;
}
#level2-menu ul li i {
background: url(@templates_base@/img/bullet-l3menu.png) no-repeat 22px 9px;
display: block;
padding: 0 0 0 20px;
white-space: nowrap;
}
#level2-menu ul li.level3-menu h4 {
padding-left: 20px;
white-space: nowrap;
}
#level2-menu ul li.level3-menu ul {
background-color: #fff;
}
#level2-menu ul li.level3-menu ul li {
background-color: #fff;
font-size: 0.917em;
}
#level2-menu ul li.level3-menu ul li a {
background: url(@templates_base@/img/bullet-l3menu.png) no-repeat 35px 4px;
line-height: 18px;
padding: 0 0 0 45px;
}
#level2-menu ul li.level3-menu ul li a.active { color: #2f7916; }
#level2-menu.ui-accordion .ui-accordion-content { overflow: hidden; }
#level2-menu.ui-accordion .ui-accordion-content-active { background-color: #eaeaea; }
#level2-menu .ui-icon-circle-arrow-l2e {
background: url(@templates_base@/img/bullet-l2menu.png) no-repeat 0 0;
height: 7px;
width: 4px;
}
#level2-menu .ui-icon-circle-arrow-l2s {
background: url(@templates_base@/img/bullet-l2menu.png) no-repeat 0 -7px;
height: 4px;
width: 7px;
}
#level2-menu .ui-icon-circle-arrow-l3e {
background: url(@templates_base@/img/bullet-l2menu.png) no-repeat 0 -11px;
height: 7px;
width: 4px;
}
#level2-menu .ui-icon-circle-arrow-l3s {
background: url(@templates_base@/img/bullet-l2menu.png) no-repeat 0 -18px;
height: 4px;
width: 7px;
}
#level-content {
background-color: #fff;
float: left;
padding: 15px;
width: 400px;
}
#level-content ul {
width: auto;
}
#level-content ul li {
background: url(@templates_base@/img/bullet-level5.png) no-repeat 0 7px;
float: left;
font-size: 1em;
font-weight: normal;
padding: 0 10px 7px 10px;
width: 180px;
}
#level-content ul li a {
color: #3c3c3c;
line-height: 20px;
padding: 0;
text-decoration: underline;
}
#level-content ul li a:hover,
#level-content ul li a:focus {
background: none;
color: #2a80d3;
}
#level-good {
background-color: #fff;
float: left;
padding: 15px;
text-align: center;
width: 120px;
}
#level-good .price { padding: 10px 0; }
/* Content
*******************************************************************************/
#content {
background-color: #f7f7f7;
padding: 32px 0;
width: 100%;
}
#content .padding {
margin: 0 auto;
position: relative;
width: 960px;
}
#content .block-fixed {
background-color: #fff;
border: 1px solid #d0d0d0;
padding: 13px 11px 0 11px;
position: absolute;
margin: 40px 0 0 -100px;
}
#content .block-fixed div { padding-bottom: 13px; }
.button-addtocart {
background: url(@templates_base@/img/button-addtocart-left.jpg) no-repeat 0 0;
color: #faffed;
display: inline-block;
font-size: 0.846em;
text-shadow: #000 0px 1px 1px;
text-decoration: none;
}
.button-addtocart span {
background: url(@templates_base@/img/button-addtocart-right.jpg) no-repeat 100% 0;
display: inline-block;
height: 40px;
padding: 5px 6px 0;
text-align: center;
}
.button-addtocart span i { display: block; margin-top: -4px; }
.button-addtocart:hover { color: #faffed; text-shadow: #000 0px 1px 1px; }
#content .leftcol {
float: left;
padding: 0 20px 0 0;
width: 230px;
}
#content .rightcol {
float: left;
padding: 0 0 0 20px;
width: 230px;
}
#content .contentcol {
float: left;
width: 710px;
}
.subscribe-block {
background: url(@templates_base@/img/subs.png) no-repeat 0 100%;
padding: 0 16px 11px 0;
width: 214px;
}
.subscribe-block h4 {
background: url(@templates_base@/img/subs-top.png) no-repeat 0 0;
font-size: 1.077em;
font-weight: bold;
padding: 14px 0 0 16px;
width: 214px;
}
.subscribe-block fieldset {
padding: 10px 0 0 16px;
text-align: left;
width: 214px;
}
input.field,
textarea.field,
select.field,
select.field-alt {
background: url(@templates_base@/img/bg-field.jpg) repeat-x 0 0;
border: 1px solid #828282;
height: 24px;
line-height: 24px;
margin-bottom: 5px;
padding: 0 5px;
}
select.field { padding: 0 0 0 5px; }
select.field-alt { margin: 0; padding: 0 0 0 5px; }
input.field:focus,
textarea.field:focus,
select.field-alt:focus,
select.field:focus { border: 1px solid #000; }
.form select.field { width: 360px; }
.form input.subsfield { width: 190px; }
/*** Block ***/
.block {
background: url(@templates_base@/img/bg-block-bottom.jpg) no-repeat 0 100%;
margin: 0 0 10px;
padding: 0 0 8px;
}
.block .block-top {
background: url(@templates_base@/img/bg-block-top.jpg) no-repeat 0 100%;
height: 8px;
width: 100%;
}
.block.no-border-bottom {
background: none;
padding: 0;
}
.block.block-margin { margin: 0 0 20px; }
.block h2 {
background: url(@templates_base@/img/h1-left.png) no-repeat 0 0;
height: 36px;
line-height: 36px;
padding-left: 14px;
position: relative;
z-index: 10;
}
.block h2 em,
.block h2 a {
color: #fefefe;
font-size: 1.154em;
font-weight: bold;
font-style: normal;
position: relative;
z-index: 150;
}
.block h2 a { text-decoration: underline; }
.block h2 i {
background: url(@templates_base@/img/bc-step.png) no-repeat 50% 50%;
padding: 0 15px;
}
.block h2 span {
background: url(@templates_base@/img/h1-right.png) no-repeat 100% 0;
height: 53px;
position: absolute;
top: -3px; right: -6px;
width: 136px;
z-index: 50;
}
.block h2 span.new { background: url(@templates_base@/img/h1-right-new.png) no-repeat 100% 0; }
.block h2 span.pick { background: url(@templates_base@/img/h1-right-pick.png) no-repeat 100% 0; }
.block h2 span.sale { background: url(@templates_base@/img/h1-right-sale.png) no-repeat 100% 0; }
.block h2 span.bullet { background: url(@templates_base@/img/h1-right-bullet.png) no-repeat 100% 0; }
.block.alt-block {
background: none;
}
.block.alt-block h2 {
background: url(@templates_base@/img/bg-block.png) no-repeat 0 0;
padding-left: 0;
}
.block.alt-block h2.active {
background-position: 0 100%;
}
.block.alt-block h2 a {
display: block;
height: 36px;
line-height: 36px;
padding-left: 14px;
text-decoration: none;
}
.block .block-content {
background-color: #fff;
border: 1px solid #d0d0d0;
border-top: none;
padding: 15px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.block .block-content.noactive { display: none; }
.manufacturer dt {
float: left;
width: 155px;
}
.manufacturer dd {
float: left;
text-align: right;
width: 40px;
}
.manufacturer .active {
color: #0171e4;
}
.manufacturer label { text-decoration: underline; }
-#slider-vertical {
+.slider-vertical {
background: url(@templates_base@/img/bg-vertslider-full.png) no-repeat 0 0;
float: left;
padding: 5px 0 0;
}
-#slider-vertical .ui-slider-range {
+.slider-vertical .ui-slider-range {
background: url(@templates_base@/img/bg-vertslider-a.png) repeat-y 0 0;
margin: 0 0 0 7px;
}
-#slider-vertical .ui-slider-handle {
+.slider-vertical .ui-slider-handle {
background: url(@templates_base@/img/point-vertslider.png) no-repeat 0 0;
height: 9px;
margin: 0;
width: 16px;
}
.range-block {
margin: 0 auto;
padding: 10px 0 0;
width: 120px;
}
.range-block ul.range {
color: #333;
float: left;
margin-right: 10px;
position: relative;
top: -7px;
width: 50px;
}
.range-block ul.range li {
padding: 0 0 10px;
text-align: right;
}
.range-block ul.range li:last-child { padding: 0; }
.range-block ul.range2 {
color: #a0a0a0;
float: left;
margin-left: 10px;
position: relative;
top: 4px;
width: 20px;
}
.range-block ul.range2 li {
font-size: 0.846em;
padding: 0 0 10px;
text-align: left;
}
.range-block ul.range2 li:last-child { padding: 0; }
/*** Accordion menu ***/
#accordion-menu {
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
#accordion-menu h3 {
background: #fff url(@templates_base@/img/bg-point-menu.jpg) repeat-x 0 100%;
border-bottom: 1px solid #d0d0d0;
color: #666;
cursor: pointer;
font-size: 1.077em;
font-weight: bold;
padding: 10px 14px;
position: relative;
}
#accordion-menu h3.active {
background: #1b6bc7 url(@templates_base@/img/bg-point-menu-active.jpg) repeat-x 0 0;
color: #fff;
}
#accordion-menu a { padding-left: 20px; text-decoration: none; }
#accordion-menu a:hover, #accordion-menu a:focus { text-decoration: underline; }
#accordion-menu h3.active a { color: #fff; }
#accordion-menu .ui-icon-circle-arrow-e {
background: url(@templates_base@/img/bullet-menu.png) no-repeat 0 0;
height: 6px;
width: 10px;
}
#accordion-menu.alt-menu .ui-icon-circle-arrow-e {
margin-top: -4px;
position: absolute;
top: 50%;
}
#accordion-menu .ui-icon-circle-arrow-s {
background: url(@templates_base@/img/bullet-menu.png) no-repeat 0 -6px;
height: 6px;
width: 10px;
}
#accordion-menu .ui-icon-circle-arrow-a {
background: url(@templates_base@/img/bullet-menu.png) no-repeat 0 -12px;
height: 10px;
margin-top: -5px;
position: absolute;
top: 50%;
width: 8px;
}
#accordion-menu div {
background-color: #fff;
border-bottom: 1px solid #d0d0d0;
}
#accordion-menu div ul { padding: 10px 0 10px 7px; }
#accordion-menu div ul li { padding: 3px 0 5px 7px; }
#accordion-menu div ul li.active {
background: url(@templates_base@/img/bg-subcategory.png) repeat-x 0 0;
}
#accordion-menu div ul a { color: #333; padding-left: 0; }
#accordion-menu div ul li.active a { color: #fff; }
#accordion-menu div ul li ul { padding: 10px 0 0 25px; }
#accordion-menu div ul li ul li {
background: url(@templates_base@/img/point-subcategory.png) no-repeat 0 7px;
font-size: 0.923em;
padding: 2px 0 2px 10px;
}
#accordion-menu div ul li.active ul a { color: #333; }
/*** Good item ***/
.good-item {
background-color: #fff;
width: auto;
}
.good-item.good-item-narrow {
margin: 5px 5px 0 0;
width: 171px;
}
.good-item.good-item-narrow-last {
margin-right: 0;
}
.good-item.good-item-float {
float: left;
height: 290px;
}
.good-item.border-radius-bottom {
border: 1px solid #d0d0d0;
border-top: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.good-item.border-radius {
border: 1px solid #d0d0d0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.good-item dl {
padding: 14px 16px 0;
text-align: center;
}
.good-item dl dd { padding-bottom: 15px; }
.good-item.comparing-items dl {
border-bottom: 1px dotted #b5b5b5;
padding: 14px 0;
margin: 0 16px;
}
.good-item.comparing-items dl.last {
border-bottom: none;
}
.good-item.comparing-items .buttons {
padding: 15px 0;
text-align: center;
width: 210px;
}
.good-item dl dt { padding-bottom: 15px; }
.good-item dl dt a {
font-size: 1.077em;
font-weight: bold;
}
.good-item .img { height: 140px; }
.good-item .price {
font-size: 1.846em;
font-weight: bold;
font-style: normal;
padding: 10px 0;
}
.good-item .price span {
font-size: 0.708em;
}
.good-item .addtocart {
background: url(@templates_base@/img/addtocart-left.jpg) no-repeat 0 0;
color: #faffed;
display: inline-block;
font-size: 1.077em;
font-weight: bold;
text-shadow: #000 0px 1px 1px;
text-decoration: none;
}
.good-item .addtocart span {
background: url(@templates_base@/img/addtocart-right.jpg) no-repeat 100% 0;
display: inline-block;
height: 33px;
line-height: 33px;
padding: 0 20px;
}
.good-item .addedtocart {
color: #3d901f;
font-size: 1.154em;
}
/*** Scrollable ***/
#scrollable {
position:relative;
overflow: hidden;
width: 710px;
height: 309px;
background-color: #fff;
margin: 5px 0
}
#scrollable .items {
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
height: 307px;
margin: 0 30px;
position: relative;
width: 650px;
}
#scrollable .good-item {
background: url(@templates_base@/img/delimiter-special.gif) repeat-y 100% 0;
position:relative;
width:222px;
height: 280px;
margin: 16px 0;
}
#scrollable .good-item dl { padding: 0 16px; }
#scrollable .good-item dl dt { height: 35px; }
#scrollable .good-item dl dd .price { color: #c2120a; }
#scrollable .good-item dl dd .price-deal {
padding: 10px 0;
}
#scrollable .good-item dl dd .price-deal s.under {
font-size: 1.308em;
font-weight: bold;
padding-right: 10px;
}
#scrollable .good-item dl dd .price-deal s.under span {
font-size: 0.706em;
}
#scrollable .ca-nav span {
width:30px;
height:309px;
background:transparent url(@templates_base@/img/special-navi.png) no-repeat 0 0;
position:absolute;
top:0;
left:0;
text-indent:-9000px;
cursor:pointer;
z-index:8;
}
#scrollable .ca-nav span.ca-nav-prev:hover {
background-position:-30px 0;
}
#scrollable .ca-nav span.ca-nav-next {
background-position:-60px 0;
left:auto;
right:0;
}
#scrollable .ca-nav span.ca-nav-next:hover {
background-position:-90px 0;
}
#content .content,
#content .compare {
margin: 5px 0 0;
padding: 20px 30px;
}
#content .content.border-radius,
#content .goods.border-radius,
#content .items.border-radius,
#content .compare.border-radius {
background-color: #fff;
border: 1px solid #d0d0d0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: auto;
}
#content .content p {
font-size: 1.077em;
line-height: 1.5em;
}
#feedback {
background: url(@templates_base@/img/con-contact.jpg) no-repeat 100% 0;
font-size: 0.929em;
padding: 20px 330px 0 0;
}
#feedback p.req {
border-bottom: 1px solid #d0d0d0;
color: #3e85d2;
font-size: 1em;
font-weight: bold;
margin-bottom: 15px;
padding: 0 0 5px;
}
span.star {
color: #3e85d2;
font-weight: bold;
}
#feedback p {
clear: both !important;
padding: 5px 0;
}
#feedback label {
float: left;
font-weight: bold;
padding: 5px 0;
white-space: nowrap;
width: 110px;
}
.form .field {
border: 1px solid #b4b4b4;
width: 350px;
}
#feedback input.field,
#feedback span.radios,
#feedback textarea {
float: left;
}
#feedback textarea {
background: url(@templates_base@/img/bg-textarera.jpg) repeat-x 0 0;
border: 1px solid #b4b4b4;
height: 120px;
width: 450px;
}
#feedback .radio label { width: 240px; }
#feedback span.radios { padding: 5px 0; }
#feedback .buttons {
padding: 10px 0 0 110px;
}
.form .green-button {
background: url(@templates_base@/img/bg-buttons.jpg) no-repeat 0 0;
border: none;
color: #fff;
font-weight: bold;
height: 26px;
padding-bottom: 1px;
width: 90px;
}
.form .grey-button, .form .green-button[disabled] {
background: url(@templates_base@/img/bg-buttons.jpg) no-repeat 0 100%;
border: none;
color: #000;
font-weight: bold;
height: 26px;
padding-bottom: 1px;
width: 90px;
}
.green-but {
background: url(@templates_base@/img/bg-button-left.png) no-repeat 0 0;
color: #fff;
display: inline-block;
font-weight: bold;
height: 26px;
line-height: 26px;
margin: 0 20px 0 0;
padding: 0 0 0 20px;
text-decoration: none;
}
.green-but:hover { color: #fff; text-decoration: none; }
.green-but span {
background: url(@templates_base@/img/bg-button-right.png) no-repeat 100% 0;
display: inline-block;
height: 26px;
margin: 0 -19px 0 0;
padding: 0 20px 0 0;
}
.grey-but {
background: url(@templates_base@/img/bg-button-left.png) no-repeat 0 100%;
color: #3c3c3c;
display: inline-block;
font-weight: bold;
height: 26px;
line-height: 26px;
padding: 0 0 0 20px;
text-decoration: none;
}
.grey-but:hover { color: #3c3c3c; text-decoration: none; }
.grey-but span {
background: url(@templates_base@/img/bg-button-right.png) no-repeat 100% 100%;
display: inline-block;
height: 26px;
margin: 0 -19px 0 0;
padding: 0 20px 0 0;
}
/*** Login form ***/
.login-form {
padding: 0;
}
.login-form p {
padding: 5px 0;
}
.login-form label {
display: block;
font-weight: bold;
padding-bottom: 5px;
}
.login-form .field {
width: 230px;
}
/* Footer
*******************************************************************************/
#footer {
margin: 0 auto;
width: 960px;
}
#footer .copy {
float: left;
font-family: Tahoma,Arial,Verdana,Sans-Serif;
padding-top: 18px;
width: 580px;
}
#footer .copy .doplinks {
color: #a8a8a8;
padding-top: 15px;
}
#footer .copy .doplinks a { padding: 0 15px; }
#footer .copy .doplinks a:first-child { padding-left: 0; }
#footer .links {
background: url(@templates_base@/img/bg-blinks.jpg) no-repeat 0 0;
float: left;
padding: 18px 0 36px 16px;
width: 124px;
}
#footer .links ul li {
background: url(@templates_base@/img/li-blinks.gif) no-repeat 0 6px;
padding: 0 0 0 11px;
}
#footer .payment {
float: left;
font-weight: bold;
padding: 18px 0 36px;
text-align: right;
width: 230px;
}
#footer .payment .logos {
padding: 0 0 20px;
}
#footer .payment a {
padding: 0 3px;
}
.basketStatus {
position: absolute;
top: 153px;
left: 247px;
display: block;
z-index: 5000;
}
.basketStatus .basketContent {
background-color: #fff;
width: 230px;
font-weight: bold;
position:relative;
z-index:5001;
color: #333;
padding: 12px 25px;
box-shadow: 0 0 3px #444;
-moz-box-shadow: 0 0 3px #444;
-webkit-box-shadow: 0 0 3px #444;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.basketStatus .basketArrow {
background: url(@templates_base@/img/con-basket-arrow.png) no-repeat 0 0;
height: 15px;
margin: -55px 0 0 22px;
position: relative;
width: 26px;
z-index: 5006;
}
.basketStatus .basketContent .subtitle { color: #62aa2c; padding-bottom: 15px; }
.basketStatus .basketContent .img {
float: left;
padding-right: 15px;
}
.basketStatus .basketContent .info { color: #333; }
/* --- Item Rating Styles --- */
.ratingblock, .ratingblock div {
display: -moz-inline-block;
}
.voted {
color: #999;
}
.thanks {
color: #36AA3D;
}
.static {
color: #5D3126;
}
.inline-rating {
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
vertical-align: middle;
}
.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url('@templates_base@/img/star_sprite.gif') left -1000px repeat-x;
}
.star-rating {
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li {
display: inline;
}
.star-rating a,
.star-rating .current-rating {
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus {
background-position: left bottom;
}
.star-rating a.r1-unit { width:20%;z-index:6; }
.star-rating a.r2-unit { width:40%;z-index:5; }
.star-rating a.r3-unit { width:60%;z-index:4; }
.star-rating a.r4-unit { width:80%; z-index:3; }
.star-rating a.r5-unit { width:100%; z-index:2; }
.star-rating .current-rating { z-index:1; background-position: left center; }
.small-star {
width:50px;
height:10px;
}
.small-star, .small-star a:hover, .small-star a:active,
.small-star a:focus, .small-star .current-rating {
background-image: url('@templates_base@/img/star_sprite_small.gif');
line-height: 10px;
height: 10px;
}
\ No newline at end of file
Index: branches/1.0.x/inc/js/list_manager.js
===================================================================
--- branches/1.0.x/inc/js/list_manager.js (revision 14899)
+++ branches/1.0.x/inc/js/list_manager.js (revision 14900)
@@ -1,187 +1,240 @@
function ListManager() {}
ListManager.containerSelector = ''; // selector id of container
ListManager.url = ''; // url to template with list contents
ListManager.urlParams = {layout: 'list'};
ListManager.filters = {};
ListManager.xhrRequests = [];
ListManager.reloadTimer = null;
ListManager.reloadTimeout = 1000;
+ListManager.firstLoad = true;
ListManager.getUrl = function () {
var $url = this.url;
}
ListManager.cancelXHRRequests = function () {
while ( this.xhrRequests.length > 0 ) {
this.xhrRequests.shift().abort();
}
}
ListManager.reload = function ($now) {
this.cancelXHRRequests();
if ( $now === undefined || $now === false ) {
this.updateAnchor();
return;
}
var $container = $(this.containerSelector);
$container.fadeTo('fast', 0.7);
var $request = $.post(
this.url,
this.urlParams,
function ($data) {
$container.html($data).fadeTo('fast', 1.0);
}
);
this.xhrRequests.push($request);
}
ListManager.scheduleReload = function () {
var $me = this;
clearTimeout(this.reloadTimer);
this.reloadTimer = setTimeout(function() { $me.reload(); }, this.reloadTimeout);
}
ListManager.setParam = function ($name, $value, $reload) {
if ( $value === undefined || $value === '' ) {
// don't pass empty parameters
delete this.urlParams[$name];
}
else {
this.urlParams[$name] = $value;
}
if ( $reload === true ) {
this.reload();
}
}
+ListManager.getParam = function ($name) {
+ return this.urlParams[$name] !== undefined ? this.urlParams[$name] : false;
+}
+
ListManager.updateAnchor = function () {
var $query_string = [],
$url_params = sort_object(this.urlParams);
for (var $param_name in $url_params) {
$query_string.push( $param_name + '=' + encodeURIComponent(this.urlParams[$param_name]) );
}
window.location.hash = '#' + $query_string.join('&');
}
ListManager.parseAnchor = function ($anchor) {
var $query_string = {};
$anchor.replace(
new RegExp('([^?=&]+)(=([^&]*))?', 'g'),
function($0, $1, $2, $3) {
$query_string[$1] = decodeURIComponent($3);
}
);
this.urlParams = $query_string;
- this.reload(true);
-}
-ListManager.replaceFilter = function ($form_id, $form_html) {
- $('#' + $form_id).replaceWith($form_html);
+ // sync values from url params into empty filters on first page with anchor load
+ this.initFilters();
+
+ this.reload(true);
}
-ListManager.registerFilter = function ($form_id) {
+ListManager.registerFilter = function ($field) {
var $manager = this,
- $form = $('#' + $form_id),
- $field = $form.attr('filter_field');
+ $form = $('#filter-form-' + $field);
$manager.filters[$field] = {'type': $form.attr('filter_type')};
$('h2:first a', $form).click(
function ($e) {
var $header = $(this).parent(),
$active = $header.hasClass('active');
$header.toggleClass('active', !$active);
$header.next().toggleClass('noactive', $active);
return false;
}
);
switch( $manager.filters[$field].type ) {
case 'radio':
$("input[type='radio']", $form).click(
function ($e) {
$manager.updateFilterParams();
}
);
break;
case 'checkbox':
$("input[type='checkbox']", $form).click(
function ($e) {
var $checkbox = $(this),
$hidden_id = $checkbox.attr('id').replace(/_([\d\w-=]|)+$/, ''),
$regexp = new RegExp(jq($hidden_id) + '_([\\d\\w-=]+)');
if ( $checkbox.val() == '' ) {
// "All" checkbox
$("input[type='checkbox']", $form).not($checkbox).attr('checked', false);
}
else if ( $checkbox.is(':checked') ) {
$("input[type='checkbox'][value='']", $form).attr('checked', false);
}
update_checkbox_options($regexp, $hidden_id, $form);
$manager.updateFilterParams();
}
);
break;
}
}
+ListManager.initFilters = function () {
+ if ( !this.firstLoad ) {
+ return;
+ }
+
+ for (var $filter_field in this.filters) {
+ this.initFilter($filter_field);
+ }
+
+ this.firstLoad = false;
+}
+
+ListManager.initFilter = function ($field) {
+ var $values = '',
+ $form = $('#filter-form-' + $field),
+ $param_name = 'filters[' + $field + ']',
+ $param_value = this.getParam($param_name);
+
+ if ( $param_value === false || $param_value === '' ) {
+ return;
+ }
+
+ switch( this.filters[$field].type ) {
+ case 'radio':
+ $('#' + jq($param_name + '_' + $param_value) ).attr('checked', true);
+ break;
+
+ case 'checkbox':
+ $values = $param_value.substring(1, $param_value.length - 1).split('|');
+
+ for (var $i = 0; $i < $values.length; $i++) {
+ $('#' + jq($param_name + '_' + $values[$i]) ).attr('checked', true);
+ }
+
+ $('#' + jq($param_name + '_') ).attr('checked', false);
+ $('#' + jq($param_name) ).val($param_value);
+ break;
+
+ case 'range':
+ $values = $param_value.split('-');
+
+ $('#' + jq($param_name + '_slider') ).slider('option', 'values', $values);
+ $('#' + jq($param_name) ).val($param_value);
+ break;
+ }
+
+ this.syncChecked( $("input[type=checkbox], input[type=radio]", '#filter-form-' + $field) );
+}
+
ListManager.syncChecked = function ($checkboxes) {
$checkboxes.each(
function () {
var $me = $(this),
$checked = $me.is(':checked'),
$dt = $me.parent(),
$dd = $dt.next();
$dt.toggleClass('active', $checked);
$dd.toggleClass('active', $checked);
}
);
}
ListManager.updateFilterParams = function () {
var $form_fields;
for (var $field in this.filters) {
$form_fields = $('#filter-form-' + $field).serializeArray();
for (var $i = 0; $i < $form_fields.length; $i++) {
this.setParam($form_fields[$i].name, $form_fields[$i].value);
}
this.syncChecked( $("input[type=checkbox], input[type=radio]", '#filter-form-' + $field) );
}
this.scheduleReload();
}
ListManager.init = function () {
var $manager = this;
$('body').bind(
'anchorchanged',
function ($e, $anchor) {
$manager.parseAnchor($anchor);
}
);
}
\ No newline at end of file
Index: branches/1.0.x/elements/filters.elm.tpl
===================================================================
--- branches/1.0.x/elements/filters.elm.tpl (revision 14899)
+++ branches/1.0.x/elements/filters.elm.tpl (revision 14900)
@@ -1,116 +1,117 @@
<inp2:m_DefineElement name="filter_text_block" PrefixSpecial="item-filter" filter_type="text" is_list="0">
<input type="text" name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>" value="<inp2:FilterField/>"/>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_select_block" PrefixSpecial="item-filter" filter_type="select" is_list="0">
<select name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>">
</select>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_radio_element">
<dt<inp2:m_if check="m_Param" name="selected"> class="active"</inp2:m_if>>
<input type="radio"<inp2:m_if check="m_Param" name="selected"> checked</inp2:m_if> name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>_<inp2:m_param name='key'/>" value="<inp2:m_param name='key'/>"/> <label for="<inp2:FilterInputName/>_<inp2:m_param name='key'/>"><inp2:m_Param name="title"/></label>
</dt>
<dd<inp2:m_if check="m_Param" name="selected"> class="active"</inp2:m_if>>(<inp2:m_Param name="count"/>)</dd>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_radio_block" PrefixSpecial="item-filter" filter_type="radio" is_list="0">
<dl class="manufacturer">
<inp2:ListFilterOptions render_as="filter_radio_element" pass_params="1"/>
</dl>
<div class="clear"></div>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_checkbox_element" form_id="">
<dt<inp2:m_if check="m_Param" name="selected"> class="active"</inp2:m_if>>
<input type="checkbox"<inp2:m_if check="m_Param" name="selected"> checked</inp2:m_if> id="<inp2:FilterInputName/>_<inp2:m_param name='key'/>" value="<inp2:m_param name='key'/>"/> <label for="<inp2:FilterInputName/>_<inp2:m_param name='key'/>"><inp2:m_Param name="title"/></label>
</dt>
<dd<inp2:m_if check="m_Param" name="selected"> class="active"</inp2:m_if>>(<inp2:m_Param name="count"/>)</dd>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_checkbox_block" PrefixSpecial="item-filter" filter_type="checkbox" is_list="0">
<dl class="manufacturer">
<inp2:ListFilterOptions render_as="filter_checkbox_element" form_id="filter-form-{$filter_field}" pass_params="1"/>
</dl>
<div class="clear"></div>
<input type="hidden" name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>" value="<inp2:FilterField/>"/>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_range_value_element">
<li>
<!--##<inp2:m_param name='key'/>; ##--><inp2:m_Param name="title"/>
</li>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_range_count_element">
<li>(<inp2:m_Param name="count"/>)</li>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_range_block" PrefixSpecial="item-filter" filter_type="range" is_list="0">
<div class="range-block">
<ul class="range">
<inp2:ListFilterOptions render_as="filter_range_value_element" pass_params="1"/>
</ul>
- <div id="slider-vertical" style="height:260px;"></div>
+ <div class="slider-vertical" id="<inp2:FilterInputName/>_slider" style="height:260px;"></div>
<ul class="range2">
<inp2:ListFilterOptions render_as="filter_range_count_element" pass_params="1"/>
</ul>
<div class="clear"></div>
</div>
<script type="text/javascript">
$(document).ready(
function() {
- $( '#slider-vertical' ).slider({
+ $( '#' + jq('<inp2:FilterInputName/>_slider') ).slider({
orientation: 'vertical',
range: true,
min: <inp2:m_Get name="min_range_value"/>,
max: <inp2:m_Get name="max_range_value"/>,
step: <inp2:m_Get name="range_step"/>,
values: [<inp2:m_Get name="selected_from_range"/>, <inp2:m_Get name="selected_to_range"/>],
change: function(event, ui) {
- // TODO: jQuery UI slider has inverted range, making top slider change bottom range and bottom slider changing top range
- $('#' + jq('<inp2:FilterInputName/>')).val(ui.values[0] + '-' + ui.values[1]);
+ // jQuery UI slider has inverted range - fix that here
+ var $range_step = <inp2:m_Get name="range_step"/>,
+ $range_min = <inp2:m_Get name="min_range_value"/>,
+ $range_max = <inp2:m_Get name="max_range_value"/>,
+ $min_value = $range_min + (($range_max - ui.values[1]) / $range_step) * $range_step,
+ $max_value = $range_max - ((ui.values[0] - $range_min) / $range_step) * $range_step;
+ $('#' + jq('<inp2:FilterInputName/>')).val($min_value + '-' + $max_value);
ListManager.updateFilterParams();
}
});
}
);
</script>
<input type="hidden" name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>" value="<inp2:FilterField/>"/>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="filter_element" PrefixSpecial="item-filter" prefix="" filter_field="" filter_type="" is_list="0">
<inp2:m_ifnot check="m_Param" name="is_list">
<inp2:ReloadItem prefix="$prefix" field="$filter_field"/>
</inp2:m_ifnot>
<form action="<inp2:m_FormAction/>" id="filter-form-<inp2:m_Param name='filter_field'/>" method="post" class="filter-form" filter_field="<inp2:m_Param name='filter_field'/>" filter_type="<inp2:m_Param name='filter_type'/>">
<div class="block alt-block">
<h2 class="active"><a href="#">Filter by <inp2:m_Phrase name="lu_fld_{$filter_field}"/></a></h2>
<div class="block-content">
<inp2:m_RenderElement name="filter_{$filter_type}_block" pass_params="1"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function () {
- ListManager.registerFilter('filter-form-<inp2:m_Param name="filter_field"/>');
+ ListManager.registerFilter('<inp2:m_Param name="filter_field"/>');
}
);
</script>
</form>
</inp2:m_DefineElement>
-
-<inp2:m_DefineElement name="used_filter_element">
- ListManager.replaceFilter('filter-form-<inp2:m_Param name="filter_field"/>', '<inp2:m_RenderElement name="filter_element" pass_params="1" js_escape="1"/>');
-</inp2:m_DefineElement>
\ No newline at end of file
Index: branches/1.0.x/elements/content_boxes/products.elm.tpl
===================================================================
--- branches/1.0.x/elements/content_boxes/products.elm.tpl (revision 14899)
+++ branches/1.0.x/elements/content_boxes/products.elm.tpl (revision 14900)
@@ -1,36 +1,28 @@
<inp2:m_DefaultParam prefix="" list_name="" layout="list"/>
<inp2:m_if check="m_Get" name="ajax" equals_to="yes">
<inp2:m_NoDebug/>
<inp2:m_Get name="list_prefix" result_to_var="prefix"/>
<inp2:m_Get name="list_name" result_to_var="list_name"/>
<inp2:m_Get name="layout" result_to_var="layout"/>
</inp2:m_if>
<inp2:$prefix_InitList list_name="$list_name" main_list="1"/>
<inp2:m_Include template="elements/content_boxes.elm" strip_nl="2"/>
<inp2:m_Include template="elements/product_elements.elm" strip_nl="2"/>
<inp2:m_if check="{$prefix}_TotalRecords" list_name="$list_name">
<inp2:m_Include template="elements/sorting.elm" list_name="$list_name" prefix="$prefix" layout="$layout" ajax="1"/>
<div class="items <inp2:m_if check='m_Param' name='layout' equals_to='list'>border-radius<inp2:m_else/>items-alt</inp2:m_if>">
<ul class="display<inp2:m_if check='m_Param' name='layout' equals_to='grid'> thumb_view</inp2:m_if>">
<inp2:$prefix_ListProducts list_name="$list_name" render_as="product_list_element"/>
</ul>
<div class="clear"></div>
<inp2:m_Include template="elements/pagination.elm" list_name="$list_name" prefix="$prefix" ajax="1"/>
</div>
<inp2:m_else/>
No Products
</inp2:m_if>
-
-<inp2:m_if check="m_Get" name="filters">
- <inp2:m_include template="elements/filters.elm"/>
-
- <script type="text/javascript">
- <inp2:item-filter.used_PrintList render_as="used_filter_element" list_name="$list_name" prefix="$prefix" is_list="1"/>
- </script>
-</inp2:m_if>
\ No newline at end of file
Event Timeline
Log In to Comment