[+] FO : New Responsive, Bootstrap template
This commit is contained in:
Damien Metzger
@@ -0,0 +1,242 @@
|
||||
@import '../../_theme_variables';
|
||||
#enabled_filters {
|
||||
background:#484848;
|
||||
padding:16px 20px;
|
||||
margin-bottom:16px;
|
||||
|
||||
span.layered_subtitle {
|
||||
color:#fff;
|
||||
display:block;
|
||||
padding-bottom:11px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding:1px 0;
|
||||
color:#9c9b9b;
|
||||
cursor:pointer;
|
||||
position:relative;
|
||||
|
||||
&:hover, &:hover a {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
a {
|
||||
position:absolute;
|
||||
top:1px;
|
||||
right:0;
|
||||
display:block;
|
||||
cursor: pointer;
|
||||
text-indent:0px;
|
||||
color:#888888;
|
||||
|
||||
&:before {
|
||||
content:"";
|
||||
display:block;
|
||||
font-family:"FontAwesome";
|
||||
width:12px;
|
||||
height:12px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layered_block_left {
|
||||
|
||||
.layered_subtitle_heading {
|
||||
border-bottom:1px solid $base-border-color;
|
||||
padding:0 12px 6px 0;
|
||||
margin-bottom:8px;
|
||||
font-weight:bold;
|
||||
position:relative;
|
||||
color:#333333;
|
||||
|
||||
.layered_close {
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:4px;
|
||||
height:14px;
|
||||
width:12px;
|
||||
|
||||
a {
|
||||
display:block;
|
||||
height:14px;
|
||||
width:12px;
|
||||
text-indent:-5000px;
|
||||
position:relativee;
|
||||
color:#d3d2d2;
|
||||
font-size:12px;
|
||||
line-height:14px;
|
||||
|
||||
&:after {
|
||||
content:"";
|
||||
display:block;
|
||||
text-indent:0;
|
||||
height:14px;
|
||||
width:12px;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0;
|
||||
font-family:'FontAwesome';
|
||||
vertical-align:1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color:$link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.closed {
|
||||
|
||||
a {
|
||||
|
||||
&:after {
|
||||
content:"";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#layered_block_left {
|
||||
|
||||
label {font-weight:normal;}
|
||||
|
||||
.layered_filter_ul {
|
||||
padding:0 20px 5px;
|
||||
|
||||
li {
|
||||
padding-bottom:7px;
|
||||
.checker span, .radio span {top:0;}
|
||||
|
||||
label {
|
||||
margin-bottom:0;
|
||||
|
||||
a {
|
||||
font-weight:normal;
|
||||
|
||||
&:hover {color:#333;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#layered_block_left ul li label {cursor: pointer; display:inline;}
|
||||
|
||||
/* Style moved form the template to the css */
|
||||
/******************************************************************************
|
||||
Color List Style
|
||||
*******************************************************************************/
|
||||
#layered_block_left {
|
||||
|
||||
ul.color-group {
|
||||
padding-top:2px;
|
||||
overflow:hidden;
|
||||
|
||||
li {
|
||||
width:50%;
|
||||
float:left;
|
||||
line-height:15px;
|
||||
vertical-align:middle;
|
||||
padding-bottom:9px;
|
||||
|
||||
.color-option {
|
||||
border: 1px solid $base-border-color;
|
||||
height: 15px;
|
||||
margin-left: 0;
|
||||
margin-right:4px;
|
||||
padding: 0;
|
||||
width: 15px;
|
||||
@include box-shadow(rgba(white, 1) 0 0 1px 0px inset,rgba(white, 1) 0 0 0px 1px inset,rgba(white, 1) 0 0 0px 1px inset,rgba(white, 1) 0 0 1px 0px inset);
|
||||
|
||||
&.on {
|
||||
border-color:#000;
|
||||
}
|
||||
|
||||
&.disable {
|
||||
opacity: 0.5;
|
||||
filter:alpha(opacity=50);
|
||||
-moz-opacity:0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layered_block_left .nomargin a {
|
||||
display: inline;
|
||||
}
|
||||
/**************************************************************************************
|
||||
Layered Form Selects Styles
|
||||
***************************************************************************************/
|
||||
#layered_form {
|
||||
|
||||
.select {
|
||||
max-width: 230px;
|
||||
}
|
||||
}
|
||||
/**************************************************************************************
|
||||
Range Slider Styles
|
||||
***************************************************************************************/
|
||||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
|
||||
background:#fbfbfb;
|
||||
border-color:#d6d4d4;
|
||||
@include border-radius(0px);
|
||||
width:15px;
|
||||
height:15px;
|
||||
|
||||
&.ui-state-hover {
|
||||
background:#555454;
|
||||
border-color:#333;
|
||||
}
|
||||
}
|
||||
.ui-slider .ui-slider-range {
|
||||
background:#959595;
|
||||
border:none;
|
||||
}
|
||||
.ui-corner-all {
|
||||
@include border-radius(0px);
|
||||
background:#efefef;
|
||||
border:none;
|
||||
height:11px;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-handle { top:-0.14em}
|
||||
.layered_price_range {
|
||||
margin-left: 7px;
|
||||
}
|
||||
/**************************************************************************************
|
||||
Range Input Styles
|
||||
***************************************************************************************/
|
||||
.layered_price_range_unit {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.layered_slider_container {
|
||||
margin: 6px 0 6px 7px;
|
||||
}
|
||||
.layered_input_range_min, .layered_input_range_max {
|
||||
width:60px;
|
||||
display:inline;
|
||||
}
|
||||
.layered_list_selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
.layered_list {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.layered_list:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
.layered_ajax_loader p {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.hide-action {
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hide-action:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
@import '../../_theme_variables';
|
||||
#layered_block_left {
|
||||
|
||||
ul.layered_filter_ul {
|
||||
border-top:1px solid $base-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
#layered_block_left div.block_content {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#layered_block_left ul {
|
||||
padding-left: 0;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
#layered_form > div > div {
|
||||
border-bottom: 1px dotted #CCCCCC;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#layered_block_left .hide-action {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
#layered_block_left .hide-action:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#layered_block_left ul li {
|
||||
margin-left: 15px;
|
||||
padding-left: 2px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#layered_block_left #enabled_filters , #layered_url_filter_block {
|
||||
font-size: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Style moved form the template to the css */
|
||||
#layered_block_left ul li .disabled {
|
||||
color: #666;
|
||||
}
|
||||
.product_list .warning {
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
#layered_form .select {
|
||||
width: 165px;
|
||||
}
|
||||
#layered_block_left .color-option.disable {
|
||||
opacity: 0.5;
|
||||
filter:alpha(opacity=50);
|
||||
-moz-opacity:0.5;
|
||||
}
|
||||
#layered_form .color-option.on {
|
||||
border: 1px solid red;
|
||||
}
|
||||
#layered_form input[type=radio] {
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.layered_price_range {
|
||||
margin-left: 7px;
|
||||
}
|
||||
.layered_price_range_unit {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.layered_slider_container {
|
||||
margin: 6px 0 6px 6px; width: 93%;
|
||||
}
|
||||
.layered_slider {
|
||||
margin-top:5px;
|
||||
}
|
||||
.layered_input_range_min {
|
||||
width:30px;
|
||||
}
|
||||
.layered_input_range_max {
|
||||
width:40px;
|
||||
}
|
||||
.layered_list_selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
.layered_ajax_loader p {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.hide-action {
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hide-action:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user