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.
 
 
 
 
 
 

1096 lines
17 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;
margin: 0;
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, 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;
}