API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 29th, 2019
589
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.26 KB | None | 0 0
raw download clone embed print report
  1. <script src="../../ImportScripts/LSClientelingMainScript.js"></script>
  2. <!-- <p class="ls-skin-_CO_CANCEL ls-font-_CO_CANCEL" data-ls-pos-tag="terminal_description"></p> -->
  3. <!-- <p data-bind="text: time"></p> -->
  4. <div id="LSBrickView" style="display: none;" data-bind="visible: true">
  5. <div class="container-fluid">
  6. <div class="col-12">
  7. <div class="row">
  8. <nav id="ls-breadcrumbs"></nav>
  9. </div>
  10. </div>
  11. <div class="row">
  12. <div class="col-sm-12 nodes" data-bind="css: { 'col-md-9': ($root.attributes().length > 0)}">
  13. <div class="row" data-bind="foreach: { data: $root.filteredNodes('Node'), as: 'Node' }">
  14. <!-- <div class="card text-center col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
  15. <img class="card-img-top" data-bind="attr: {src: LS.isPOS ? Node.Image : LOREM_IMG_URL, alt: Node.Description}">
  16. <div class="card-body">
  17. <h2 class="card-title" data-bind="text: Node.Description"></h2>
  18. </div>
  19. </div> -->
  20. <div class="ls-brick-node">
  21. <div class="ls-brick-img" data-bind="style: { backgroundImage: 'url(\'' + (LS.isPOS ? Node.Image : LOREM_IMG_URL) + '\')' }"></div>
  22. <p class="ls-brick-desc" data-bind="text: Node.Description"></p>
  23. <a href="javascript:;" class="fix" data-bind="click: $root.openNode"></a>
  24. </div>
  25. </div>
  26. <div class="row" data-bind="foreach: { data: $root.filteredNodes('Item'), as: 'Item' }">
  27. <div class="col-md-4 col-sm-6 col-12 ls-brick-item">
  28. <div class="ls-brick-item-inner">
  29. <div class="col-md-4 col-sm-4 col-12 ls-brick-item-img" data-bind="style: { backgroundImage: 'url(\'' + (LS.isPOS ? Item.Image : LOREM_IMG_URL) + '\')' }, click: $parent.openNode"></div>
  30. <div class="ls-brick-item-card">
  31. <a href="javascript:;" class="fix" data-bind="click: $root.openNode"></a>
  32. <p class="ls-brick-item-desc" data-bind="text: Item.Description"></p>
  33. <p class="ls-brick-item-no">Item No. <span data-bind="text: Item.ItemNo"></span></p>
  34. <p class="ls-brick-item-price" data-bind="text: Item.Price"></p>
  35. </div>
  36. <div class="buttons">
  37. <a href="javascript:;" type="button" class="btn ls-btn-open rounded-circle" data-toggle="tooltip" title="View details" data-bind="click: $root.openNode">
  38. <i class="fa fa-eye"></i>
  39. </a>
  40. <a href="javascript:;" type="button" class="btn ls-btn-compare rounded-circle" data-toggle="tooltip" title="Compare" data-bind="click: $root.addToCompare">
  41. <i class="fa fa-adjust"></i>
  42. </a>
  43. <a href="javascript:;" type="button" class="btn ls-btn-addtocart rounded-circle" data-toggle="tooltip" title="Add to cart" data-bind="click: $root.addToCart, clickBubble: false">
  44. <i class="fa fa-shopping-cart"></i>
  45. </a>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51.  
  52. <div class="col-sm-12" data-bind="css: { 'col-md-3': ($root.attributes().length > 0) }">
  53. <div data-bind="foreach: { data: attributes, as: 'Attribute' }" class="ls-filter">
  54. <span class="ls-filter-title" data-bind="text: Attribute.Code, visible: Attribute.Options.length > 0"></span>
  55. <ul data-bind="foreach: { data: Attribute.Options, as: 'Option' }">
  56. <li data-bind="click: $root.checkboxFix">
  57. <input type="checkbox" data-bind="checked: Option.Value, click: $root.setfilter.bind($data, Attribute.Code), clickBubble: false" />
  58. <a class="ls-filter-label" href="javascript:;" data-bind="text: Option.Attr"></a>
  59. </li>
  60. </ul>
  61. </div>
  62. <button class="ls-button" data-bind="click: $root.clearFilter, visible: $root.attributes().length > 0">Clear Filter</button>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67.  
  68. <div id="LSCompareItems" style="display: none;" data-bind="visible: true">
  69. <div class="container-fluid h-100">
  70. <div class="row h-100">
  71. <div class="col-8">
  72. <div class="row h-100" data-bind="foreach: {data: $root.compareItems, as: 'CompareItem' }">
  73. <div class="col-6 d-flex align-items-center h-100">
  74. <div class="ls-brick-compare-card d-flex align-items-center w-100">
  75. <div class="ls-brick-item-img" data-bind="style: { backgroundImage: 'url(\'' + (LS.isPOS ? CompareItem.Image : LOREM_IMG_URL) + '\')' }"></div>
  76. <p class="ls-brick-compare-desc" data-bind="text: CompareItem.Description"></p>
  77. <div class="close-button">
  78. <a href="javascript:;" class="fix" data-bind="click: $root.removeFromCompare" data-toggle="tooltip" title="Remove item"></a>
  79. <i class="fa fa-times-circle"></i>
  80. </a>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="col-6" data-bind="visible: $root.compareItems().length === 1">
  85. <div class="ls-brick-compare-card-empty"></div>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="col-4 ls-compare-buttons">
  90. <div class="row h-100">
  91. <div class="col-6 text-center d-flex justify-content-center align-items-center h-100">
  92. <a href="javascript:;" class="fix" data-bind="click: $root.openCompare, css: $root.compareItems().length < 2 ? 'button disabled' : 'button'" data-toggle="tooltip" title="Open compare">
  93. <div>
  94. <i class="fa fa-adjust"></i>
  95. <div class="button-text">
  96. Compare
  97. </div>
  98. </div>
  99. </a>
  100. </div>
  101. <div class="col-6 text-center d-flex justify-content-center align-items-center h-100">
  102. <a href="javascript:;" class="fix button" data-bind="click: $root.clearCompare" data-toggle="tooltip" title="Clear all items">
  103. <div>
  104. <i class="fa fa-times-circle"></i>
  105. <div class="button-text">
  106. Clear
  107. </div>
  108. </div>
  109. </a>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <hr style="display: none;" data-bind="visible: !LS.isPOS">
  117. <pre style="display: none;" data-bind="visible: !LS.isPOS, text: ko.toJSON($root, null, 2)"></pre>
  118.  
  119.  
  120. // console.log('BrickView');
  121. var LOREM_IMG_URL = 'http://loremflickr.com/300/300';
  122. var WEBAPI_URL = 'lstmpl://#BRICKVIEW/RetailWebAPI/RetailHierarchyGet/';
  123. var WEBAPI_URL_DETAILS = 'lstmpl://#ITEMDETAILS/RetailWebAPI/ItemGet/';
  124. var WEBAPI_URL_COMPARE = 'lstmpl://#PRODUCTCOMPARE/RetailWebAPI/ItemGet/';
  125. var INITIAL_HIERARCHY_CODE = 'SPA';
  126. var filter = {};
  127. var vm;
  128. var lsBreadCrumbs;
  129. window.onTemplateReady = function () {
  130. lsBreadCrumbs = new LSBreadCrumbsClass($('#ls-breadcrumbs'), INITIAL_HIERARCHY_CODE);
  131. vm = new LSBrickViewVMClass();
  132. ko.applyBindings(vm);
  133. LS.Navigate(WEBAPI_URL + '?hierarchyCode=' + INITIAL_HIERARCHY_CODE + '&init=true');
  134. // setInterval(() => { vm.time(vm.time() + 1); }, 1000);
  135. };
  136. window.onTemplateUpdatePOSTags = function (tags) {
  137. // console.log(tags);
  138. };
  139. window.onPOSTransactionFinished = function () {
  140. LS.Navigate(WEBAPI_URL + '?hierarchyCode=SPA&init=true'); // Refresh control
  141. };
  142. window.onTemplateData = function (data) {
  143. var _a = data.methodName, methodName = _a === void 0 ? '' : _a, _b = data.result, result = _b === void 0 ? {} : _b, _c = data.serviceName, serviceName = _c === void 0 ? '' : _c;
  144. switch (methodName) {
  145. case 'RetailHierarchyGet':
  146. vm.setNodes(result);
  147. lsBreadCrumbs.update();
  148. break;
  149. default:
  150. console.log("onTemplateData:\n [" + methodName + "]\n finished on service: [" + serviceName + "] and was not handled specifically.");
  151. break;
  152. }
  153. };
  154. var onTemplateError = function (msg) {
  155. LS.ShowAlert(msg, 'error', 5000);
  156. };
  157. var onTemplateNavigation = function (url, requestParams) {
  158. vm.url(url);
  159. vm.codePath(requestParams.hierarchyCode);
  160. if (typeof requestParams.init !== 'undefined' && requestParams.init === 'true')
  161. vm.clearCompare();
  162. if (typeof requestParams.filter !== 'undefined' && requestParams.filter.length === 0)
  163. filter = {};
  164. };
  165. var LSBrickViewVMClass = /** @class */ (function () {
  166. function LSBrickViewVMClass() {
  167. var _this = this;
  168. this.codePath = ko.observable('');
  169. this.descPath = ko.observable('');
  170. this.compareItems = ko.observableArray();
  171. this.url = ko.observable('');
  172. this.nodes = ko.observableArray();
  173. this.attributes = ko.observableArray();
  174. this.time = ko.observable(0);
  175. this.appendNodes = function (jsonData) {
  176. var js = JSON.parse(jsonData);
  177. for (var _i = 0, _a = js.Nodes; _i < _a.length; _i++) {
  178. var n = _a[_i];
  179. _this.nodes.push(n);
  180. }
  181. for (var _b = 0, _c = js.Attributes; _b < _c.length; _b++) {
  182. var n = _c[_b];
  183. _this.attributes.push(n);
  184. }
  185. };
  186. this.setNodes = function (js) {
  187. _this.descPath(js.DescriptionPath);
  188. _this.nodes(js.Nodes);
  189. if (typeof js.Attributes !== 'undefined')
  190. _this.attributes(_this.setFilterAttributes(js.Attributes));
  191. };
  192. this.openNode = function (node) {
  193. var url;
  194. var codePath = _this.codePath();
  195. var newCodePath = (codePath ? codePath + '/' + node.NodeID : node.NodeID);
  196. switch (node.NodeType) {
  197. case 'Node':
  198. url = WEBAPI_URL + '?hierarchyCode=' + newCodePath;
  199. LS.Navigate(url);
  200. break;
  201. case 'Item':
  202. url = '[#ITEMDETAILS]' + WEBAPI_URL_DETAILS + '?itemNo=' + node.ItemNo;
  203. LS.SendPosCommand(_this, 'NAVIGATE', url);
  204. setTimeout(function () { LS.SendPosCommand(_this, 'SHOWPANELMODAL', '#ITEMDETAILS'); }, 100);
  205. break;
  206. default:
  207. LS.ShowAlert('Node type not valid!', 'info', 1000);
  208. }
  209. };
  210. this.addToCart = function (node) {
  211. LS.SendPosCommand(null, 'PLU_K', node.ItemNo);
  212. LS.ShowAlert(node.Description + ' added to cart.', 'info', 1000);
  213. };
  214. this.openCompare = function () {
  215. if (_this.compareItems().length < 2) {
  216. return;
  217. }
  218. LS.SendPosCommand(_this, 'SHOWPANELMODAL', '#PRODUCTCOMPARE');
  219. };
  220. this.updateCompare = function () {
  221. if (typeof $ !== 'undefined') {
  222. var $tooltips = $('.tooltip');
  223. if ($tooltips && $tooltips.length > 0) {
  224. $tooltips.tooltip('hide'); // tooltips don't seem to get hidden on removed elements
  225. }
  226. }
  227. var url = '[#PRODUCTCOMPARE]' + WEBAPI_URL_COMPARE + '?init=true';
  228. LS.SendPosCommand(_this, 'NAVIGATE', url);
  229. for (var _i = 0, _a = vm.compareItems(); _i < _a.length; _i++) {
  230. var item = _a[_i];
  231. url = '[#PRODUCTCOMPARE]' + WEBAPI_URL_COMPARE + '?itemNo=' + item.ItemNo;
  232. LS.SendPosCommand(_this, 'NAVIGATE', url);
  233. }
  234. };
  235. this.addToCompare = function (node) {
  236. var match = ko.utils.arrayFirst(_this.compareItems(), function (item) {
  237. return node.ItemNo === item.ItemNo;
  238. });
  239. if (!match) {
  240. if (_this.compareItems() && _this.compareItems().length === 2) {
  241. _this.compareItems.shift();
  242. _this.compareItems.push(node);
  243. }
  244. else {
  245. _this.compareItems.push(node);
  246. }
  247. _this.updateCompare();
  248. }
  249. if (_this.compareItems().length > 0) {
  250. var $el = $('#LSCompareItems');
  251. if (!$el.hasClass('open')) {
  252. $el.removeClass('closed');
  253. $el.addClass('open');
  254. $('body').addClass('compareActive');
  255. }
  256. }
  257. };
  258. this.removeFromCompare = function (node) {
  259. _this.compareItems.remove(function (n) {
  260. return node.ItemNo === n.ItemNo;
  261. });
  262. _this.updateCompare();
  263. if (_this.compareItems().length === 0) {
  264. var $el = $('#LSCompareItems');
  265. if (!$el.hasClass('closed')) {
  266. $el.removeClass('open');
  267. $el.addClass('closed');
  268. $('body').removeClass('compareActive');
  269. }
  270. }
  271. };
  272. this.clearCompare = function () {
  273. _this.compareItems.removeAll();
  274. _this.updateCompare();
  275. var $el = $('#LSCompareItems');
  276. if (!$el.hasClass('closed')) {
  277. $el.removeClass('open');
  278. $el.addClass('closed');
  279. $('body').removeClass('compareActive');
  280. }
  281. };
  282. this.filteredNodes = function (type) {
  283. return ko.utils.arrayFilter(_this.nodes(), function (node) {
  284. if (!node) {
  285. return false;
  286. }
  287. return (node.NodeType === type);
  288. });
  289. };
  290. this.setfilter = function (code, item) {
  291. code = code.toUpperCase();
  292. item.Attr = item.Attr;
  293. if (item.Value === true) {
  294. if (filter.hasOwnProperty(code) === true) {
  295. if (filter[code].indexOf(item.Attr) < 0)
  296. filter[code].push(item.Attr);
  297. }
  298. else {
  299. filter[code] = [item.Attr];
  300. }
  301. }
  302. else {
  303. if (filter.hasOwnProperty(code) === false)
  304. return true;
  305. var index = filter[code].indexOf(item.Attr);
  306. if (index > -1)
  307. filter[code].splice(index, 1);
  308. if (filter[code].length < 1)
  309. delete filter[code];
  310. }
  311. LS.Navigate(WEBAPI_URL + '?hierarchyCode=' + _this.codePath() + _this.createFilterUrl());
  312. return true;
  313. };
  314. this.clearFilter = function () {
  315. LS.Navigate(WEBAPI_URL + '?hierarchyCode=' + _this.codePath());
  316. };
  317. this.checkboxFix = function (obj, evt) {
  318. var $cb = $(evt.currentTarget).find(':checkbox');
  319. var cb = $cb[0];
  320. cb.checked = !cb.checked; // manually change checked status
  321. $cb.triggerHandler('click'); // run all event handlers bound to 'click' event
  322. };
  323. /*
  324. Filter functions
  325. */
  326. this.createFilterUrl = function () {
  327. var query = '&filter=';
  328. var keys = Object.keys(filter);
  329. keys.forEach(function (code, idx) {
  330. query += code + ';';
  331. query += filter[code].join(',');
  332. if (idx !== keys.length - 1)
  333. query += '|';
  334. });
  335. return query;
  336. };
  337. this.setFilterAttributes = function (attr) {
  338. if (Object.keys(filter).length === 0)
  339. return attr;
  340. for (var _i = 0, attr_1 = attr; _i < attr_1.length; _i++) {
  341. var a = attr_1[_i];
  342. var code = a.Code.toUpperCase();
  343. if (filter.hasOwnProperty(code)) {
  344. for (var _a = 0, _b = a.Options; _a < _b.length; _a++) {
  345. var o = _b[_a];
  346. for (var _c = 0, _d = filter[code]; _c < _d.length; _c++) {
  347. var f = _d[_c];
  348. if (f === o.Attr)
  349. o.Value = true;
  350. }
  351. }
  352. }
  353. }
  354. return attr;
  355. };
  356. }
  357. return LSBrickViewVMClass;
  358. }());
  359. // For simplicity we'll allow multiple classes in one file.
  360. // Modules could be placed in ts/modules/LSBreadCrumbs.ts as exports
  361. // and then they could be imported using e.g.:
  362. // import { LSBreadCrumbs } from '../../ts/modules/LSBreadcrumbs';
  363. // the local tsconfig then needs to have --outfile=LSBrickView.js and --module="AMD" to concat the files.
  364. var LSBreadCrumbsClass = /** @class */ (function () {
  365. function LSBreadCrumbsClass($anchor, defaultCodePath) {
  366. if (defaultCodePath === void 0) { defaultCodePath = ''; }
  367. this.BASE_DESC = 'Home';
  368. this.$anchor = $anchor;
  369. this.defaultCodePath = defaultCodePath;
  370. this.$anchor.empty();
  371. this.$ol = $('<ol>');
  372. this.$ol.addClass('breadcrumb');
  373. this.$ol.append($('<li>').text(this.BASE_DESC).addClass('breadcrumb-item active')); // Placeholder
  374. this.$anchor.append(this.$ol);
  375. }
  376. LSBreadCrumbsClass.prototype.update = function () {
  377. var url = vm.url();
  378. var codePath = vm.codePath().split('/');
  379. var descsArr = vm.descPath().split('|||'); // Unique description separator in LS Nav
  380. var baseUrl = this.getBaseUrl(url);
  381. var defaultCodePathLength = this.defaultCodePath.split('/').length;
  382. // Render
  383. this.$ol.empty();
  384. var _loop_1 = function (i) {
  385. var $node = $('<li>').text(descsArr[i]).addClass('breadcrumb-item');
  386. this_1.$ol.append($node);
  387. if (i === descsArr.length - 1) {
  388. $node.addClass('active');
  389. }
  390. else {
  391. $node.contents().wrap($('<a>').prop('href', 'javascript:;'));
  392. $node.on('click', function () {
  393. var u = baseUrl + (codePath ? codePath.slice(0, i).join('/') : '');
  394. LS.Navigate(u);
  395. });
  396. }
  397. };
  398. var this_1 = this;
  399. for (var i = defaultCodePathLength; i < descsArr.length; i++) {
  400. _loop_1(i);
  401. }
  402. };
  403. LSBreadCrumbsClass.prototype.getBaseUrl = function (url) {
  404. var tag = 'hierarchyCode=';
  405. return url.substr(0, url.search(tag) + tag.length);
  406. };
  407. return LSBreadCrumbsClass;
  408. }());
  409. //# sourceMappingURL=BRICKVIEW.js.map
  410.  
  411.  
  412. html {
  413. font-size: 14px;
  414. line-height: 1.2;
  415. }
  416.  
  417. body {
  418. -webkit-user-drag: none;
  419. -moz-user-drag: none;
  420. -ms-user-drag: none;
  421. user-drag: none;
  422. -webkit-user-select: none;
  423. -moz-user-select: none;
  424. -ms-user-select: none;
  425. user-select: none;
  426. font-size: 1rem;
  427. }
  428.  
  429. body.compareActive {
  430. margin-bottom: 6.875rem;
  431. }
  432.  
  433. a,
  434. a:hover,
  435. a:focus,
  436. label,
  437. input[type="checkbox"] {
  438. color: rgb(196, 10, 60);
  439. cursor: pointer;
  440. }
  441.  
  442. a:hover {
  443. text-decoration: underline;
  444. }
  445.  
  446. a.fix, a.fix:hover{
  447. text-decoration: none;
  448. color:inherit;
  449. position: absolute;
  450. top: 0;
  451. left: 0;
  452. height: 100%;
  453. width: 100%;
  454. }
  455.  
  456. label {
  457. font-weight: inherit;
  458. }
  459.  
  460. .ls-brick-node {
  461. width: 100%;
  462. min-height: calc(100vw - 2rem);
  463. position: relative;
  464. float: left;
  465. margin-bottom: 0.5rem;
  466. padding: 0px;
  467. }
  468.  
  469. .ls-brick-img {
  470. background-color: transparent;
  471. background-size: cover;
  472. background-repeat: no-repeat;
  473. background-position: center center;
  474. display: block;
  475. position: absolute;
  476. height: 100%;
  477. width: 100%;
  478. }
  479.  
  480. .ls-brick-desc {
  481. position: absolute;
  482. bottom: 0px;
  483. font-size: 1.6rem;
  484. width: 100%;
  485. margin: auto;
  486. left: 0px;
  487. right: 0px;
  488. padding: 0.6rem;
  489. background: rgba(196, 10, 60, 0.85);
  490. color: white;
  491. }
  492.  
  493. .ls-brick-item {
  494. padding: 0.5rem;
  495. position: relative;
  496. margin-bottom: 7px;
  497. font-size: 1.2rem;
  498. }
  499.  
  500. .ls-brick-item-inner {
  501. border: 1px solid rgb(196, 10, 60);
  502. overflow: hidden;
  503. padding: 0.5rem;
  504. }
  505.  
  506. .ls-brick-item-inner .buttons .btn {
  507. float: left;
  508. width: 2rem;
  509. height: 2rem;
  510. border-radius: 50%;
  511. margin-right: 0.5rem;
  512. position: relative;
  513. text-align: center;
  514. padding: 0.3rem 0;
  515. color: #fff;
  516. }
  517.  
  518. .ls-brick-item-inner .buttons .btn ::before {
  519. font-size: 1.3rem;
  520. }
  521.  
  522. .ls-btn-open {
  523. background: rgb(251, 90, 60);
  524. }
  525.  
  526. .ls-btn-addtocart {
  527. background: rgb(196, 10, 60);
  528. }
  529.  
  530. .ls-btn-compare {
  531. background: rgb(82, 24, 59);
  532. }
  533.  
  534. .ls-brick-item-inner .buttons {
  535. position: absolute;
  536. right: 0;
  537. bottom: -0.5rem;
  538. }
  539.  
  540. .ls-brick-item-inner>div {
  541. padding: 0;
  542. }
  543.  
  544. .ls-brick-item p {
  545. color: black;
  546. padding: 0;
  547. margin: 0;
  548. margin-left: 2rem;
  549. }
  550.  
  551. .ls-brick-item-img {
  552. height: 21.85vw;
  553. min-height: 5.625rem;
  554. width: 25%;
  555. background-color: transparent;
  556. background-size: contain;
  557. background-repeat: no-repeat;
  558. background-position: center center;
  559. position: relative;
  560. float: left;
  561. }
  562.  
  563. .ls-brick-item-card {
  564. position: relative;
  565. float: left;
  566. width: 75%;
  567. cursor: pointer;
  568. }
  569.  
  570. .ls-brick-desc,
  571. .ls-brick-item-card p {
  572. text-overflow: ellipsis;
  573. white-space: nowrap;
  574. overflow: hidden;
  575. }
  576.  
  577. .ls-brick-item-desc {
  578. font-weight: bold;
  579. }
  580.  
  581. .ls-button {
  582. background-color: rgb(196, 10, 60);
  583. border: none;
  584. color: #fff;
  585. padding: 1.25rem 2rem;
  586. font-size: 1.4rem;
  587. width: 100%;
  588. margin-bottom: 20px;
  589. }
  590.  
  591. @media only screen and (min-width: 320px) {
  592. .ls-brick-node {
  593. width: 50%;
  594. min-height: 47.9vw;
  595. border: 7px solid white;
  596. margin-bottom: 0px;
  597. }
  598. }
  599.  
  600. @media only screen and (min-width: 480px) {
  601. .ls-brick-node {
  602. width: 33.333%;
  603. min-height: 33.3vw;
  604. }
  605. }
  606.  
  607. @media only screen and (min-width: 768px) {
  608. .ls-brick-node {
  609. width: 25%;
  610. min-height: 24.2vw;
  611. }
  612. .ls-brick-item-img {
  613. height: 5.625rem;
  614. width: 4.6875rem;
  615. }
  616. .ls-brick-item-card {
  617. width: calc(100% - 4.6875rem);
  618. }
  619. }
  620.  
  621. @media only screen and (min-width: 992px) {
  622. .ls-brick-node {
  623. min-height: 16.55vw;
  624. }
  625. .ls-brick-node {
  626. min-height: 16.55vw;
  627. }
  628. }
  629.  
  630. .breadcrumb {
  631. font-size: 1.6rem;
  632. background-color: transparent;
  633. padding: 0.5rem 0px;
  634. margin: 0.65rem 0px;
  635. }
  636.  
  637. .breadcrumb-item + .breadcrumb-item::before {
  638. color: rgba(196, 10, 60, 0.7);
  639. }
  640.  
  641. .ls-filter {
  642. color: rgb(196, 10, 60);
  643. font-size: 1.4rem;
  644. margin-bottom: 1.25rem;
  645. }
  646.  
  647. .ls-filter-title {
  648. font-weight: bold;
  649. text-transform: capitalize;
  650. }
  651.  
  652. .ls-filter ul {
  653. list-style: none;
  654. padding-left: 0;
  655. }
  656.  
  657. .ls-filter ul li {
  658. margin-top: 0.25rem;
  659. }
  660.  
  661. .ls-filter input {
  662. appearance: none;
  663. -webkit-appearance: none;
  664. background-color: #fafafa;
  665. border: 1px solid rgb(196, 10, 60);
  666. padding: 0.3rem;
  667. position: relative;
  668. margin: 0 0.5rem;
  669. }
  670.  
  671. .ls-filter input:checked::after {
  672. content: '\2715';
  673. font-size: 1rem;
  674. top: -0.33rem;
  675. position: absolute;
  676. left: -1px;
  677. }
  678.  
  679. .ls-filter-label, .ls-filter-label:active, .ls-filter-label:visited, .ls-filter-label:focus {
  680. text-decoration:none;
  681. }
  682.  
  683. /*
  684. Bootstrap Alert overloads
  685. */
  686.  
  687. .alert {
  688. color: #fff;
  689. border: none;
  690. border-radius: 0;
  691. }
  692.  
  693. .alert a {
  694. color: #fff;
  695. opacity: 1;
  696. text-shadow: none;
  697. }
  698.  
  699. .alert-info {
  700. background-color: rgba(87, 24, 67, 0.85);
  701. }
  702.  
  703. .alert-success {
  704. background-color: rgba(9, 197, 139, 0.85);
  705. }
  706.  
  707. .alert-warning {
  708. background-color: rgba(251, 90, 61, 0.85);
  709. }
  710.  
  711. .alert-danger {
  712. background-color: rgba(196, 10, 60, 0.85);
  713. }
  714.  
  715. .ls-alert {
  716. width: 70% !important;
  717. left: 15%;
  718. top: 0.3333rem;
  719. }
  720.  
  721. .row.no-gutters {
  722. margin-right: 0;
  723. margin-left: 0;
  724. }
  725. .row.no-gutters > [class^="col-"],
  726. .row.no-gutters > [class*=" col-"] {
  727. padding-right: 0;
  728. padding-left: 0;
  729. }
  730.  
  731. /*
  732. LS Compare
  733. */
  734.  
  735. #LSCompareItems {
  736. position: fixed;
  737. bottom: 0;
  738. left: 0;
  739. width: 100%;
  740. height: 0;
  741. background: rgb(82, 24, 59);
  742. }
  743.  
  744. #LSCompareItems.open {
  745. transition-property: all;
  746. transition-duration: .5s;
  747. transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  748. height: 6.875rem;
  749. }
  750.  
  751. #LSCompareItems.closed {
  752. transition-property: all;
  753. transition-duration: .5s;
  754. transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  755. height: 0;
  756. overflow: hidden;
  757. width: 100%;
  758. }
  759.  
  760. #LSCompareItems .ls-brick-compare-card {
  761. background:#fff;
  762. box-sizing: border-box;
  763. padding: 0.25rem;
  764. position: relative;
  765. }
  766.  
  767. #LSCompareItems .ls-brick-compare-card-empty {
  768. background: rgb(48, 24, 40);
  769. height: 5.625rem;
  770. margin-top: 0.5rem;
  771. box-sizing: border-box;
  772. position: relative;
  773. }
  774.  
  775. #LSCompareItems .ls-brick-compare-card .close-button {
  776. position: absolute;
  777. top: 0.1rem;
  778. right: 0.2rem;
  779. color:red;
  780. cursor: pointer;
  781. }
  782.  
  783. #LSCompareItems .ls-brick-compare-card .close-button i {
  784. font-size: 1.5rem;
  785. }
  786.  
  787. #LSCompareItems .ls-brick-item-img {
  788. height: auto;
  789. min-height: 5rem;
  790. width: 25%;
  791. min-width: 3.125rem;
  792. background-color: transparent;
  793. background-size: cover;
  794. background-repeat: no-repeat;
  795. background-position: center center;
  796. position: relative;
  797. float: left;
  798. margin-right: 1rem;
  799. }
  800. #LSCompareItems .ls-brick-item .ls-brick-item-img {
  801. background-size: contain;
  802. }
  803.  
  804. #LSCompareItems .ls-brick-compare-desc {
  805. font-weight: bold;
  806. text-overflow: ellipsis;
  807. overflow: hidden;
  808. }
  809.  
  810. #LSCompareItems .ls-compare-buttons a .fa,
  811. #LSCompareItems .ls-compare-buttons a .button-text {
  812. color:#fff;
  813. }
  814. #LSCompareItems .ls-compare-buttons .button {
  815. opacity: .9;
  816. cursor: pointer;
  817. position: static;
  818. height: auto;
  819. }
  820. #LSCompareItems .ls-compare-buttons .button.disabled{
  821. opacity: .2;
  822. cursor: default;
  823. }
  824.  
  825. #LSCompareItems .ls-compare-buttons .fa{
  826. font-size: 3rem;
  827. }
  828. #LSCompareItems .ls-compare-buttons .button-text{
  829. font-size: 1rem;
  830. font-weight: lighter;
  831. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!