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.

473 lines
13KB

  1. .order-order, .order-confirm {
  2. #block-infos {
  3. margin-top: 50px;
  4. }
  5. }
  6. .order-order #main {
  7. #app-order-order {
  8. display: block ;
  9. .wrapper {
  10. display: none;
  11. }
  12. &.loaded .wrapper {
  13. display: block ;
  14. }
  15. h3 {
  16. font-family: "worksans_bold" ;
  17. }
  18. #distribution-date, #order-distribution-date {
  19. display: none ;
  20. }
  21. .alert-edit-order {
  22. strong {
  23. //font-weight: bold;
  24. }
  25. }
  26. .slide-enter-active {
  27. transition: all .2s ease;
  28. }
  29. .slide-leave-active {
  30. transition: all 0s ease;
  31. }
  32. .slide-enter, .slide-leave-to {
  33. transform: translateX(10px);
  34. opacity: 0;
  35. }
  36. #steps {
  37. margin-bottom: 20px ;
  38. ul {
  39. height: 70px ;
  40. list-style-type: none;
  41. padding: 0px;
  42. margin-bottom: 40px;
  43. li {
  44. text-align: center ;
  45. padding-right: 8px ;
  46. padding-left: 8px ;
  47. position: relative ;
  48. .info-step {
  49. position: absolute ;
  50. top: 45px ;
  51. left: 0px ;
  52. width: 100% ;
  53. text-transform: normal ;
  54. color: $color-primary ;
  55. font-size: 17px ;
  56. font-weight: bold ;
  57. }
  58. .glyphicon-chevron-right,
  59. &.active .glyphicon-chevron-right {
  60. float: right ;
  61. color: gray ;
  62. position: relative ;
  63. top: 10px ;
  64. }
  65. &.first {
  66. padding-left: 0px ;
  67. }
  68. &#step-payment {
  69. padding-right: 0px ;
  70. }
  71. &#step-products .btn::after,
  72. &.first .btn::before {
  73. display: none ;
  74. }
  75. .btn {
  76. color: black;
  77. background-color: $color-gray;
  78. text-transform: uppercase ;
  79. display: block ;
  80. width: 100% ;
  81. position: relative ;
  82. @include border-radius(0px) ;
  83. border: 0px none ;
  84. text-transform: uppercase ;
  85. .button-content {
  86. position: relative;
  87. left: 8px ;
  88. }
  89. &::after, &::before {
  90. content: '' ;
  91. position: absolute ;
  92. top: 1px;
  93. }
  94. &::after {
  95. right: -34px ;
  96. border:17px solid transparent;
  97. border-left:17px solid $color-gray;
  98. background-color: transparent ;
  99. }
  100. &::before {
  101. left: 0px ;
  102. border:17px solid transparent;
  103. border-left:17px solid white;
  104. background-color: transparent ;
  105. }
  106. }
  107. .btn-primary {
  108. color: white ;
  109. }
  110. }
  111. }
  112. }
  113. #legend {
  114. #order-date-color,
  115. #distribution-date-color {
  116. width: 13px ;
  117. height: 13px ;
  118. display: inline-block ;
  119. }
  120. #order-date-color {
  121. background-color: #198754 ;
  122. border: solid 2px #198754;
  123. }
  124. #distribution-date-color {
  125. background-color: white;
  126. border: solid 2px #198754;
  127. }
  128. }
  129. #calendar {
  130. margin-bottom: 15px ;
  131. .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
  132. font-size: 2rem ;
  133. }
  134. .c-day-background {
  135. padding: 20px ;
  136. }
  137. .c-day:hover {
  138. .c-day-background {
  139. background-color: $color-primary !important ;
  140. color: white !important ;
  141. }
  142. }
  143. .c-day-popover-content {
  144. font-size: 1.3rem ;
  145. }
  146. }
  147. #credit-online-payment {
  148. .panel {
  149. .panel-heading {
  150. .btn-default {
  151. float: right;
  152. position: relative;
  153. top: -5px;
  154. }
  155. }
  156. }
  157. }
  158. #content-step-date {
  159. #distributions-list {
  160. .card {
  161. margin-bottom: 20px;
  162. .btn-primary {
  163. float: right ;
  164. }
  165. .date {
  166. font-size: 1.2rem ;
  167. line-height: 1.4rem;
  168. text-transform: uppercase;
  169. font-family: 'worksans_semibold';
  170. }
  171. .point-sales {
  172. color: gray ;
  173. font-size: 14px ;
  174. margin-top: 8px ;
  175. }
  176. }
  177. }
  178. }
  179. .block-actions {
  180. text-align: center ;
  181. margin-top: 40px ;
  182. }
  183. table#points-sale {
  184. td.name {
  185. .the-name {
  186. color: black ;
  187. font-size: 1.2em ;
  188. line-height: 1.4em ;
  189. font-family: 'worksans_semibold';
  190. }
  191. .locality {
  192. display: none;
  193. }
  194. .comment,
  195. .minimum-order-amount {
  196. color: gray;
  197. a {
  198. color: $color-primary;
  199. }
  200. }
  201. }
  202. td.actions {
  203. width: 150px ;
  204. button {
  205. width: 100% ;
  206. }
  207. }
  208. tr.selected {
  209. td {
  210. //background-color: white ;
  211. }
  212. }
  213. }
  214. table#products {
  215. margin-bottom: 40px;
  216. border-top: solid 1px $color-gray-dark;
  217. border-left: solid 1px $color-gray-dark;
  218. border-right: solid 1px $color-gray-dark;
  219. thead {
  220. display: none;
  221. }
  222. td {
  223. border-bottom: solid 1px $color-gray-dark;
  224. border-left: 0px none;
  225. border-right: 0px none;
  226. }
  227. tr.category-closed:hover,
  228. tr.category-open {
  229. td.category-name {
  230. padding-left: 30px;
  231. background-color: $color-gray-light;
  232. }
  233. }
  234. td.category-name {
  235. transition: all 0.1s linear;
  236. background-color: $color-gray-light;
  237. border-left: solid 5px $color-gray-dark;
  238. font-family: "worksans_bold" ;
  239. font-size: 22px ;
  240. line-height: 30px;
  241. text-transform: uppercase;
  242. padding-top: 13px ;
  243. padding-left: 20px;
  244. .bi-caret-down-fill,
  245. .bi-caret-right-fill {
  246. font-size: 15px ;
  247. }
  248. span.badge {
  249. font-family: 'worksans_bold' ;
  250. text-transform: uppercase ;
  251. margin-left: 5px ;
  252. font-size: 0.85rem;
  253. position: relative;
  254. top: -3px;
  255. &.bg-primary {
  256. float: right;
  257. top: 2px;
  258. }
  259. }
  260. &:hover {
  261. cursor: pointer ;
  262. background-color: white;
  263. }
  264. }
  265. td.photo {
  266. img {
  267. width: 75px ;
  268. }
  269. }
  270. td.name {
  271. }
  272. .price-unit {
  273. .decreasing-prices {
  274. margin-top: 10px;
  275. font-size: 10px;
  276. padding-top: 6px;
  277. padding-bottom: 2px;
  278. margin-bottom: 0px;
  279. ul {
  280. li {
  281. margin-bottom: 5px;
  282. strong {
  283. font-weight: bold;
  284. }
  285. }
  286. }
  287. }
  288. }
  289. .price-unit, .price-total {
  290. width: 135px ;
  291. text-align: center ;
  292. .price-infos {
  293. color: gray ;
  294. font-size: 13px ;
  295. line-height: 15px;
  296. }
  297. }
  298. tr.product-open td.price-total {
  299. font-size: 1.1rem ;
  300. font-family: 'worksans_bold';
  301. padding-top: 19px;
  302. }
  303. .td-quantity {
  304. width: 175px ;
  305. input.quantity,
  306. .input-group-text {
  307. background-color: white;
  308. }
  309. input.quantity {
  310. text-align: center ;
  311. border: 0px none;
  312. }
  313. .input-group-text {
  314. border: 0px none;
  315. padding-right: 10px ;
  316. padding-left: 0px;
  317. margin: 0px ;
  318. }
  319. .input-group-btn {
  320. button {
  321. padding: 4px 5px 0px 5px;
  322. .bi {
  323. font-size: 1.5em;
  324. font-weight: bold;
  325. margin: 0px;
  326. }
  327. }
  328. }
  329. }
  330. tr.total {
  331. .summary {
  332. padding: 25px;
  333. h3 {
  334. font-family: 'worksans_bold';
  335. margin-top: 0px ;
  336. text-transform: uppercase ;
  337. margin-bottom: 5px ;
  338. }
  339. ul {
  340. margin-bottom: 15px ;
  341. padding-left: 20px ;
  342. font-size: 1.1rem ;
  343. line-height: 1.4rem;
  344. list-style-type: disc;
  345. li {
  346. .quantity {
  347. font-weight: bold;
  348. }
  349. }
  350. }
  351. }
  352. .price-total {
  353. padding-top: 25px;
  354. font-size: 1.5rem ;
  355. font-family: 'worksans_bold';
  356. span {
  357. display: inline-block;
  358. padding: 7px 15px;
  359. @include border-radius(15px);
  360. color: white;
  361. font-size: 1.2rem;
  362. }
  363. }
  364. }
  365. }
  366. #payment-methods {
  367. .infos {
  368. margin-top: 10px;
  369. color: gray;
  370. }
  371. }
  372. #content-step-payment {
  373. .delivery {
  374. margin-bottom: 20px ;
  375. }
  376. .comment {
  377. margin-bottom: 20px ;
  378. }
  379. .credit {
  380. .info {
  381. margin-left: 20px ;
  382. color: gray ;
  383. }
  384. }
  385. }
  386. }
  387. }
  388. #main #content {
  389. .panel {
  390. h3 {
  391. font-family: "worksans_bold" ;
  392. margin: 0px ;
  393. padding-top: 10px ;
  394. padding-bottom: 4px ;
  395. font-size: 20px ;
  396. }
  397. }
  398. }