You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1145 lines
16 KiB

/**
Cagette.net SASS stylesheet
Use it with with bootstrap 3
**/
@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,700');
//@import '_shop';
@import '_map';
/*body{
background-color:#F8F4E5 !important;
}*/
h1,h2,h3,h4{
margin-top: 4px !important;
margin-bottom: 8px !important;
font-style: italic;
}
/* buttons */
/*.btn {
text-transform: uppercase;
font-size: 14px !important;
padding : 7px 25px !important;
font-weight:normal !important;
}
/*.btn-lg{
font-size: 16px !important;
}
.btn-sm {
font-size: 12px !important;
padding : 5px 10px !important;
}
.btn-xs {
font-size: 11px !important;
padding : 2px 5px !important;
}
.btn-link {
text-transform: none;
}*/
a{
cursor:pointer;
}
/* navigation */
ul.nav li {
text-transform: uppercase;
font-size: 14px;
}
/* subnav in contractadmin*/
.nav-pills > li.active > a {
background-color: #efe9d5 !important;
color: #e95216 !important;
}
/* Footer */
#footer {
background: #84BD55;
border-radius: 8px;
padding: 20px;
ul>li>a {
color: #333;
}
ul {
margin: 3px 0 0;
padding: 0;
text-align: left;
list-style: none;
font-size: 14px;
}
.cagsocialmedia li a {
color : #fff;
font-size: 20px;
min-width: 32px;
/*height: 32px;*/
padding: 2px 0 0;
display : inline-block;
}
.cagsocialmedia {
vertical-align: top;
}
.cagsocialmedia li {
display: inline-block;
text-align: center;
}
.cagfb {
background-color : #4267B2;
}
.cagtwitter {
background-color : #1DA1F2;
}
.cagyoutube {
background-color : #FF0000;
}
}
#subfooter {
/*background-color : #313131;
color : #fff;*/
text-align: center;
font-size : 14px;
padding : 15px 0 25px 0;
span {
color :#979797;
font-size : 11px;
}
}
.sqlLog{
margin-top:24px;
font-size:10px;
background:#AAA;
a{ color:#666; }
}
.contact{
border:2px solid #CCC ;
border-radius:8px;
margin:8px;
padding:8px;
width:250px;
min-height: 100px;
}
.homeBlock{
margin-bottom:32px;
background:#FFF;
border-radius:8px;
position: relative;
padding:8px;
.content{
margin: 8px 8px 8px 90px;
}
}
//pour les hauts de nav
span.panel-title{
color: #966125 !important;
font-size: 20px !important;
font-weight:normal !important;
}
.article{
margin-bottom:16px;
background:#FFF;
border-radius:8px;
position: relative;
padding:8px;
}
.white{
margin-bottom:16px;
background:#FFF;
border-radius:4px;
position: relative;
}
.disabled{
opacity: 0.5;
}
/* block marron */
.block{
margin-bottom: 12px;
background : #FFF;
border-radius : 8px;
position : relative;
padding : 8px;
}
/* block marron + contours */
.block2{
margin-bottom : 32px;
background : #F0D277;
border-radius : 8px;
position : relative;
padding : 8px;
border: 2px solid #C3A04C;
}
/* product in shop */
table.product{
td{
padding:8px;
vertical-align:top;
}
width:100%;
height:135px;
overflow:auto;
.desc{
font-size:90%;
color:#666;
}
a.productName{
line-height: 20px;
display: block;
font-weight:bold;
}
}
/* GLOBAL TABLE SKINNING */
//separator between rows
table.table tr.head>td{
//border-top: 1px solid #BBB;
border-top: 3px solid #DDD;
height: 30px;
font-size:120%;
vertical-align: bottom;
}
//sub-row, darker bg
table.table tr.subrow{
background-color:#EEE;
}
//listing have no overflow
table.listing tr td{
white-space: nowrap;
overflow-x:hidden;
}
table.table tr.disabled td,table.table tr.inactive td{
opacity:0.4;
}
/* DIV TABLE */
// used in UserOrder react comp
div.tableHeader{
font-weight: bold;
color: #AAA;
border-bottom: 1px solid #DDD;
margin-bottom: 12px;
}
/*table.table>tbody>tr>th{
background-color:white;
color:#BBB;
border-top:none;
}*/
div.reportHeader{
background-color:#DDD;
}
/* a product order in a table style */
.productOrder{
border-bottom:1px solid #DDD;
margin-bottom:6px;
.infos{
color:#AAA;
font-size:0.8em;
}
}
/* A product reference */
.ref{
color:#AAA;
font-family:monospace;
font-size:0.9em;
}
/* Link to share */
.linkToShare{
font-family:Monospace;
padding: 12px;
border: 1px solid #DDD;
border-radius: 6px;
background-color: #f5f5f5;
}
/* make <a> like clickable divs */
.clickable{
display:block;
border:1px solid #CCC;
border-radius:8px;
color:inherit;
background-color:white;
margin-bottom:12px;
padding:8px;
&:hover{
cursor: pointer;
background-color:lighten(#F0D277,10%);
border-color:darken(#F0D277,10%);
text-decoration:none;
transition: all 0.15s ease;
}
&:active{
cursor: pointer;
background-color:#F0D277;
border-color:darken(#F0D277,10%);
text-decoration:none;
transform:scale(0.95);
}
&.disabled{
background-color: lightgray;
cursor: not-allowed;
}
}
/* a cagette group block (use it with .clickable ) */
.groupBlock{
height:110px;
overflow:hidden;
vertical-align:top;
position: relative;
.address{
font-size: 0.9em;
}
.distance {
font-weight: bold;
color: #84bd55;
font-size: 1.2em;
position: absolute;
right: 8px;
bottom: 6px;
}
}
/* a cagette pro block (use it with .clickable ) */
.proBlock{
height:110px;
overflow:hidden;
vertical-align:top;
position: relative;
background:#bad096;
&:hover{
background:darken(#bad096,10%);
}
/*span.cpro{
position: absolute;
right:0px;
top:0px;
background:darken(#bad096,30%);
color:yellow;
height: 12px;
padding:4px;
font-weight: bold;
}*/
}
.header{
.accountBlock{
a{
color: #777;
}
}
}
/*
SHOP v1
*/
.shop{
.header{
background-color:#749E3C;
display:inline-block;
width:100%;
border-top-left-radius:8px;
border-top-right-radius:8px;
padding:12px;
font-size: 16px;
line-height: 22px;
color:white;
a{ color:white; }
.info{ font-weight: bold; }
}
.body{
background:white;
display:inline-block;
width:100%;
padding-top: 12px;
.catHeader{
font-weight:bold;
font-size:1.2em;
color:#583816;
border-bottom:1px solid #CCC;
width:100%;
}
}
.product{
display: inline-block;
.name{
padding-left:8px;
}
.warning{
font-size:11px;
color:#900;
font-weight:bold;
}
}
}
.price{
font-weight:bold;
font-size:1.3em;
}
.vat{
color:#999999;
//font-size:80%;
}
.detail{
color:#999999;
font-size:90%;
}
//in shop page
#cartContainer.scrolled{
position:fixed;
top:125px;
}
.cartDiv{
margin-bottom:16px;
background:#007700;
border-radius:8px;
position: relative;
padding:8px;
color:white;
h2{
color:white !important;
}
a.infos{
margin-top:8px;
font-size:12px;
color:white !important;
display:block;
}
#cart{
margin-bottom:12px;
div.order{
margin-bottom:8px;
a{
margin-right:8px;
}
}
div.total{
font-size:120%;
//font-weight:bold;
margin-bottom:12px;
margin-top:12px;
border-top:1px solid #FFF;
}
}
}
.place{
color:#666;
font-weight:bold;
margin-top:13px;
padding:8px;
font-size:13px;
border-top:1px solid #CCC ;
}
.distribMessage{
color:#FFF;
font-weight:bold;
padding:4px;
margin-top:13px;
font-size:13px;
background-color:#080;
/*border-top:1px solid #333 ;*/
}
.dateBoxOffset{
position: absolute;
top: -16px;
left: -18px;
display: block;
}
.dateBox{
border-radius:8px;
background-color:#c59654;
color:#FFF;
font-size:13px;
line-height: 13px;
text-align:center;
vertical-align:middle;
width: 90px;
margin:0;
padding:4px;
box-shadow: 4px 4px 0px #292929;
.box{
line-height:22px;
background-color:#FFFFFF;
color:#666;
font-size:14px;
font-weight:bold;
text-align:center;
margin: 0px;
border-radius:4px;
}
/* place link */
a{
color: #FFFFFF !important;
}
a:hover{
color: #FFFFFF !important;
}
}
/* categories */
span.tag{
color:white;
font-size:80%;
//font-weight:bold;
padding:4px;
background-color:#666666;
border-radius:4px;
line-height: 30px;
}
span.tag.active{
padding:12px;
font-size: 16px;
line-height: 45px;
}
/**
Popovers for help and tutorials
**/
.popover{
color:white;
font-size:14px;
//font-family:'Arial','sans-serif' !important;
h3.popover-title{
padding: 4px;
color:#BB9931 !important;
border-bottom:1px solid #BB9931 !important;
background-color:none;
}
.popover-content{
font-size: 16px;
b{ color:#FC0; font-weight:normal; }
}
.footer{
border-top: 1px solid #BB9931;
height: 45px;
padding: 12px 0;
.pull-left .btn{
background-color:#583816;
color:white;
border:1px solid white;
}
.pull-right .btn{
background-color:#FC0;
color:#583816;
border:1px solid #583816;
}
}
}
/* skin a modal like a tuto popover */
.modal.help{
.modal-header{
font-size: 1.3em;
color:#BB9931 !important;
border-bottom:1px solid #BB9931 !important;
font-weight:bold !important;
//font-family:'Arial','sans-serif' !important;
background-color:#583816 !important;
}
.modal-content{
background-color:#583816 !important;
color:white;
}
.modal-footer{
border-top:1px solid #BB9931 !important;
}
}
/* hightlight a zone for tutos */
.highlight{
border: 2px dashed orange;
border-radius: 16px;
}
/* Distribution box for the homepage */
.distrib{
margin: 0px 0px 28px 0px;
position:relative;
.header{
display: block;
height: 72px;
overflow:hidden;
border-top-left-radius:8px;
border-top-right-radius:8px;
color:#FFF;
background-color:#749E3C;
vertical-align:middle;
margin:0;
padding: 6px 6px 6px 90px;
&.disabled{
background-color:#999;
opacity: 1;
}
&.orders{
background-color:#B2823F;
}
.info{
font-size:16px;
line-height: 22px;
/* place link */
a{
color: #FFFFFF !important;
&:hover{ color: #FFFFFF !important; }
}
}
.date{
line-height:23px;
background-color:#FFFFFF;
color:#666;
font-size:14px;
text-align:center;
margin: 0 8px 0 0;
border-radius:6px;
border: 4px solid #C6C6C6;
}
.address, .closing{
font-weight:normal;
font-size:0.9em;
line-height: 16px;
}
}
.myorder{
font-weight:bold;
color:#999;
background:white;
padding: 11px 0 4px 16px;
}
.content{
padding: 6px 6px 6px 6px;
background-color:#85B14D;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
&.disabled{
background:#AAA;
opacity: 1;
}
&.orders{
background:#FFF;
padding-left: 50px;
}
.footer{
color:#999;
a{color:#999;}
font-size:0.9em;
}
}
}
div.groupImg{
background:no-repeat center;
background-size: cover;
width: 110px;
height: 110px;
}
// product thumbnail for shop and home page
div.productImg{
display:inline-block;
border-radius: 3px;
width:70px;
height:70px;
margin:4px;
background:no-repeat center;
background-size: cover;
//margin:0;
}
//Product React component
div.product{
div.productImg{
margin-right: 12px;
vertical-align: middle;
}
}
//Product in ProductSelect React component
div.productSelect{
/*div.selector{
width:64px;
height: 64px;
display: inline-block;
cursor: pointer;
&.active{
background-color: #007700;
}
&:hover{
background-color: #00AA00;
}
}*/
div.product{
display: inline-block;
}
}
// Cagette Pro Catalogs
div.productBox{
div.productImg{
background-size: cover;
height: 220px;
width:220px;
background-position: center center;
border-radius:6px;
}
div.productName{
display:block;
font-weight:bold;
color:#967820;
text-align:center;
font-size:1.2em;
margin-bottom:4px;
}
.price{
font-weight:bold;
text-align:right;
}
}
// typeahead ( autocomplete js lib )
.tt-menu{
background-color:#f5e3ac;
}
.tt-suggestion{
background-color:#f5e3ac;
padding:8px;
border-top:1px solid #CCC;
color:darken(#f5e3ac,60%);
cursor:pointer;
font-style:italic;
&:hover{
background-color:darken(#f5e3ac,10%);
}
}
//txp product input
#pInput{
.txpProduct{
color:#AAA;
font-weight:bold;
font-size:0.8em;
margin:4px 0;
}
img{
max-width:100px;
max-height:100px;
}
}
//Product composer
/*
div.ProductComp{
margin:8px 0;
padding:8px 0;
border-bottom:solid 1px #CCC;
}
.ComposerApp{
.add-button{
vertical-align:top !important;
}
}
*/
//basket
div.basketNumber{
display:inline-block;
background-color:#333;
border-radius: 10px;
padding: 6px;
font-weight:bold;
color:#CCC;
}
tr.success td div.basketNumber{
background-color:#070;
color:white;
}
tr.danger td div.basketNumber{
background-color:#d9534f;
color:white;
}
/* fixed bar on bottom for buttons */
.fixedBar{
position: fixed;
bottom: 0;
left: 0;
background: white;
width: 100%;
margin: 0;
padding: 8px;
border-top: 3px solid #CCC;
z-index: 99;
}
/*!
* https://github.com/YouCanBookMe/react-datetime
*/
.rdt {
position: relative;
}
.rdtPicker {
display: none;
position: absolute;
width: 250px;
padding: 4px;
margin-top: 1px;
z-index: 99999 !important;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
border: 1px solid #f9f9f9;
}
.rdtOpen .rdtPicker {
display: block;
}
.rdtStatic .rdtPicker {
box-shadow: none;
position: static;
}
.rdtPicker .rdtTimeToggle {
text-align: center;
}
.rdtPicker table {
width: 100%;
margin: 0;
}
.rdtPicker td,
.rdtPicker th {
text-align: center;
height: 28px;
}
.rdtPicker td {
cursor: pointer;
}
.rdtPicker td.rdtDay:hover,
.rdtPicker td.rdtHour:hover,
.rdtPicker td.rdtMinute:hover,
.rdtPicker td.rdtSecond:hover,
.rdtPicker .rdtTimeToggle:hover {
background: #eeeeee;
cursor: pointer;
}
.rdtPicker td.rdtOld,
.rdtPicker td.rdtNew {
color: #999999;
}
.rdtPicker td.rdtToday {
position: relative;
}
.rdtPicker td.rdtToday:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-bottom: 7px solid #428bca;
border-top-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 4px;
right: 4px;
}
.rdtPicker td.rdtActive,
.rdtPicker td.rdtActive:hover {
background-color: #428bca;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.rdtPicker td.rdtActive.rdtToday:before {
border-bottom-color: #fff;
}
.rdtPicker td.rdtDisabled,
.rdtPicker td.rdtDisabled:hover {
background: none;
color: #999999;
cursor: not-allowed;
}
.rdtPicker td span.rdtOld {
color: #999999;
}
.rdtPicker td span.rdtDisabled,
.rdtPicker td span.rdtDisabled:hover {
background: none;
color: #999999;
cursor: not-allowed;
}
.rdtPicker th {
border-bottom: 1px solid #f9f9f9;
}
.rdtPicker .dow {
width: 14.2857%;
border-bottom: none;
}
.rdtPicker th.rdtSwitch {
width: 100px;
}
.rdtPicker th.rdtNext,
.rdtPicker th.rdtPrev {
font-size: 21px;
vertical-align: top;
}
.rdtPrev span,
.rdtNext span {
display: block;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
background: none;
color: #999999;
cursor: not-allowed;
}
.rdtPicker thead tr:first-child th {
cursor: pointer;
}
.rdtPicker thead tr:first-child th:hover {
background: #eeeeee;
}
.rdtPicker tfoot {
border-top: 1px solid #f9f9f9;
}
.rdtPicker button {
border: none;
background: none;
cursor: pointer;
}
.rdtPicker button:hover {
background-color: #eee;
}
.rdtPicker thead button {
width: 100%;
height: 100%;
}
td.rdtMonth,
td.rdtYear {
height: 50px;
width: 25%;
cursor: pointer;
}
td.rdtMonth:hover,
td.rdtYear:hover {
background: #eee;
}
.rdtCounters {
display: inline-block;
}
.rdtCounters > div {
float: left;
}
.rdtCounter {
height: 100px;
}
.rdtCounter {
width: 40px;
}
.rdtCounterSeparator {
line-height: 100px;
}
.rdtCounter .rdtBtn {
height: 40%;
line-height: 40px;
cursor: pointer;
display: block;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.rdtCounter .rdtBtn:hover {
background: #eee;
}
.rdtCounter .rdtCount {
height: 20%;
font-size: 1.2em;
}
.rdtMilli {
vertical-align: middle;
padding-left: 8px;
width: 48px;
}
.rdtMilli input {
width: 100%;
font-size: 1.2em;
margin-top: 37px;
}