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.

_order.scss 13KB

6 years ago
10 months ago
6 years ago
10 months ago
6 years ago
10 months ago
6 years ago
6 years ago
10 months ago
6 years ago
6 years ago
6 years ago
10 months ago
10 months ago
10 months ago
6 years ago
6 years ago
10 months ago
6 years ago
10 months ago
10 months ago
6 years ago
6 years ago
10 months ago
10 months ago
10 months ago
10 months ago
6 years ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
10 months ago
6 years ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 years ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 years ago
6 years ago
6 years ago
10 months ago
6 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  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. #leave-period-date-color {
  117. width: 13px ;
  118. height: 13px ;
  119. display: inline-block ;
  120. }
  121. #order-date-color {
  122. background-color: #198754 ;
  123. border: solid 2px #198754;
  124. }
  125. #distribution-date-color {
  126. background-color: white;
  127. border: solid 2px #198754;
  128. }
  129. #leave-period-date-color {
  130. //background-color: #E09F3E;
  131. //border: solid 2px #E09F3E;
  132. background-color: gray;
  133. border: solid 2px gray;
  134. }
  135. }
  136. #calendar {
  137. margin-bottom: 15px ;
  138. .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
  139. font-size: 2rem ;
  140. }
  141. .c-day-background {
  142. padding: 20px ;
  143. }
  144. .c-day:hover {
  145. .c-day-background {
  146. background-color: $color-primary !important ;
  147. color: white !important ;
  148. }
  149. }
  150. .c-day-popover-content {
  151. font-size: 1.3rem ;
  152. }
  153. }
  154. #credit-online-payment {
  155. .panel {
  156. .panel-heading {
  157. .btn-default {
  158. float: right;
  159. position: relative;
  160. top: -5px;
  161. }
  162. }
  163. }
  164. }
  165. #content-step-date {
  166. #distributions-list {
  167. .card {
  168. margin-bottom: 20px;
  169. .btn-primary {
  170. float: right ;
  171. }
  172. .date {
  173. font-size: 1.2rem ;
  174. line-height: 1.4rem;
  175. text-transform: uppercase;
  176. font-family: 'worksans_semibold';
  177. }
  178. .point-sales {
  179. color: gray ;
  180. font-size: 14px ;
  181. margin-top: 8px ;
  182. }
  183. }
  184. }
  185. }
  186. .block-actions {
  187. text-align: center ;
  188. margin-top: 40px ;
  189. }
  190. table#points-sale {
  191. td.name {
  192. .the-name {
  193. color: black ;
  194. font-size: 1.2em ;
  195. line-height: 1.4em ;
  196. font-family: 'worksans_semibold';
  197. }
  198. .locality {
  199. display: none;
  200. }
  201. .comment,
  202. .minimum-order-amount,
  203. .shared-point-sale-producers{
  204. color: gray;
  205. a {
  206. color: $color-primary;
  207. }
  208. }
  209. }
  210. td.actions {
  211. width: 150px ;
  212. button {
  213. width: 100% ;
  214. }
  215. }
  216. tr.selected {
  217. td {
  218. //background-color: white ;
  219. }
  220. }
  221. }
  222. table#products {
  223. margin-bottom: 40px;
  224. border-top: solid 1px $color-gray-dark;
  225. border-left: solid 1px $color-gray-dark;
  226. border-right: solid 1px $color-gray-dark;
  227. thead {
  228. display: none;
  229. }
  230. td {
  231. border-bottom: solid 1px $color-gray-dark;
  232. border-left: 0px none;
  233. border-right: 0px none;
  234. }
  235. tr.category-closed:hover,
  236. tr.category-open {
  237. td.category-name {
  238. padding-left: 30px;
  239. background-color: $color-gray-light;
  240. }
  241. }
  242. td.category-name {
  243. transition: all 0.1s linear;
  244. background-color: $color-gray-light;
  245. border-left: solid 5px $color-gray-dark;
  246. font-family: "worksans_bold" ;
  247. font-size: 22px ;
  248. line-height: 30px;
  249. text-transform: uppercase;
  250. padding-top: 13px ;
  251. padding-left: 20px;
  252. .bi-caret-down-fill,
  253. .bi-caret-right-fill {
  254. font-size: 15px ;
  255. }
  256. span.badge {
  257. font-family: 'worksans_bold' ;
  258. text-transform: uppercase ;
  259. margin-left: 5px ;
  260. font-size: 0.85rem;
  261. position: relative;
  262. top: -3px;
  263. &.bg-primary {
  264. float: right;
  265. top: 2px;
  266. }
  267. }
  268. &:hover {
  269. cursor: pointer ;
  270. background-color: white;
  271. }
  272. }
  273. td.photo {
  274. img {
  275. width: 75px ;
  276. }
  277. }
  278. td.name {
  279. }
  280. .price-unit {
  281. .decreasing-prices {
  282. margin-top: 10px;
  283. font-size: 12px;
  284. line-height: 15px;
  285. padding-top: 6px;
  286. padding-bottom: 2px;
  287. margin-bottom: 0px;
  288. padding-left: 10px;
  289. padding-right: 10px;
  290. ul {
  291. padding: 0px;
  292. margin: 0px;
  293. list-style-type: none;
  294. li {
  295. margin-bottom: 5px;
  296. text-align: left;
  297. strong {
  298. font-weight: bold;
  299. }
  300. }
  301. }
  302. }
  303. }
  304. .price-unit, .price-total {
  305. width: 135px ;
  306. text-align: center ;
  307. .price-infos {
  308. color: gray ;
  309. font-size: 13px ;
  310. line-height: 15px;
  311. }
  312. }
  313. tr.product-open td.price-total {
  314. font-size: 1.1rem ;
  315. font-family: 'worksans_bold';
  316. padding-top: 19px;
  317. }
  318. .td-quantity {
  319. width: 175px ;
  320. input.quantity,
  321. .input-group-text {
  322. background-color: white;
  323. }
  324. input.quantity {
  325. text-align: center ;
  326. border: 0px none;
  327. }
  328. .input-group-text {
  329. border: 0px none;
  330. padding-right: 10px ;
  331. padding-left: 0px;
  332. margin: 0px ;
  333. }
  334. .input-group-btn {
  335. button {
  336. padding: 4px 5px 0px 5px;
  337. .bi {
  338. font-size: 1.5em;
  339. font-weight: bold;
  340. margin: 0px;
  341. }
  342. }
  343. }
  344. }
  345. tr.total {
  346. .summary {
  347. padding: 25px;
  348. h3 {
  349. font-family: 'worksans_bold';
  350. margin-top: 0px ;
  351. text-transform: uppercase ;
  352. margin-bottom: 5px ;
  353. }
  354. ul {
  355. margin-bottom: 15px ;
  356. padding-left: 20px ;
  357. font-size: 1.1rem ;
  358. line-height: 1.4rem;
  359. list-style-type: disc;
  360. li {
  361. .quantity {
  362. font-weight: bold;
  363. }
  364. }
  365. }
  366. }
  367. .price-total {
  368. padding-top: 25px;
  369. font-size: 1.5rem ;
  370. font-family: 'worksans_bold';
  371. span {
  372. display: inline-block;
  373. padding: 7px 15px;
  374. @include border-radius(15px);
  375. color: white;
  376. font-size: 1.2rem;
  377. }
  378. }
  379. }
  380. }
  381. #payment-methods {
  382. .infos {
  383. margin-top: 10px;
  384. color: gray;
  385. }
  386. }
  387. #content-step-payment {
  388. .delivery {
  389. margin-bottom: 20px ;
  390. }
  391. .comment {
  392. margin-bottom: 20px ;
  393. }
  394. #payment-methods {
  395. margin-bottom: 20px ;
  396. }
  397. .credit {
  398. .info {
  399. margin-left: 20px ;
  400. color: gray ;
  401. }
  402. }
  403. }
  404. }
  405. }
  406. #main #content {
  407. .panel {
  408. h3 {
  409. font-family: "worksans_bold" ;
  410. margin: 0px ;
  411. padding-top: 10px ;
  412. padding-bottom: 4px ;
  413. font-size: 20px ;
  414. }
  415. }
  416. }