207. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2023-03-13 03:01:05 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

207.1 Files compared

#LocationFileLast Modified
1Porto v4.0.4/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module_minicart.less2021-02-15 04:15:52 +0000
2Porto v4.0.5/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module_minicart.less2023-02-14 08:55:42 +0000

207.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged5774
Changed12
Inserted3109
Removed00

207.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

207.4 Active regular expressions

No regular expressions were active.

207.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 // 6 //
7 //  Variables 7 //  Variables
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 @minicart__padding-horizontal: @indent__base; 10 @minicart__padding-horizontal: @indent__base;
11  11 
12 @minicart-qty__height: 24px; 12 @minicart-qty__height: 24px;
13  13 
14 // 14 //
15 //  Common 15 //  Common
16 //  _____________________________________________ 16 //  _____________________________________________
17  17 
18 & when (@media-common = true) { 18 & when (@media-common = true) {
19  19 
20     // 20     //
21     //  Minicart 21     //  Minicart
22     //  --------------------------------------------- 22     //  ---------------------------------------------
23  23 
24     .block-minicart { 24     .block-minicart {
25         .items-total { 25         .items-total {
26             float: right; 26             float: right;
27             .count { 27             .count {
28                 font-weight: @font-weight__bold; 28                 font-weight: @font-weight__bold;
29                 color: #000; 29                 color: #000;
30             } 30             }
31         } 31         }
32         .subtotal { 32         .subtotal {
33             text-align: left; 33             text-align: left;
34             .label { 34             .label {
35                 &:extend(.abs-colon all); 35                 &:extend(.abs-colon all);
36             } 36             }
37         } 37         }
38         .subtitle { 38         .subtitle {
39             display: none; 39             display: none;
40             &.empty { 40             &.empty {
41                 display: block; 41                 display: block;
42                 padding: 18px 0; 42                 padding: 18px 0;
43                 text-align: center; 43                 text-align: center;
44                 font-size: inherit; 44                 font-size: inherit;
45                 font-weight: 400; 45                 font-weight: 400;
46             } 46             }
    47             .minicart-offcanvas & {
    48               &.empty {
    49                 padding: 18px 20px;
    50                 text-align: left;
    51               }
    52             }
47         } 53         }
48         .text { 54         .text {
49             &.empty { 55             &.empty {
50                 text-align: center; 56                 text-align: center;
51             } 57             }
52         } 58         }
53         .block-content { 59         .block-content {
54             > .actions { 60             > .actions {
55                 > .secondary { 61                 > .secondary {
56                     text-align: center; 62                     text-align: center;
57                     margin: 0 0 15px; 63                     margin: 0 0 15px;
58                     .action { 64                     .action {
59                         &.viewcart { 65                         &.viewcart {
60                             display: block; 66                             display: block;
61                             width: 100%; 67                             width: 100%;
62                             padding: 10px 15px; 68                             padding: 10px 15px;
63                             text-transform: uppercase; 69                             text-transform: uppercase;
64                             font-size: 15px; 70                             font-size: 15px;
65                             border: 1px solid #ccc; 71                             border: 1px solid #ccc;
66                             border-radius: 3px; 72                             border-radius: 3px;
67                         } 73                         }
68                     } 74                     }
69                 } 75                 }
70                 .paypal-logo { 76                 .paypal-logo {
71                     margin-top: 15px; 77                     margin-top: 15px;
72                     text-align: center; 78                     text-align: center;
73                 } 79                 }
74             } 80             }
75         } 81         }
76         .block-category-link, 82         .block-category-link,
77         .block-product-link, 83         .block-product-link,
78         .block-cms-link, 84         .block-cms-link,
79         .block-banners { 85         .block-banners {
80             margin: 15px 0 0; 86             margin: 15px 0 0;
81             text-align: center; 87             text-align: center;
82         } 88         }
83     } 89     }
84  90 
85     .minicart-wrapper { 91     .minicart-wrapper {
86         .lib-dropdown( 92         .lib-dropdown(
87             @_toggle-selector: ~".action.showcart", 93             @_toggle-selector: ~".action.showcart",
88             @_options-selector: ~".block-minicart", 94             @_options-selector: ~".block-minicart",
89             @_dropdown-toggle-icon-content: @icon-mini-cart, 95             @_dropdown-toggle-icon-content: @icon-mini-cart,
90             @_dropdown-toggle-active-icon-content: @icon-mini-cart, 96             @_dropdown-toggle-active-icon-content: @icon-mini-cart,
91             @_dropdown-list-item-padding: false, 97             @_dropdown-list-item-padding: false,
92             @_dropdown-list-item-hover: false, 98             @_dropdown-list-item-hover: false,
93             @_dropdown-list-margin-top: 7px, 99             @_dropdown-list-margin-top: 7px,
94             @_dropdown-list-border: 0, 100             @_dropdown-list-border: 0,
95             @_dropdown-list-pointer-position-top: -21px, 101             @_dropdown-list-pointer-position-top: -21px,
96             @_icon-font-position: before, 102             @_icon-font-position: before,
97             @_icon-font-size: 26px, 103             @_icon-font-size: 26px,
98             @_icon-font-line-height: 33px, 104             @_icon-font-line-height: 33px,
99             @_icon-font-color: @minicart-icons-color, 105             @_icon-font-color: @minicart-icons-color,
100             @_icon-font-color-hover: @minicart-icons-color-hover, 106             @_icon-font-color-hover: @minicart-icons-color-hover,
101             @_icon-font-color-active: @minicart-icons-color 107             @_icon-font-color-active: @minicart-icons-color
102         ); 108         );
103         .block-minicart { 109         .block-minicart {
104             .lib-css(padding, 15px @minicart__padding-horizontal); 110             .lib-css(padding, 15px @minicart__padding-horizontal);
105             width: 300px; 111             width: 300px;
106             right: 0; 112             right: 0;
107             color: #222529; 113             color: #222529;
108             top: 100%; 114             top: 100%;
109             margin-top: 13px; 115             margin-top: 13px;
110             right: 0; 116             right: 0;
111             box-shadow: 0 5px 8px rgba(0,0,0,.15); 117             box-shadow: 0 5px 8px rgba(0,0,0,.15);
112             .block-title { 118             .block-title {
113                 display: none; 119                 display: none;
114             } 120             }
115             &:before, &::after {display: none;} 121             &:before, &::after {display: none;}
116         } 122         }
117         .product { 123         .product {
118             .actions { 124           .actions {
119                 > .primary, 125             > .primary,
120                 > .secondary { 126             > .secondary {
121                     display: inline; 127                 display: inline;
122                 } 128             }
    129             .minicart-offcanvas& {
    130               > .secondary {
    131                 right: 10px;
    132               }
    133             }
123             } 134           }
124         } 135         }
125         .action { 136         .action {
126             &.close { 137             &.close {
127                 width: 40px; 138                 width: 40px;
128                 height: 40px; 139                 height: 40px;
129                 top: 0; 140                 top: 0;
130                 right: 0; 141                 right: 0;
131                 position: absolute; 142                 position: absolute;
132                 .lib-button-reset(); 143                 .lib-button-reset();
133                 .lib-button-icon( 144                 .lib-button-icon(
134                     @icon-remove, 145                     @icon-remove,
135                     @_icon-font-color: #777, 146                     @_icon-font-color: #777,
136                     @_icon-font-size: 16px, 147                     @_icon-font-size: 16px,
137                     @_icon-font-line-height: 16px, 148                     @_icon-font-line-height: 16px,
138                     @_icon-font-text-hide: true 149                     @_icon-font-text-hide: true
139                 ); 150                 );
140             } 151             }
141             &.showcart { 152             &.showcart {
142                 white-space: nowrap; 153                 white-space: nowrap;
143                 display: flex; 154                 display: flex;
144                 align-items: center; 155                 align-items: center;
145                 position: relative; 156                 position: relative;
146                 &.active { 157                 &.active {
147                   display: flex; 158                   display: flex;
148                   align-items: center; 159                   align-items: center;
149                   .minicart-icon { 160                   .minicart-icon {
150                     &::after { 161                     &::after {
151                       content: ""; 162                       content: "";
152                       border-width: 1px 1px 0 0; 163                       border-width: 1px 1px 0 0;
153                       border-color: #f4f4f4; 164                       border-color: #f4f4f4;
154                       border-style: solid; 165                       border-style: solid;
155                       background: #fff; 166                       background: #fff;
156                       width: 14px; 167                       width: 14px;
157                       height: 14px; 168                       height: 14px;
158                       position: absolute; 169                       position: absolute;
159                       top: calc(100%); 170                       top: calc(100%);
160                       left: 50%; 171                       left: 50%;
161                       margin-top: 8px; 172                       margin-top: 8px;
162                       margin-left: -7px; 173                       margin-left: -7px;
163                       transform: rotate(-45deg); 174                       transform: rotate(-45deg);
164                       z-index: 1004; 175                       z-index: 9;
165                       animation: arrowFadeInDown .2s ease-out; 176                       animation: arrowFadeInDown .2s ease-out;
166                     } 177                     }
167                   } 178                   }
168                 } 179                 }
169                 .minicart-icon { 180                 .minicart-icon {
170                   font-size: 26px; 181                   font-size: 26px;
171                   position: relative; 182                   position: relative;
172                   &::before {margin: 0;} 183                   &::before {margin: 0;}
173                 } 184                 }
174                 .text { 185                 .text {
175                     &:extend(.abs-visually-hidden all); 186                     &:extend(.abs-visually-hidden all);
176                 } 187                 }
177                 .counter.qty { 188                 .counter.qty {
178                     color: @minicart__qty_color; 189                     color: @minicart__qty_color;
179                     position: absolute; 190                     position: absolute;
180                     right: 18px; 191                     right: 18px;
181                     top: -5px; 192                     top: -5px;
182                     font-size: 10px; 193                     font-size: 10px;
183                     font-weight: 600; 194                     font-weight: 600;
184                     text-align: center; 195                     text-align: center;
185                     width: 16px; 196                     width: 16px;
186                     height: 16px; 197                     height: 16px;
187                     line-height: 16px; 198                     line-height: 16px;
188                     border-radius: 8px; 199                     border-radius: 8px;
189                     overflow: hidden; 200                     overflow: hidden;
190                     color: #fff; 201                     color: #fff;
191                     background-color: #ff5b5b; 202                     background-color: #ff5b5b;
192                     padding: 0; 203                     padding: 0;
193                     .loader { 204                     .loader {
194                         > img { 205                         > img {
195                             .lib-css(max-width, @minicart-qty__height); 206                             .lib-css(max-width, @minicart-qty__height);
196                         } 207                         }
197                     } 208                     }
198                 } 209                 }
199                 .counter-label { 210                 .counter-label {
200                     &:extend(.abs-visually-hidden all); 211                     &:extend(.abs-visually-hidden all);
201                 } 212                 }
202                 &:before, &.active:before { 213                 &:before, &.active:before {
203                     color: @minicart__icon_color; 214                     color: @minicart__icon_color;
204                     line-height: 40px; 215                     line-height: 40px;
205                     margin: 0; 216                     margin: 0;
206                     display: none; 217                     display: none;
207                 } 218                 }
208                 &:hover:before, &:active:before, &.active:before, &.active:hover:before { 219                 &:hover:before, &:active:before, &.active:before, &.active:hover:before {
209                     color: @minicart__icon_color; 220                     color: @minicart__icon_color;
210                 } 221                 }
211                 &::after { 222                 &::after {
212                   content: "\e81c"; 223                   content: "\e81c";
213                   font-family: 'porto-icons'; 224                   font-family: 'porto-icons';
214                   font-size: 17px; 225                   font-size: 17px;
215                   margin-left: 15px; 226                   margin-left: 15px;
216                   display: block; 227                   display: block;
217                 } 228                 }
218             } 229             }
219         } 230         }
220         .minicart-widgets { 231         .minicart-widgets {
221             padding: 0 10px 0; 232             padding: 0 10px 0;
222         } 233         }
    234         &.minicart-offcanvas{
    235           .action {
    236             &.showcart {
    237               &.active {
    238                 .minicart-icon {
    239                   &::after {display: none;}
    240                 }
    241               }
    242             }
    243           }
    244           &.active {
    245             .minicart-overlay {
    246                 display: block;
    247             }
    248             .block-minicart {transform: translateX(0);}
    249           }
    250           > .mage-dropdown-dialog {display: block !important;}
    251           .block-minicart {
    252             transform: translateX(105%);z-index: 1025;transition: transform 0.35s;position: fixed;top: 0;height: 100%;right: 0 !important;left: auto !important;width: 320px;min-width: auto;margin: 0;
    253             padding-left: 0;
    254             padding-right: 0;
    255             > div {
    256               height: 100%;
    257               display: flex;
    258               flex-direction: column;
    259             }
    260             .block-title {
    261               display: block;
    262               padding: 10px 20px;
    263               margin: 0;
    264               flex: 0 0 auto;
    265               .qty {
    266                 display: none;
    267               }
    268             }
    269             .total-count,li,.subtotal,.block-content > .actions,.minicart-widgets {
    270                 padding-left: 20px;
    271                 padding-right: 20px;
    272             }
    273           }
    274           .minicart-overlay {
    275             position: fixed;
    276             z-index: 1023;
    277             left: 0;
    278             top: 0;
    279             bottom: 0;
    280             right: 0;
    281             background: rgba(0,0,0,0.4);
    282             display: none;
    283             svg {
    284                 position: absolute;
    285                 top: 10px;
    286                 right: 330px;
    287                 width: 1.5rem;
    288                 height: 1.5rem;
    289                 cursor: pointer;
    290             }
    291           }
    292           .block-content {
    293               display: flex;
    294               flex-direction: column;
    295               height: 100%;
    296               flex: 1 1 100%;
    297               .minicart-items-wrapper {
    298                   max-height: inherit;
    299                   flex: 1 1 100%;
    300                   height: 100% !important;
    301                   overflow: auto;
    302                   position: relative;
    303                   .minicart-items {
    304                     position: absolute;
    305                     top: 0;
    306                     right: 0;
    307                     bottom: 0;
    308                     padding: 0;
    309                     left: 0;
    310                     max-height: 100%;
    311                     list-style: none;
    312                     overflow: hidden;
    313                     overflow-y: auto;
    314                     -webkit-overflow-scrolling: touch;
    315                     scrollbar-width: thin;
    316                     &::-webkit-scrollbar {
    317                         width: 5px;
    318                     }
    319                     &::-webkit-scrollbar-track {
    320                         background-color: rgba(0,0,0,.05);
    321                     }
    322                     &::-webkit-scrollbar-thumb {
    323                         background-color: rgba(0,0,0,.12);
    324                     }
    325                   }
    326               }
    327               .subtotal {
    328                   flex: 0 0 auto;
    329               }
    330           }
    331         }
223     } 332     }
224     .cart-design-2 { 333     .cart-design-2 {
225       .action { 334       .action {
226         &.showcart { 335         &.showcart {
227           .minicart-icon { 336           .minicart-icon {
228             width: 25px; 337             width: 25px;
229             height: 20px; 338             height: 20px;
230             border: 2px solid #222529; 339             border: 2px solid #222529;
231             border-radius: 0 0 5px 5px; 340             border-radius: 0 0 5px 5px;
232             position: relative; 341             position: relative;
233             opacity: 1; 342             opacity: 1;
234             margin: 6px 3px 0; 343             margin: 6px 3px 0;
235             font-size: 32px; 344             font-size: 32px;
236             &::before { 345             &::before {
237               content: ''; 346               content: '';
238               position: absolute; 347               position: absolute;
239               border: 2px solid; 348               border: 2px solid;
240               border-color: inherit; 349               border-color: inherit;
241               border-bottom: none; 350               border-bottom: none;
242               border-radius: 10px 10px 0 0; 351               border-radius: 10px 10px 0 0;
243               left: 50%; 352               left: 50%;
244               top: -8px; 353               top: -8px;
245               margin-left: -7.5px; 354               margin-left: -7.5px;
246               width: 15px; 355               width: 15px;
247               height: 11px; 356               height: 11px;
248             } 357             }
249           } 358           }
250         } 359         }
251       } 360       }
252     } 361     }
253     .minicart-items-wrapper { 362     .minicart-items-wrapper {
254         overflow-x: auto; 363         overflow-x: auto;
255     } 364     }
256  365 
257     .minicart-items { 366     .minicart-items {
258         .lib-list-reset-styles(); 367         .lib-list-reset-styles();
259         .product-item { 368         .product-item {
260             > .product { 369             > .product {
261                 &:extend(.abs-add-clearfix all); 370                 &:extend(.abs-add-clearfix all);
262             } 371             }
263         } 372         }
264         .product-image-wrapper { 373         .product-image-wrapper {
265             &:extend(.abs-reset-image-wrapper all); 374             &:extend(.abs-reset-image-wrapper all);
266         } 375         }
267         .product-item-pricing { 376         .product-item-pricing {
268             .label { 377             .label {
269                 display: inline-block; 378                 display: inline-block;
270             } 379             }
271         } 380         }
272         .price-minicart { 381         .price-minicart {
273             margin-bottom: @indent__xs; 382             margin-bottom: @indent__xs;
274         } 383         }
275         .product-item-details { 384         .product-item-details {
276             text-align: left; 385             text-align: left;
277             .price-including-tax, 386             .price-including-tax,
278             .price-excluding-tax { 387             .price-excluding-tax {
279                 margin: @indent__xs 0; 388                 margin: @indent__xs 0;
280             } 389             }
281             .weee[data-label] { 390             .weee[data-label] {
282                 .lib-font-size(11); 391                 .lib-font-size(11);
283                 .label { 392                 .label {
284                     &:extend(.abs-no-display all); 393                     &:extend(.abs-no-display all);
285                 } 394                 }
286             } 395             }
287             .details-qty { 396             .details-qty {
288                 margin-top: @indent__s; 397                 margin-top: @indent__s;
289             } 398             }
290         } 399         }
291         .product { 400         .product {
292             > .product-item-photo, 401             > .product-item-photo,
293             > .product-image-container { 402             > .product-image-container {
294                 float: left; 403                 float: left;
295                 min-width: 0; 404                 min-width: 0;
296             } 405             }
297             .toggle { 406             .toggle {
298                 &:after { 407                 &:after {
299                     position: static; 408                     position: static;
300                     margin: 0 0 0 @indent__xs; 409                     margin: 0 0 0 @indent__xs;
301                     .lib-css(color, @color-gray56); 410                     .lib-css(color, @color-gray56);
302                 } 411                 }
303                 border: 0; 412                 border: 0;
304                 padding: 0 @indent__xl @indent__xs 0; 413                 padding: 0 @indent__xl @indent__xs 0;
305             } 414             }
306             .product.options { 415             .product.options {
307                 > .toggle { 416                 > .toggle {
308                     &:after { 417                     &:after {
309                         font-family: @icon-font-family; 418                         font-family: @icon-font-family;
310                     } 419                     }
311                     .lib-icon-font-symbol( 420                     .lib-icon-font-symbol(
312                         @_icon-font-content: @icon-down, 421                         @_icon-font-content: @icon-down,
313                         @_icon-font-position: after 422                         @_icon-font-position: after
314                     ); 423                     );
315                 } 424                 }
316                 &.active { 425                 &.active {
317                     > .toggle { 426                     > .toggle {
318                         .lib-icon-font-symbol( 427                         .lib-icon-font-symbol(
319                             @_icon-font-content: @icon-up, 428                             @_icon-font-content: @icon-up,
320                             @_icon-font-position: after 429                             @_icon-font-position: after
321                         ); 430                         );
322                     } 431                     }
323                 } 432                 }
324             } 433             }
325             &.pricing { 434             &.pricing {
326                 margin-top: 3px; 435                 margin-top: 3px;
327             } 436             }
328             &.options { 437             &.options {
329                 .tooltip.toggle { 438                 .tooltip.toggle {
330                     .lib-icon-font( 439                     .lib-icon-font(
331                         @icon-down, 440                         @icon-down,
332                         @_icon-font-size: 12px, 441                         @_icon-font-size: 12px,
333                         @_icon-font-line-height: 12px, 442                         @_icon-font-line-height: 12px,
334                         @_icon-font-text-hide: true, 443                         @_icon-font-text-hide: true,
335                         @_icon-font-margin: -3px 0 0 7px, 444                         @_icon-font-margin: -3px 0 0 7px,
336                         @_icon-font-position: after 445                         @_icon-font-position: after
337                     ); 446                     );
338                 } 447                 }
339                 .details { 448                 .details {
340                     display: none; 449                     display: none;
341                 } 450                 }
342             } 451             }
343         } 452         }
344         .details-qty, 453         .details-qty,
345         .price-minicart { 454         .price-minicart {
346             .label { 455             .label {
347                 &:extend(.abs-colon all); 456                 &:extend(.abs-colon all);
348             } 457             }
349         } 458         }
350         .item-qty { 459         .item-qty {
351             width: 40px; 460             width: 40px;
352             text-align: center; 461             text-align: center;
353             margin-right: @indent__s; 462             margin-right: @indent__s;
354             border-radius: 3px; 463             border-radius: 3px;
355         } 464         }
356         .update-cart-item { 465         .update-cart-item {
357             vertical-align: top; 466             vertical-align: top;
358             .lib-font-size(11); 467             .lib-font-size(11);
359         } 468         }
360         .subtitle { 469         .subtitle {
361             display: none; 470             display: none;
362         } 471         }
363     } 472     }
364  473 
365 } 474 }
366  475 
367 // 476 //
368 //  Mobile 477 //  Mobile
369 //  _____________________________________________ 478 //  _____________________________________________
370  479 
371 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) { 480 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
372     .minicart-wrapper .block-minicart { 481     .minicart-wrapper .block-minicart {
373         width: 290px; 482         width: 290px;
374     } 483     }
375 } 484 }
376  485 
377 // 486 //
378 //  Desktop 487 //  Desktop
379 //  _____________________________________________ 488 //  _____________________________________________
380  489 
381 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 490 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
382     .minilist .action.delete, 491     .minilist .action.delete,
383     .minicart-wrapper .action.edit { 492     .minicart-wrapper .action.edit {
384         .lib-icon-font-size( 493         .lib-icon-font-size(
385             @_icon-font-size: 16px 494             @_icon-font-size: 16px
386         ); 495         );
387     } 496     }
388 } 497 }