/** * Buttons * * Buttons are inputs displayed as buttons, with hovering effects. * They are inlined blocks so * * - buttons-big-*.png: step of 52px * - buttons-small-*.png: step of 44px * - buttons-basket.png: step of 52px * *


 * 
 *  
 * 
 *

* * @version 1.0 * @author Thomas Parisot * @author Nicolas Goueset * @package cdiscount-ui * @charset utf-8 * @see cdiscount.ui.js ($.fn.picHover) for hovering effect * @_gfx buttons-big.png, buttons-small.png, buttons-basket.png * @todo extract texts from pictures to improve sprites (and avoid modify them for labels) * @Imagesrep [10/BasePath]/common/button/ for images used on FrontR2 * [5/BasePath]/button/ for images also used on FrontR1 */ /** * Button * * Base class for applying image transformation * * @bugfix * @affects IE6 * @valid no */ .button{ background: url(https://i2.cdscdn.com/struct/common/button/buttons-big.png) no-repeat 0 0; display: inline-block; border: none; cursor: pointer; height: 42px; width: 197px; /* inline-block support for IE @TODO put this in a ie.css file */ zoom: 1; *display: inline; } .button_over, /* so as a simple button can also work on JS hovering */ .button-continue-shopping-alt_over{ background-position: 0 -52px; } .button-continue-shopping{ background-position: 0 -104px; width: 193px; } .button-continue-shopping_over{ background-position: 0 -156px; } .button-continue-shopping-grey{ background-position: 0 0; width: 187px; } .button-continue-shopping-grey_over{ background-position: 0 -52px; } .button-see-basket{ background-position: -8px -208px; width: 150px; } .button-see-basket_over{ background-position: -8px -260px; } .button-see-basket-big { background-position: -8px -308px; height:47px; width: 140px; } .button-see-basket-big_over{ background-position: -8px -358px; } .button-more-infos{ background-position:42px -625px; } .button-more-infos_over{ background-position:42px -677px; } .button-add-basket{ background-position:-8px -725px; } .button-add-basket_over{ background-position:-8px -777px; } .button-too-late{ background-position:-8px -829px; } .button-choose-size{ background-position:-8px -881px; } .button-zoom-andicon{ background-position:0 -1353px; } .button-zoom-andicon_over{ background-position:0 -1405px; } .button-send{ background-position: -11px -1457px; height: 30px; width: 107px; } .button-send_over{ background-position: -11px -1509px; height: 30px; width: 107px; } .button-validate{ background-position: -9px -1561px; height: 30px; width: 80px; } .button-validate_over{ background-position: -9px -1613px; height: 30px; width: 80px; } .button-undo{ background-position: -2px -1659px; width: 100px; } .button-undo_over{ background-position: -2px -1711px; width: 100px; } .button-show{ background-position:-9px -2081px; display:block; height:34px; margin:0 auto; width:97px; } .button-close{ background: url(https://i2.cdscdn.com/struct/common/icon/icone.gif) no-repeat scroll 46px -1400px transparent; color: #3C5080; cursor: pointer; display: block; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; min-width: 28px; padding: 0 35px 0 0; position: absolute; right: 10px; top: 15px; } .button-home{ background-position:-11px -2274px; height:35px; margin:0 auto; width:126px; } /* * Following rules concerns buttons-small*.png */ .button-decline-insurance, .button-decline-waranty, .button-text{ background-image: url(https://i2.cdscdn.com/imagesok/button/buttons-small.png); width: 145px } .button-decline-insurance{ background-position: 0 3px; } .button-decline-insurance_over{ background-position: 0 -41px; } .button-decline-waranty{ background-position: 0 -85px; } .button-decline-waranty_over{ background-position: 0 -129px; } .button-product-added { /* TO BE APPLIED ON AN EMPTY DIV */ background: url(https://i2.cdscdn.com/imagesok/imagesok/button/buttons-small.png) repeat scroll -7px -265px transparent; display: inline-block; height: 28px; margin:0 auto; width:120px; } .buttonValidateCdsPro { background-position: -10px -2231px; height: 24px; width: 68px; } /** * sprite button-small.png */ .button-small{ background-image:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png); background-repeat:no-repeat; display:inline-block; border:none; cursor:pointer; /* inline-block support for IE @TODO put this in a ie.css file */ zoom:1; *display:inline; } /** * download button ( blue color ) */ .button-download{ background-position:-8px -915px; height:26px; width:102px; } /* * Following rules concerns buttons-basket.png * @author CJU */ .button-add-basket-200, .button-add-basket-161, .button-add-basket-123, .button-add-basket-90{ background-image:url(https://i2.cdscdn.com/struct/common/button/buttons-basket.png); border:none; /*avoid the border bug if buttons have input tags*/ cursor:pointer; } .button-add-basket-161{ background-position:-8px 0; width:161px; } .button-add-basket-161_over{ background-position:-8px -52px; } .button-add-basket-90{ background-position:-8px -104px; width:90px; height:33px; } .button-add-basket-90_over{ background-position:-8px -156px; } .button-add-basket-123{ background-position:-8px -208px; width:123px; height:24px; } .button-add-basket-123_over{ background-position:-8px -260px; } .button-add-basket-200{ background-position:-8px -312px; height:45px; width:200px; } .button-add-basket-200_over{ background-position:-8px -364px; } /*add to basket button vignette*/ .ra-vignettebottominputselect,.ra-vignettebottominputselect_over,.ra-vignettebottominputselectaddproductselected{ width:136px; height:38px; display:block; float:left; border:none; margin:0 0 0 5px; cursor:pointer; background:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png); } .ra-vignettebottominputselectalone,.ra-vignettebottominputselectaddproduct{ background:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png); width:136px; height:38px; display:block; border:none; margin:0 auto; } .ra-vignettebottominputselect,.ra-vignettebottominputselectalone{ background-position:0 -172px; cursor:pointer; } .ra-vignettebottominputselect_over,.ra-vignettebottominputselectalone_over{ background-position:0 -217px; cursor:pointer; } .ra-vignettebottominputselectaddproduct{ cursor:default; background-position:0 -260px; } .ra-vignettebottominputselectaddproductselected{ cursor:default; background-position:0 -260px; } /** ************************************************************************************************************* * Display list or block button * * When a button has a rollover we apply "_over" behind the default class for jquery call * @todo : paste this code in the button.css file */ .DisplayButtonStd001, .DisplayButtonStd003, .DisplayButtonStd001_over { float: left; height: 26px; margin: 10px 0 0 0; width: 26px; } .DisplayButtonStd001 {/** display list */ background: transparent; } .DisplayButtonStd001_over {/** Display list: rollover */ background: #3C5080 url(https://i2.cdscdn.com/struct/common/button/pager-filter.png) no-repeat -8px -51px; } .DisplayButtonIconStd001, .DisplayButtonIconStd001_over, .DisplayButtonIconStd002, .DisplayButtonIconStd002_over, .DisplayButtonIconStd003 { display: block; height: 26px; margin: 0; width: 26px; /* properties for HTML button tag*/ border:none; cursor:pointer; } .DisplayButtonIconStd001 {/** list blue: default */ background: url(https://i2.cdscdn.com/struct/common/icon/icone.gif) 0 -699px no-repeat; } .DisplayButtonIconStd001_over {/** list white: rollover */ background: url(https://i2.cdscdn.com/struct/common/icon/icone.gif) 1px -668px no-repeat; } .DisplayButtonIconStd002 {/** block blue: default */ background: url(https://i2.cdscdn.com/struct/common/icon/icone.gif) 0 -760px no-repeat; } .DisplayButtonIconStd002_over {/** block white: rollover */ background: url(https://i2.cdscdn.com/struct/common/icon/icone.gif) 1px -729px no-repeat; } .DisplayButtonIconStd003 {/** fus�e */ background-image: url(https://i2.cdscdn.com/struct/search/icone-search.png); background-position: 0 0; background-repeat: no-repeat; } /** ************************************************************************************************************* * Pagination buttons * * When a button has a rollover we apply "_over" behind the default class for jquery call * @todo : paste this code in the button.css file * @todo remove this, and make it the same code as DisplayButtonIconStdxxx */ .PaginationButtons, .pagination-buttons-alphabet{ list-style-type: none; float: right; font-family: arial; font-size: 10px; margin:0; padding: 0; position:relative; } .PaginationButtons{ margin-bottom:1em; margin-top:0.5em; } .pagination-buttons-alphabet{ left: 5px; margin: 0; position: absolute; top: 8px; font-size: 12px; font-weight: bold; } .PaginationButtons a{ text-decoration:none; } .PaginationButtons a:hover{ text-decoration:underline; } /** default buttons buttons (number button:PaginationButtonStd001 and 3dots button:PaginationButtonStd004) */ .PaginationButtonStd001, .PaginationButtonStd001_over, .PaginationButtonStd004, .PaginationButtonStd005, .PaginationButtonStd005_over, .PaginationButtonStd006, .PaginationButtonStd006_over { display: block; float: left; height: 26px; } /** * next and previous buttons * @todo refactor, rename, cleanup */ .PaginationButtonStd002, .PaginationButtonStd003 { display: block; float: left; height: 26px; line-height: 26px; margin: 0; width: 72px; } .PaginationButtonStd001 {/** default pagination button */ background: url(https://i2.cdscdn.com/struct/common/button/pager-filter.png) no-repeat -8px -102px; margin: 0 5px 0 0; width: 26px; } .PaginationButtonStd001_over {/** default pagination button rollover */ background: #3C5080 url(https://i2.cdscdn.com/struct/common/button/pager-filter.png) no-repeat -8px -51px; width: 26px; margin: 0 5px 0 0; } /** previous pagination button */ .PaginationButtonStd002 { background: url(https://i2.cdscdn.com/struct/common/button/pager-filter.png) no-repeat -8px -204px; margin: 0 15px 0 0; } /** next pagination button */ .PaginationButtonStd003 { background: url(https://i2.cdscdn.com/struct/common/button/pager-filter.png) no-repeat -8px -153px; margin: 0 0 0 8px; } /** links for previous and next pagination buttons */ .PaginationButtonStd002a, .PaginationButtonStd003a { color: #3C5080; display: block; font-weight: 700; height: 26px; line-height: 26px; text-align: center; width: 72px; } .PaginationButtonStd004 { width: 26px; line-height: 23px; text-align: center; } .PaginationButtonStd005 {/** pagination of the letters in the alphabet carousel */ width: 26px; color: #3C5080; margin: 0 1px 0 0; } .PaginationButtonStd005_over, .PaginationButtonStd005_selected {/** default pagination button rollover */ background: #2254a3 url(https://i2.cdscdn.com/struct/common/button/pager-filter.png) no-repeat -8px -51px; color: #FFF; font-weight: bold; } .PaginationButtonStd006 {/** pagination of the dates in the alphabet carousel */ width: 80px; color: #3C5080; margin: 0 1px 0 0; } .PaginationButtonStd006_over {/** default pagination button rollover */ background: #2254a3 url(https://i2.cdscdn.com/struct/common/button/pager-filter.png) no-repeat -8px -51px; color: #FFF; font-weight: bold; } /** links for default buttons */ .PaginationButtonStd001a, .PaginationButtonStd001a_over, .PaginationButtonStd001a_selected, .PaginationButtonStd001_noclick,/** color of the alphabet pagination icon when it is not cliquable */ .PaginationButtonStd006a, .PaginationButtonStd006a_over, .PaginationButtonStd006_noclick {/** color of the date pagination icon when it is not cliquable */ display: block; font-weight: 700; height: 26px; line-height: 26px; text-align: center; } .PaginationButtonStd001a {/** default link pagination button */ color: #3c5a81; width: 26px; } .PaginationButtonStd001a_over, .PaginationButtonStd001a_selected {/** default link pagination button rollover */ color: #FFF; text-decoration: none; width: 26px; } .PaginationButtonStd001_noclick {/** color of the alphabet pagination icon when it is not cliquable */ color: #C4CAD6; width: 26px; } .PaginationButtonStd006a {/** date pagination button */ color: #3c5a81; width: 80px; } .PaginationButtonStd006_noclick {/** date color of the alphabet pagination icon when it is not cliquable */ color: #C4CAD6; width: 80px; } .PaginationButtonStd006a_over {/** date pagination button rollover */ color: #FFF; text-decoration: none; width: 80px; } /** * Properties for HTML button tag */ .PaginationButtonStd001a, .PaginationButtonStd001a_over, .PaginationButtonStd002a, .PaginationButtonStd002a_over, .PaginationButtonStd003a, .PaginationButtonStd003a_over, .PaginationButtonStd004 button { background:none; border:none; cursor:pointer; } .PaginationButtonStd004 button { background:none; border:none; cursor:pointer; height:26px; padding-top:4px; } .new-search-button-absolute .facet-criterion{ cursor:pointer; margin:0; position:static; } /** * Market Place * * CSS of the market place cartouche productsheet * *


 *   
 *     13 offres à partir de 9999,99 €
 *   
 *

* *


 *   Vous souhaitez vendre cet article ?
 *

* * @author Nicolas Gou�set nicolas.goueset@cdiscount.com * @package cdiscount-ui * @version 1.0 */ .mp-PriceStd001{ background: url(https://i2.cdscdn.com/struct/MarketPlace/btn_marketplace.png); clear: both; height: 30px; margin: 8px 5px 0 5px; padding: 9px 0 0 30px; width: 212px; } /** * close buttons * * @author Nicolas Gou�set nicolas.goueset@cdiscount.com * @package cdiscount-ui * @version 1.0 */ .button-close-Std001{/* close button in the market place */ background: url(https://i2.cdscdn.com/struct/common/icon/icone.gif) 46px -1400px no-repeat; color: #3c5080; cursor: pointer; float: right; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; padding: 0 40px 0 0; } /** * button standard 002 * * @author Nicolas Gou�set nicolas.goueset@cdiscount.com */ .ButtonStd002{ background: url(https://i2.cdscdn.com/struct/common/button/ButtonStd002.png) no-repeat left -3px; display: block; float: right; height: 43px; margin: 0 13px 0 0; padding: 0; } .ButtonTopStd002{ background: url(https://i2.cdscdn.com/struct/common/button/ButtonStd002.png) no-repeat right -3px; display: inline-block; *display: inline; height: 32px; margin: 0 -11px 0 0; padding: 11px 10px 0 10px; zoom: 1; } .button-download-mac{ background-image:url(https://i2.cdscdn.com/imagesok/button/button-download-mac.png); background-repeat:no-repeat; display:inline-block; border:none; cursor:pointer; /* inline-block support for IE @TODO put this in a ie.css file */ zoom:1; *display:inline; width:113px; height:25px; } .button-download-pc{ background-image:url(https://i2.cdscdn.com/imagesok/button/button-download-pc.png); background-repeat:no-repeat; display:inline-block; border:none; cursor:pointer; /* inline-block support for IE @TODO put this in a ie.css file */ zoom:1; *display:inline; width:113px; height:25px; } .button_over, /* so as a simple button can also work on JS hovering */ .button-continue-shopping-alt_over{ background-position: 0 -52px; } .button-continue-shopping{ background-position: 0 -104px; width: 193px; } .button-continue-shopping_over{ background-position: 0 -156px; } .button-continue-shopping-grey{ background-position: 0 0; width: 187px; } .button-continue-shopping-grey_over{ background-position: 0 -52px; } .button-see-basket{ background-position: -8px -208px; width: 150px; } .button-see-basket_over{ background-position: -8px -260px; } .button-see-basket-big { background-position: -8px -308px; height:47px; width: 140px; } .button-see-basket-big_over{ background-position: -8px -358px; } /** * Buttons More info */ .button-more-infos{ background:url(https://i2.cdscdn.com/struct/common/button/buttons-big.png); background-position:42px -625px; background-repeat:no-repeat; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; display:inline-block; border:none; cursor:pointer; height:42px; width:197px; /* inline-block support for IE @TODO put this in a ie.css file */ zoom:1; *display:inline; } .button-more-infos_over{background-position:42px -677px;} /** * Buttons to get to the productsheet popin * */ .button-text{ background-position:-8px -307px; font-size:12px; font-weight:bold; height:26px; line-height:26px; padding-left:3px; text-align:center; width:80px; color:#3c5a80; } .button-text span{ background:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png) right -351px; display:block; text-align:center; } .button-text_over{ background-position:-8px -395px; text-decoration:underline; } .button-text_over span{background-position:right -439px;} .button-text, .button-textExtended{ background:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png) no-repeat -8px -306px; float:right; font-weight:bold; height:30px; line-height:28px; padding-left:3px; width:120px; color:#3c5a80; text-align:left; } .button-textExtended_over{background-position:-8px -1084px;} .button-text span, .button-textExtended span{ background:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png) no-repeat -35px -350px; display:block; font-size:11px; } .button-textExtended_over span{ background-position:-35px -1129px; color:#fff; } .button-textExtended_li a:hover{text-decoration:none;} .button-textExtended .buttonIcon{ background-image:url(https://i2.cdscdn.com/struct/common/icon/icone-png.png); background-repeat:no-repeat; display:inline-block; height:26px; width:15px; margin-left:7px; float:left; } .button-textExtended .iconArrow{background-position:0 -97px;} .button-textExtended_over .iconArrow{background-position:0 -125px;} /* .buttonSelectSize { background-image:url(https://i2.cdscdn.com/struct/common/button/buttonSelectSize.png); background-repeat:no-repeat; width: 150px; height: 30px; border : none; } .buttonSelectSize:hover { background-position: 0 -30px; } */ button.selectSize { background-image: url(https://i2.cdscdn.com/struct/common/button/buttonSelectSize.png); color: rgba(0,0,0,0); overflow: hidden; border: none; cursor: pointer; } button.selectSize .buttonTextShowCase { visibility:hidden; } button.selectSize_00 { width: 76px; height: 26px } button.selectSize_00:hover { background-position: 0 -26px; } button.selectSize_01 { width: 108px; height: 18px; background-position: 0 -52px; margin-left: 7px; } button.selectSize_01:hover { background-position: 0 -70px; } button.selectSize_02 { width: 147px; height: 30px; background-position: 0 -88px; margin-bottom: 1em; } button.selectSize_02:hover { background-position: 0 -118px; } button.selectSize_03 { width: 147px; height: 30px; background-position: 0 -88px; margin-bottom: 1em; margin-left:40px; } button.selectSize_03:hover { background-position: 0 -118px; } button.selectSize_04 { width: 76px; height: 26px; margin-top: 35px; margin-bottom: 10px; margin-left: 3px; } button.selectSize_04:hover { background-position: 0 -26px; } button.selectSize_05 { width: 108px; height: 18px; background-position: 0 -52px; margin-left: 7px; margin-top: 20px; margin-bottom: 10px; } button.selectSize_05:hover { background-position: 0 -70px; } button.selectSize_06 { width: 76px; height: 26px; margin-left: 15px; } button.selectSize_06:hover { background-position: 0 -26px; } button.selectSize_07 { width: 76px; height: 26px; margin-left: 3px; margin-top: 5px; } button.selectSize_07:hover { background-position: 0 -26px; }