/* B2B filtr v14 - přidáno pro seriveModule v13 - responzivní tabulky na objednávky & spol v12 - přidání přepínače zobrazit/vynechat v11 - přechod na NOUIslider v10 - řešení počtu slupců u dlouhých parametrů + mobilní verze v9 - předělání hodnot do sloupců místo řádků (18.6.2019) v8 - top parametry nad záložkami v7 - přepracování záložek filtru */ #snippet--filtr .panel.panel-default { border-top-width: 0px} #obalFiltrParamPolozky { padding: 10px} #obalFiltrTopParam { padding: 10px 15px 10px; margin: -10px -10px 15px; box-shadow: 0px -6px 8px -8px inset, 0px 6px 8px -8px inset; border-left: 5px solid #337ab7} #filtrKategorieObal {width:20%; float:left} #filtrKategorieObal > div {width:100%} .filtrKategorie a { border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; display: table; padding: 6px 0 6px 5px; width: 100%; background: rgba(255,255,255,1); background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(240,240,240,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1 ); position:relative; } .filtrKategorie.aktivni a {background:white; border-right:none; box-shadow: -5px 0 10px -4px; z-index: 10} .filtrKategorie:last-child a {border-bottom:none; /*margin-bottom:10px;*/} .filtrKategorie a:hover {cursor:pointer} #ParametricFilter .filtrKategorie a.option::before { content: "\f013"; font-family: FontAwesome; font-size: 1.2em; left: -17px; line-height: 1.2em; position: absolute} .filtrKategorie:first-child::before, .filtrKategorie:last-child::after { content: ""; height: 10px; width: calc(100% + 20px); display: block; margin-left: -20px; border-right: 1px solid #ddd; background: rgba(255,255,255,1); background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(240,240,240,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1 )} .filtrKategorie:first-child::before { box-shadow: 0px 6px 8px -8px inset} .filtrKategorie:last-child::after { box-shadow: 0 -6px 8px -8px inset} #filtrZalozkaObal {width:80%; float:left} #filtrZalozkaObal .polozka_param {padding:5px 5px 35px 15px} .filtrNadpis:first-child { border-top: none; margin: -5px 0 5px; padding: 5px} .filtrNadpis { color: #434a54; background: #eee; float: left; font-size: 14px; margin: 15px 0 5px; padding: 5px; width: 100%; font-weight: 600} .filtrNadpis2 { color: #434a54; float: left; font-size: 14px; margin: 0 0 5px; padding: 5px 5px 5px 0; width: 100%; font-weight: 600} .filtrNadpis > div {float:right; font-size:12px; font-weight:300} .filtrNadpis label, .filtrNadpis2 label {position:relative; margin:0; font-weight:300 } .filtrNadpis input {position:absolute; opacity:0} .filtrNadpis2 span:hover { background: white; } .filtrNadpis2 span:has(input:checked){ color: green; background: white; } .filtrNadpis2 input { margin-right: 5px;} .filtrNadpis label > span, .filtrNadpis2 > div {border-radius:7px; background:#dde1e9; padding:2px; display:inline-block;color:#789;letter-spacing: 0.2px;} .filtrNadpis label span span, .filtrNadpis2 span {cursor:pointer; border-radius:5px; padding:2px 5px; display:inline-block; transition: background-color 150ms linear} .filtrNadpis input:not(:checked)~ span > span.f1, .filtrNadpis input:checked ~ span > span.f2 { background-color:white; color:green} .filtrNadpis input:not(:checked):hover ~ span > span { background-color:white} .filtrPolozkaObal {padding: 0 0 10px} .filtrPolozkaHodnota { width: 100%; line-height: 14px; margin: 3px 1px; font-weight: 500} .filtrPolozkaHodnota:hover {background:#f5f5f5} .filtrPolozkaHodnota input[type="checkbox"]{margin: 0 5px 0 0; vertical-align: top} .filtrPolozkaHodnota input[type=checkbox]:checked {box-shadow: 0 0 10px #337ab7} .polozkaHodnotaDisabled {opacity:0.5;pointer-events: none; } .filtrRozsahInput {background:none; border:none;color: #337ab7; font-size: 14px; font-weight: 800} .filtrRozsahPosuvnik {background: #eee} .filtrPolozkaObal .ui-slider .ui-slider-range {background:#337ab7} .filtrPolozkaObal .ui-slider-handle { height: 1.5em; top: -0.4em} .ui-slider-handle:before {content:"\f0c9"; color:#ddd; font-family: FontAwesome; margin: 0 0 0 1px} @media only screen and (max-width: 390px) { #filtrKategorieObal { width: 25%} #filtrZalozkaObal { width: 75%} } #snippet--filtrVendor .filtrNadpis { float: none; width: calc(100% - 2em); font-size: 0.9em; background:none;} #snippet--filtrVendor .filtrNadpis label { font-weight: 500;} /*počty sloupců*/ .filtrPolozkaObal.columnize {-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; width:100%} .columnize.c2333 {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2} @media only screen and (max-width: 880px) { .filtrPolozkaObal.columnize {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2} } @media only screen and (max-width: 540px) { .columnize.c2333 {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1} } @media only screen and (max-width: 380px) { .filtrPolozkaObal.columnize {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1} } .filtrPolozkaObal .range-slider-min-container, .filtrPolozkaObal .range-slider-max-container { display: inline-block; width: initial} .filtrPolozkaObal .range-slider-min-container input, .filtrPolozkaObal .range-slider-max-container input { width: auto; border:1px solid transparent} .filtrPolozkaObal .range-slider-min-container input { text-align:right} .filtrPolozkaObal .range-slider-min-container:after { content: "-"} .filtrPolozkaObal .range-slider-min-container input:focus, .filtrPolozkaObal .range-slider-max-container input:focus {background:#e5e5e5; border:1px solid #ddd} .filtrPolozkaObal .range-slider-control { display: inline} .filtrPolozkaObal:hover .range-slider-min-container input, .filtrPolozkaObal:hover .range-slider-max-container input {border:1px solid #e5e5e5} .range-slider.ui-slider-horizontal {background: #ccc} .x-navigation .xn-quick-link { padding: 0 10px 5px} .x-navigation .xn-quick-link p { display: inline-block; font-size:10px; color:#aaa; width:40px} .x-navigation .xn-quick-link a { display: inline-block; opacity:0.8; height: 17px; width: 25px; background-size: contain; background-repeat: no-repeat; background-position: bottom; } .x-navigation .xn-quick-link a:hover { opacity:1; } /*rychly filtr*/ #cat-24013 { background-image: url("cat-img/cat-24013.png")} #cat-24014 { background-image: url("cat-img/cat-24014.png")} #cat-24080 { background-image: url("cat-img/cat-24080.png")} #cat-24143 { background-image: url("cat-img/cat-24143.png")} #cat-24150 { background-image: url("cat-img/cat-24150.png")} #cat-24200 { background-image: url("cat-img/cat-24200.png")} /*Cenová lišta NOUIslider*/ #snippet--price .priceInput span { position:relative} #snippet--price .priceInput span:after { content:attr(data-currency); position:absolute; right:5px; top:0} #snippet--price .priceInput input { width: 70px; text-align: right; padding-right: 20px; background: transparent; border-color: #fff; border-width: 1px; border-radius: 3px} #snippet--price:hover .priceInput input { background: white; border-color: lightblue; } #snippet--price .priceInput label, .filtrPolozka .priceInputs label { cursor: inherit} .filtrPolozka .priceInputs { display: flex; width: 100%} .filtrPolozka .priceInputs span { position:relative} .filtrPolozka .priceInputs label { padding: 0 2px} .filtrPolozka .priceInputs input { border: 1px solid #ddd; border-radius: 3px; text-align: right; width: 90px; padding: 4px} .filtrPolozkaObal:hover .priceInputs input { border: 1px solid #999; box-shadow: 0 1px 3px #aaa} .filtrPolozka .priceInputs span:after { position: absolute; right: 7px; top: 5px} .priceInputs span[data-atribute="palce"]:after {content:'"'} .priceInputs span[data-atribute="h"]:after {content:"h"} .priceInputs span[data-atribute="m"]:after {content:"m"} .priceInputs span[data-atribute="g"]:after {content:"g"} .priceInputs span[data-atribute="U"]:after {content:"U"} .priceInputs span[data-atribute="°"]:after {content:"°"} .priceInputs span[data-atribute="%"]:after {content:"%"} .priceInputs span[data-atribute="A"]:after {content:"A"} .priceInputs span[data-atribute="W"]:after {content:"W"} .priceInputs span[data-atribute="počet"]:after, .priceInputs span[data-atribute="×"]:after{content:"×"} .priceInputs span[data-atribute="V"]:after {content:"V"} .priceInputs span[data-atribute="kg"]:after {content:"kg"} .priceInputs span[data-atribute="Wh"]:after {content:"Wh"} .priceInputs span[data-atribute="Ah"]:after {content:"Ah"} .priceInputs span[data-atribute="GB"]:after {content:"GB"} .priceInputs span[data-atribute="km"]:after {content:"km"} .priceInputs span[data-atribute="ms"]:after {content:"ms"} .priceInputs span[data-atribute="Hz"]:after {content:"Hz"} .priceInputs span[data-atribute="cm"]:after {content:"cm"} .priceInputs span[data-atribute="kW"]:after {content:"kW"} .priceInputs span[data-atribute="°C"]:after {content:"°C"} .priceInputs span[data-atribute="Wp"]:after {content:"Wp"} .priceInputs span[data-atribute="TB"]:after {content:"TB"} .priceInputs span[data-atribute="lm"]:after {content:"lm"} .priceInputs span[data-atribute="mm"]:after {content:"mm"} .priceInputs span[data-atribute="mAh"]:after {content:"mAh"} .priceInputs span[data-atribute="dBA"]:after {content:"dBA"} .priceInputs span[data-atribute="Mpx"]:after {content:"Mpx"} .priceInputs span[data-atribute="DPI"]:after {content:"DPI"} .priceInputs span[data-atribute="bar"]:after {content:"bar"} .priceInputs span[data-atribute="GHz"]:after {content:"GHz"} .priceInputs span[data-atribute="TBW"]:after {content:"TBW"} .priceInputs span[data-atribute="MHz"]:after {content:"MHz"} .priceInputs span[data-atribute="CFM"]:after {content:"CFM"} .priceInputs span[data-atribute="g/m2"]:after {content:"g/m2"} .priceInputs span[data-atribute="Mbps"]:after {content:"Mbps"} .priceInputs span[data-atribute="Mpps"]:after {content:"Mpps"} .priceInputs span[data-atribute="km/h"]:after {content:"km/h"} .priceInputs span[data-atribute="MB/s"]:after {content:"MB/s"} .priceInputs span[data-atribute="MT/s"]:after {content:"MT/s"} .priceInputs span[data-atribute="TOPs"]:after {content:"TOPs"} .priceInputs span:last-child[data-atribute="cd/m2"]:after {content:"cd/m2"; position:relative; top:0; right:-5px} .priceInputs span:last-child[data-atribute="listů"]:after {content:"listů"; position:relative; top:0; right:-5px} .priceInputs span:last-child[data-atribute="str./min."]:after {content:"str./min."; position:relative; top:0; right:-5px} .priceInputs span:last-child[data-atribute="ANSIlumeny"]:after {content:"ANSI lumen"; position:relative; top:0; right:-5px} .priceInputs span:last-child[data-atribute="ot./min."]:after {content:"ot./min."; position:relative; top:0; right:-5px} .priceInputs span[data-atribute="palce"] input, .priceInputs span[data-atribute="h"] input, .priceInputs span[data-atribute="m"] input, .priceInputs span[data-atribute="g"] input, .priceInputs span[data-atribute="U"] input, .priceInputs span[data-atribute="°"] input, .priceInputs span[data-atribute="%"] input, .priceInputs span[data-atribute="A"] input, .priceInputs span[data-atribute="W"] input, .priceInputs span[data-atribute="počet"] input, /* vypisujem "x" */ .priceInputs span[data-atribute="×"] input, .priceInputs span[data-atribute="V"] input { padding-right: 22px} .priceInputs span[data-atribute="kg"] input, .priceInputs span[data-atribute="Wh"] input, .priceInputs span[data-atribute="Ah"] input, .priceInputs span[data-atribute="GB"] input, .priceInputs span[data-atribute="km"] input, .priceInputs span[data-atribute="ms"] input, .priceInputs span[data-atribute="Hz"] input, .priceInputs span[data-atribute="cm"] input, .priceInputs span[data-atribute="kW"] input, .priceInputs span[data-atribute="°C"] input, .priceInputs span[data-atribute="Wp"] input, .priceInputs span[data-atribute="TB"] input, .priceInputs span[data-atribute="lm"] input { padding-right: 30px} .priceInputs span[data-atribute="mm"] input, .priceInputs span[data-atribute="mAh"] input, .priceInputs span[data-atribute="dBA"] input, .priceInputs span[data-atribute="Mpx"] input, .priceInputs span[data-atribute="DPI"] input, .priceInputs span[data-atribute="bar"] input, .priceInputs span[data-atribute="GHz"] input, .priceInputs span[data-atribute="TBW"] input, .priceInputs span[data-atribute="MHz"] input, .priceInputs span[data-atribute="CFM"] input { padding-right: 34px} .priceInputs span[data-atribute="g/m2"] input, .priceInputs span[data-atribute="Mbps"] input, .priceInputs span[data-atribute="Mpps"] input, .priceInputs span[data-atribute="km/h"] input, .priceInputs span[data-atribute="MB/s"] input, .priceInputs span[data-atribute="MT/s"] input, .priceInputs span[data-atribute="TOPs"] input { padding-right: 41px} #snippet--delivery .checkbox-group.pull-right { padding: 0 5px 4px; text-align: center} /* #PromotionList .checkbox-group.pull-right, #PromotionGift .checkbox-group.pull-right, */ #snippet--delivery .btn-group.pull-right { padding: 17px 0 0 20px} /* #PromotionList .btn-group.pull-right, #PromotionGift .btn-group.pull-right, */ #snippet--delivery .checkbox-group.pull-right:hover { background: #f0f0f0; border: 2px solid #dedede; margin: -2px} /* #PromotionList .checkbox-group.pull-right:hover, #PromotionGift .checkbox-group.pull-right:hover, */ @media only screen and (min-width: 901px) { #B2C-settings .checkbox-group.pull-right, #B2C-settings .input-group, #ServiceModule .checkbox-group.pull-right, #snippet--warranty .checkbox-group.pull-right, #snippet--payment .checkbox-group.pull-right, #snippet--expedice .checkbox-group.pull-right, #snippet--invItems .checkbox-group.pull-right, #snippet--invoices .checkbox-group.pull-right, #snippet--orders .checkbox-group.pull-right, #snippet--orderItems .checkbox-group.pull-right, .logisticReturnFilter .checkbox-group.pull-right { padding: 0 5px 4px; text-align: center} #B2C-settings .btn-group.pull-right, #B2C-settings .btn-group, #snippet--warranty .btn-group.pull-right, #snippet--payment .btn-group.pull-right, #snippet--expedice .btn-group.pull-right, #snippet--invItems .btn-group.pull-right, #snippet--invoices .btn-group.pull-right, #snippet--orders .btn-group.pull-right, #snippet--orderItems .btn-group.pull-right, .logisticReturnFilter .btn-group.pull-right{ padding: 17px 0 0 20px} #B2C-settings .checkbox-group.pull-right:hover, #B2C-settings .input-group:hover, #ServiceModule .checkbox-group.pull-right:hover, #snippet--warranty .checkbox-group.pull-right:hover, #snippet--payment .checkbox-group.pull-right:hover, #snippet--expedice .checkbox-group.pull-right:hover, #snippet--invItems .checkbox-group.pull-right:hover, #snippet--invoices .checkbox-group.pull-right:hover, #snippet--orders .checkbox-group.pull-right:hover, #snippet--orderItems .checkbox-group.pull-right:hover, .logisticReturnFilter .checkbox-group.pull-right:hover { box-shadow: 0 0 2px #dedede; background: white;} } @media only screen and (max-width: 900px) { #snippet--xxx .panel-heading > div, #B2C-settings .panel-heading > div > div, #B2C-settings .input-group, #ServiceModule .checkbox-group.pull-right, #snippet--warranty .panel-heading > div, #snippet--payment .panel-heading > div, #snippet--expedice .panel-heading > div, #snippet--invItems .panel-heading > div, #snippet--invoices .panel-heading > div, #snippet--orders .panel-heading > div, #snippet--orderItems .panel-heading > div { border-bottom: 1px solid #ccc; margin: 0.1em; width: 100%; display: flex; align-items: baseline; padding: 0.3em 0 0.3em !important} #snippet--xxx .panel-heading > div > div, #B2C-settings .panel-heading > div > div > div, #B2C-settings .input-group, #snippet--warranty .panel-heading > div > div, #snippet--payment .panel-heading > div > div, #snippet--expedice .panel-heading > div > div, #snippet--invItems .panel-heading > div > div, #snippet--invoices .panel-heading > div > div, #snippet--orders .panel-heading > div > div, #snippet--orderItems .panel-heading > div > div { display: flex; align-items: center; width: 100%; justify-content: space-between} #snippet--xxx .btn[role=dtRefreshFilter], #B2C-settings .btn[role=dtRefreshFilter], #snippet--warranty .btn[role=dtRefreshFilter], #snippet--payment .btn[role=dtRefreshFilter], #snippet--expedice .btn[role=dtRefreshFilter], #snippet--invItems .btn[role=dtRefreshFilter], #snippet--invoices .btn[role=dtRefreshFilter], #snippet--orders .btn[role=dtRefreshFilter], #snippet--orderItems .btn[role=dtRefreshFilter] { margin-left: 37%} }