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.

592 line
11KB

  1. /* Welcome to Compass.
  2. * In this file you should write your main styles. (or centralize your imports)
  3. * Import this file using the following HTML or equivalent:
  4. * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
  5. //@import "compass/reset";
  6. @import "compass" ;
  7. $dir-img: '../img/' ;
  8. $dir-fonts: '../fonts/' ;
  9. $jaune: #fdd44b ;
  10. $orange: darken(#FDB64B,20%) ;
  11. $gris1: #e0e0e0 ;
  12. $gris2: #e0e0e0 ;
  13. $courant: #505050 ;
  14. $color2: lighten($jaune,30%) ;
  15. $color2: #fff2c7 ;
  16. $color2: #fff6d5 ;
  17. $color1: #BB8757 ;
  18. $color2: #F8F1DD ;
  19. @import "_fonts.scss" ;
  20. html {
  21. height: 100% ;
  22. }
  23. body {
  24. position: relative ;
  25. color: #505050 ;
  26. font-family: 'Arial' ;
  27. background-attachment: fixed ;
  28. min-height: 100%;
  29. margin: 0;
  30. padding: 0;
  31. }
  32. strong {
  33. font-weight: bold ;
  34. }
  35. #main {
  36. a {
  37. color: $courant ;
  38. text-decoration: underline ;
  39. &:focus, &:active {
  40. outline-color: gray ;
  41. color: $color1 ;
  42. }
  43. &:hover {
  44. color: $color1 ;
  45. }
  46. &.btn {
  47. text-decoration: none ;
  48. }
  49. }
  50. .btn-primary {
  51. background-color: $color1 ;
  52. border: solid 1px $color1 ;
  53. color: white ;
  54. &:hover, &:active, &:focus {
  55. background-color: darken($color1, 5) ;
  56. border: solid 1px $color1 ;
  57. color: white ;
  58. }
  59. }
  60. .form-control:focus {
  61. @include box-shadow(none) ;
  62. border: solid 1px $color1 ;
  63. }
  64. }
  65. p {
  66. padding-bottom: 20px ;
  67. line-height: 21px ;
  68. }
  69. ul {
  70. padding-left: 20px ;
  71. list-style-type: disc ;
  72. margin-bottom: 10px ;
  73. li {
  74. padding-left: 5px ;
  75. }
  76. }
  77. .clr {
  78. clear: both ;
  79. }
  80. .btn {
  81. background-image: none ;
  82. }
  83. #main .alert {
  84. background-image: none;
  85. background-color: white ;
  86. border-bottom-width: 3px ;
  87. }
  88. .alert {
  89. &.alert-warning {
  90. a {
  91. color: #8a6d3b ;
  92. //text-decoration: none ;
  93. //font-weight: bold ;
  94. }
  95. }
  96. }
  97. #main {
  98. position: relative ;
  99. padding-bottom: 150px ;
  100. .inner {
  101. width: 960px ;
  102. margin: 0px auto ;
  103. }
  104. }
  105. #content .content-text {
  106. h1 {
  107. font-family: 'myriadpro-regular' ;
  108. font-size: 30px ;
  109. color: black ;
  110. text-transform: uppercase ;
  111. }
  112. h2 {
  113. font-family: 'comfortaaregular' ;
  114. font-size: 20px ;
  115. text-transform: none ;
  116. padding-bottom: 0px ;
  117. margin-bottom: 5px ;
  118. margin-top: 5px ;
  119. }
  120. }
  121. #block-demo {
  122. padding: 10px 0px ;
  123. background-color: $color1 ;
  124. color: white;
  125. text-align: center ;
  126. a {
  127. color: white ;
  128. text-decoration: underline ;
  129. }
  130. }
  131. #header {
  132. z-index: 100 ;
  133. border-bottom: solid 1px $gris1 ;
  134. background-color: #f8f1dd ;
  135. height: 86px ;
  136. .container {
  137. position: relative ;
  138. }
  139. #env-dev {
  140. font-family: 'comfortaabold' ;
  141. text-align: center ;
  142. font-size: 18px ;
  143. padding-top: 10px ;
  144. padding-bottom: 10px ;
  145. color: $color1 ;
  146. background-color: transparent ;
  147. position: absolute ;
  148. top: 18px ;
  149. left: 79px ;
  150. }
  151. #link-home {
  152. position: absolute ;
  153. top: 10px ;
  154. left: 0px ;
  155. text-decoration: none ;
  156. font-size: 22px ;
  157. color: black ;
  158. img {
  159. height: 60px ;
  160. margin-bottom: 5px ;
  161. }
  162. }
  163. #link-espace-boulanger {
  164. border-left: solid 1px #e0e0e0 ;
  165. color: $color1 ;
  166. }
  167. nav {
  168. padding-top: 22px ;
  169. ul {
  170. float: right ;
  171. li {
  172. a {
  173. text-decoration: none ;
  174. color: $courant ;
  175. &.active {
  176. background-color: white;
  177. }
  178. &:hover {
  179. color: black ;
  180. background-color: white ;
  181. }
  182. }
  183. }
  184. }
  185. }
  186. #link-logout {
  187. .nom {
  188. color: gray;
  189. font-size: 10px;
  190. left: 18px;
  191. position: relative;
  192. top: -4px;
  193. }
  194. }
  195. }
  196. .connected {
  197. #content {
  198. //padding-top: 15px ;
  199. }
  200. }
  201. #content {
  202. position: relative ;
  203. padding: 20px 0px ;
  204. padding-bottom: 0px ;
  205. padding-top: 35px ;
  206. min-height: 500px ;
  207. h1#title-site {
  208. font-family: "comfortaalight" ;
  209. font-size: 50px ;
  210. //border-bottom: 1px solid #e0e0e0 ;
  211. //font-weight: bold ;
  212. }
  213. h2 {
  214. color: black ;
  215. padding-bottom: 15px ;
  216. font-size: 25px ;
  217. line-height: 35px ;
  218. font-family: 'myriadpro-regular' ;
  219. text-transform: uppercase ;
  220. position: relative ;
  221. margin-top: 30px ;
  222. }
  223. h3 {
  224. color: black ;
  225. //font-family: "comfortaalight" ;
  226. font-size: 20px ;
  227. //padding-bottom: 12px ;
  228. }
  229. #description {
  230. img {
  231. width: 100% ;
  232. }
  233. }
  234. #main-img {
  235. max-width: 100% ;
  236. border: solid 1px #e0e0e0 ;
  237. padding: 5px ;
  238. @include border-radius(5px) ;
  239. }
  240. #row-presentation {
  241. text-align: center ;
  242. h1 {
  243. color: black ;
  244. }
  245. strong {
  246. font-family: 'myriadpro-light' ;
  247. font-size: 20px ;
  248. color: #B17A48 ;
  249. }
  250. }
  251. #row-signup {
  252. text-align: center ;
  253. margin-top: 40px ;
  254. a.btn {
  255. padding: 13px 32px ;
  256. font-size: 25px ;
  257. }
  258. }
  259. #row-clients-boulanger {
  260. margin-bottom: 50px ;
  261. text-align: center ;
  262. h2 {
  263. text-align: center ;
  264. margin-bottom: 15px ;
  265. padding-bottom: 0px ;
  266. img {
  267. height: 70px ;
  268. margin-bottom: 60px ;
  269. }
  270. }
  271. ul {
  272. text-align: left ;
  273. margin-left: 20% ;
  274. li {
  275. list-style-type: circle ;
  276. color: $color1 ;
  277. }
  278. }
  279. #clients {
  280. border-right: dotted 1px gray ;
  281. }
  282. .boulanger {
  283. .prix {
  284. span {
  285. background-color: $color2 ;
  286. a {
  287. color: $color1 ;
  288. text-decoration: none ;
  289. }
  290. }
  291. }
  292. }
  293. .prix {
  294. padding-top: 15px ;
  295. font-size: 18px ;
  296. text-align: center ;
  297. span {
  298. color: $color1 ;
  299. //background-color: $color2 ;
  300. border: solid 1px $color1 ;
  301. font-weight: normal ;
  302. font-size: 18px ;
  303. font-family: 'comfortaaregular' ;
  304. font-family: 'myriadpro-regular' ;
  305. text-transform: uppercase ;
  306. padding: 10px 15px ;
  307. padding-bottom: 7px ;
  308. @include border-radius(5px) ;
  309. }
  310. }
  311. #periode-essai {
  312. margin-top: 8px ;
  313. text-align: center ;
  314. font-size: 13px ;
  315. color: gray ;
  316. font-family: 'comfortaaregular' ;
  317. }
  318. }
  319. #btn-demo {
  320. &:hover, &:focus, &:active {
  321. color: black ;
  322. }
  323. }
  324. #modal-tarifs {
  325. .exemple {
  326. color: gray ;
  327. }
  328. }
  329. }
  330. #content #contact {
  331. display: none ;
  332. .icon {
  333. width: 55px ;
  334. top: -15px ;
  335. margin-left: -70px ;
  336. }
  337. #par-telephone {
  338. }
  339. .form-control:focus {
  340. /*@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $jaune) ;
  341. border-color: $jaune ;*/
  342. }
  343. .form-group {
  344. text-align: center ;
  345. }
  346. .img-right {
  347. float: right ;
  348. img {
  349. width: 300px ;
  350. }
  351. }
  352. }
  353. .form-control:focus {
  354. /*@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $jaune) ;
  355. border-color: $jaune ;*/
  356. }
  357. #footer {
  358. position: absolute ;
  359. bottom: 0px ;
  360. left: 0px ;
  361. width: 100% ;
  362. height: 50px ;
  363. background-color: white ;
  364. text-align: center ;
  365. border-top: 1px solid #e0e0e0 ;
  366. padding-top: 30px ;
  367. padding-bottom: 60px ;
  368. a {
  369. font-family: 'myriadpro-regular' ;
  370. color: #7e7e7e;
  371. color: white ;
  372. color: #999 ;
  373. text-transform: uppercase ;
  374. text-decoration: none ;
  375. padding-left: 10px ;
  376. padding-right: 10px ;
  377. border-right: solid 1px #7e7e7e ;
  378. border-right: solid 1px white ;
  379. &:hover {
  380. color: gray ;
  381. }
  382. &:last-child {
  383. border: 0px none ;
  384. }
  385. }
  386. }
  387. #content #mentions {
  388. padding-top: 20px ;
  389. div.content {
  390. width: 60% ;
  391. font-size: 90% ;
  392. }
  393. p {
  394. padding-bottom: 15px ;
  395. }
  396. h2 {
  397. color: black ;
  398. padding-bottom: 40px ;
  399. font-size: 25px ;
  400. line-height: 35px ;
  401. font-family: 'myriadpro-regular' ;
  402. }
  403. h3 {
  404. font-family: "comfortaaregular" ;
  405. font-size: 18px ;
  406. padding-bottom: 12px ;
  407. margin-top: 10px ;
  408. color: black ;
  409. }
  410. }
  411. .mentions {
  412. #main, body {
  413. background-color: white ;
  414. }
  415. }
  416. .vegas-loading {
  417. display: none ;
  418. }
  419. #profil-user {
  420. .form-group.field-user-no_mail label {
  421. font-weight: normal ;
  422. }
  423. .form-group label {
  424. cursor: pointer ;
  425. }
  426. #mails-jours-prod {
  427. .form-group {
  428. float: left ;
  429. margin-right: 15px ;
  430. label {
  431. font-weight: normal ;
  432. }
  433. }
  434. }
  435. p.strong {
  436. font-weight: bold ;
  437. }
  438. }
  439. /* login */
  440. .site-login {
  441. .col-lg-5 {
  442. margin: 0px auto ;
  443. float: none ;
  444. }
  445. }
  446. /* signup */
  447. .modal-backdrop {
  448. z-index: -1;
  449. }
  450. .site-signup {
  451. .col-lg-5 {
  452. margin: 0px auto ;
  453. float: none ;
  454. }
  455. }
  456. #modal-cgv {
  457. .modal-body {
  458. h2 {
  459. margin-bottom: 5px ;
  460. padding-bottom: 0px ;
  461. font-size: 20px ;
  462. margin-top: 0px ;
  463. }
  464. }
  465. }
  466. #form-signup {
  467. #client-boulanger {
  468. margin-bottom: 30px ;
  469. }
  470. #signupform-id_etablissement {
  471. option:disabled {
  472. font-weight: bold ;
  473. color: black ;
  474. }
  475. }
  476. #champs-boulanger {
  477. display: none ;
  478. }
  479. #boutons-inscrire {
  480. margin-top: 30px;
  481. }
  482. }
  483. @import "_systeme_commandes.scss" ;
  484. @import "_responsive.scss" ;