232. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:03 +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.

232.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module_minicart.less2016-06-22 16:28:28 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module_minicart.less2021-02-15 04:15:52 +0000

232.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged30590
Changed882
Inserted339
Removed1899

232.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

232.4 Active regular expressions

No regular expressions were active.

232.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             margin-top: 20px;    
28             .count { 27             .count {
29                 font-weight: @font-weight__bold; 28                 font-weight: @font-weight__bold;
30                 color: #000; 29                 color: #000;
31             } 30             }
32         } 31         }
33         .subtotal { 32         .subtotal {
34             text-align: left; 33             text-align: left;
35             .label { 34             .label {
36                 &:extend(.abs-colon all); 35                 &:extend(.abs-colon all);
37             } 36             }
38         } 37         }
39         .amount {    
40             .price-wrapper {    
41                 color: #000;    
42                 &:first-child {    
43                     .price {    
44                         font-size: @font-size__l;    
45                         font-weight: @font-weight__bold;    
46                     }    
47                 }    
48             }    
49         }    
50         .subtitle { 38         .subtitle {
51             display: none; 39             display: none;
52             &.empty { 40             &.empty {
53                 display: block; 41                 display: block;
54                 padding: @indent__l 0 @indent__base; 42                 padding: 18px 0;
55                 text-align: center; 43                 text-align: center;
56                 font-size: 13px; 44                 font-size: inherit;
57                 font-weight: 400; 45                 font-weight: 400;
58             } 46             }
59         } 47         }
60         .text { 48         .text {
61             &.empty { 49             &.empty {
62                 text-align: center; 50                 text-align: center;
63             } 51             }
64         } 52         }
65         .block-content { 53         .block-content {
66             > .actions { 54             > .actions {
67                 margin-top: 15px;    
68                 > .secondary { 55                 > .secondary {
69                     text-align: center; 56                     text-align: center;
70                     margin: 0 0 15px; 57                     margin: 0 0 15px;
71                     .action { 58                     .action {
72                         &.viewcart { 59                         &.viewcart {
73                             display: block; 60                             display: block;
74                             width: 100%; 61                             width: 100%;
75                             padding: 10px 15px; 62                             padding: 10px 15px;
76                             text-transform: uppercase; 63                             text-transform: uppercase;
77                             font-size: 15px; 64                             font-size: 15px;
78                             border: 1px solid #ccc; 65                             border: 1px solid #ccc;
79                             border-radius: 3px; 66                             border-radius: 3px;
80                         } 67                         }
81                     } 68                     }
82                 } 69                 }
83                 > .primary {    
84                     margin: 0 0 15px;    
85                     .action {    
86                         &.primary {    
87                             &:extend(.abs-button-l all);    
88                             display: block;    
89                             width: 100%;    
90                             padding: 10px 15px;    
91                             font-weight: 400;    
92                             text-transform: uppercase;    
93                             font-size: 15px;    
94                         }    
95                     }    
96                 }    
97                 .paypal-logo { 70                 .paypal-logo {
98                     margin-top: 15px; 71                     margin-top: 15px;
99                     text-align: center; 72                     text-align: center;
100                 } 73                 }
101             } 74             }
102         } 75         }
103         .block-category-link, 76         .block-category-link,
104         .block-product-link, 77         .block-product-link,
105         .block-cms-link, 78         .block-cms-link,
106         .block-banners { 79         .block-banners {
107             margin: 15px 0 0; 80             margin: 15px 0 0;
108             text-align: center; 81             text-align: center;
109         } 82         }
110     } 83     }
111  84 
112     .minicart-wrapper { 85     .minicart-wrapper {
113         .lib-dropdown( 86         .lib-dropdown(
114             @_toggle-selector: ~".action.showcart", 87             @_toggle-selector: ~".action.showcart",
115             @_options-selector: ~".block-minicart", 88             @_options-selector: ~".block-minicart",
116             @_dropdown-toggle-icon-content: @icon-mini-cart, 89             @_dropdown-toggle-icon-content: @icon-mini-cart,
117             @_dropdown-toggle-active-icon-content: @icon-mini-cart, 90             @_dropdown-toggle-active-icon-content: @icon-mini-cart,
118             @_dropdown-list-item-padding: false, 91             @_dropdown-list-item-padding: false,
119             @_dropdown-list-item-hover: false, 92             @_dropdown-list-item-hover: false,
120             @_dropdown-list-margin-top: 7px, 93             @_dropdown-list-margin-top: 7px,
121             @_dropdown-list-border: 0, 94             @_dropdown-list-border: 0,
122             @_dropdown-list-pointer-position-top: -21px, 95             @_dropdown-list-pointer-position-top: -21px,
123             @_icon-font-position: before, 96             @_icon-font-position: before,
124             @_icon-font-size: 35px, 97             @_icon-font-size: 26px,
125             @_icon-font-line-height: 33px, 98             @_icon-font-line-height: 33px,
126             @_icon-font-color: @minicart-icons-color, 99             @_icon-font-color: @minicart-icons-color,
127             @_icon-font-color-hover: @minicart-icons-color-hover, 100             @_icon-font-color-hover: @minicart-icons-color-hover,
128             @_icon-font-color-active: @minicart-icons-color 101             @_icon-font-color-active: @minicart-icons-color
129         ); 102         );
130         .block-minicart { 103         .block-minicart {
131             .lib-css(padding, 25px @minicart__padding-horizontal); 104             .lib-css(padding, 15px @minicart__padding-horizontal);
132             width: 320px; 105             width: 300px;
133             right: -15px; 106             right: 0;
134             border-top: 6px solid @theme-color; 107             color: #222529;
135             color: @minicart__text-color; 108             top: 100%;
136             & when (@enable_border_radius = true) { 109             margin-top: 13px;
137                 border-radius: 8px; 110             right: 0;
138             } 111             box-shadow: 0 
5px 8px rgba(0,0,0,
.15);
139             box-shadow: 0 5px 
rgba(0,0,0,0.25);
    
140             .block-title { 112             .block-title {
141                 display: none; 113                 display: none;
142             } 114             }
143             &:after { 115             &:before, &::after {display: none;}
144                 left: auto;    
145                 right: 25px;    
146                 border: 9px solid;    
147                 border-color: transparent transparent rgba(0,0,0,0.1) transparent;    
148             }    
149             &:before {    
150                 left: auto;    
151                 right: 26px;    
152                 border: 8px solid;    
153                 border-color: transparent transparent @theme-color transparent;    
154             }    
155         } 116         }
156         .product { 117         .product {
157             .actions { 118             .actions {
158                 float: right;    
159                 margin: -30px 0 0;    
160                 > .primary, 119                 > .primary,
161                 > .secondary { 120                 > .secondary {
162                     display: inline; 121                     display: inline;
163                     &:not(:last-child) {    
164                         margin-right: 15px;    
165                     }    
166                 } 122                 }
167             } 123             }
168         } 124         }
169         .action { 125         .action {
170             &.close { 126             &.close {
171                 width: 40px; 127                 width: 40px;
172                 height: 40px; 128                 height: 40px;
173                 top: 0; 129                 top: 0;
174                 right: 0; 130                 right: 0;
175                 position: absolute; 131                 position: absolute;
176                 .lib-button-reset(); 132                 .lib-button-reset();
177                 .lib-button-icon( 133                 .lib-button-icon(
178                     @icon-remove, 134                     @icon-remove,
179                     @_icon-font-color: #777, 135                     @_icon-font-color: #777,
180                     @_icon-font-size: 16px, 136                     @_icon-font-size: 16px,
181                     @_icon-font-line-height: 16px, 137                     @_icon-font-line-height: 16px,
182                     @_icon-font-text-hide: true 138                     @_icon-font-text-hide: true
183                 ); 139                 );
184             } 140             }
185             &.showcart { 141             &.showcart {
186                 white-space: nowrap; 142                 white-space: nowrap;
    143                 display: flex;
    144                 align-items: center;
    145                 position: relative;
    146                 &.active {
    147                   display: flex;
    148                   align-items: center;
    149                   .minicart-icon {
    150                     &::after {
    151                       content: "";
    152                       border-width: 1px 1px 0 0;
    153                       border-color: #f4f4f4;
    154                       border-style: solid;
    155                       background: #fff;
    156                       width: 14px;
    157                       height: 14px;
    158                       position: absolute;
    159                       top: calc(100%);
    160                       left: 50%;
    161                       margin-top: 8px;
    162                       margin-left: -7px;
    163                       transform: rotate(-45deg);
    164                       z-index: 1004;
    165                       animation: arrowFadeInDown .2s ease-out;
    166                     }
    167                   }
    168                 }
    169                 .minicart-icon {
    170                   font-size: 26px;
    171                   position: relative;
    172                   &::before {margin: 0;}
    173                 }
187                 .text { 174                 .text {
188                     &:extend(.abs-visually-hidden all); 175                     &:extend(.abs-visually-hidden all);
189                 } 176                 }
190                 .counter.qty { 177                 .counter.qty {
191                     color: @minicart__qty_color; 178                     color: @minicart__qty_color;
192                     .lib-css(height, @minicart-qty__height);    
193                     .lib-css(line-height, @minicart-qty__height);    
194                     border-radius: 2px;    
195                     display: inline-block;    
196                     margin: -11px 0 0;    
197                     min-width: 18px;    
198                     width: 100%;    
199                     overflow: hidden;    
200                     padding: 0 3px;    
201                     text-align: center;    
202                     white-space: normal;    
203                     position: absolute; 179                     position: absolute;
204                     top: 50%; 180                     right: 18px;
205                     left: 0; 181                     top: -5px;
    182                     font-size: 10px;
206                     font-weight: 600; 183                     font-weight: 600;
207                     font-size: 14px; 184                     text-align: center;
    185                     width: 16px;
    186                     height: 16px;
    187                     line-height: 16px;
    188                     border-radius: 8px;
    189                     overflow: hidden;
    190                     color: #fff;
    191                     background-color: #ff5b5b;
    192                     padding: 0;
208                     .loader { 193                     .loader {
209                         > img { 194                         > img {
210                             .lib-css(max-width, @minicart-qty__height); 195                             .lib-css(max-width, @minicart-qty__height);
211                         } 196                         }
212                     } 197                     }
213                 } 198                 }
214                 .counter-label { 199                 .counter-label {
215                     &:extend(.abs-visually-hidden all); 200                     &:extend(.abs-visually-hidden all);
216                 } 201                 }
217                 &:before, &.active:before { 202                 &:before, &.active:before {
218                     color: @minicart__icon_color; 203                     color: @minicart__icon_color;
219                     line-height: 40px; 204                     line-height: 40px;
220                     margin: 0; 205                     margin: 0;
    206                     display: none;
221                 } 207                 }
222                 &:hover:before, &:active:before, &.active:before, &.active:hover:before { 208                 &:hover:before, &:active:before, &.active:before, &.active:hover:before {
223                     color: @minicart__icon_color; 209                     color: @minicart__icon_color;
224                 } 210                 }
    211                 &::after {
    212                   content: "\e81c";
    213                   font-family: 'porto-icons';
    214                   font-size: 17px;
    215                   margin-left: 15px;
    216                   display: block;
    217                 }
225             } 218             }
226         } 219         }
227         .minicart-widgets { 220         .minicart-widgets {
228             margin-top15px; 221             padding: 0 10px 0;
    222         }
    223     }
    224     .cart-design-2 {
    225       .action {
    226         &.showcart {
    227           .minicart-icon {
    228             width: 25px;
    229             height: 20px;
    230             border: 2px solid #222529;
    231             border-radius: 0 0 5px 5px;
    232             position: relative;
    233             opacity: 1;
    234             margin: 6px 3px 0;
    235             font-size: 32px;
    236             &::before {
    237               content: '';
    238               position: absolute;
    239               border: 2px solid;
    240               border-color: inherit;
    241               border-bottom: none;
    242               border-radius: 10px 10px 0 0;
    243               left: 50%;
    244               top: -8px;
    245               margin-left-7.5px;
    246               width: 15px;
    247               height: 11px;
    248             }
    249           }
    250         }
229         } 251       }
230     } 252     }
231     
232     .minicart-items-wrapper { 253     .minicart-items-wrapper {
233         .lib-css(margin, 0 -15px);    
234         overflow-x: auto; 254         overflow-x: auto;
235         padding: 15px;    
236     } 255     }
237  256 
238     .minicart-items { 257     .minicart-items {
239         .lib-list-reset-styles(); 258         .lib-list-reset-styles();
240         .product-item { 259         .product-item {
241             &:not(:first-child) {    
242                 .lib-css(border-top, 1px solid @minicart__border-color);    
243             }    
244             padding: @indent__base 0;    
245             &:first-child {    
246                 padding-top: 0;    
247             }    
248             > .product { 260             > .product {
249                 &:extend(.abs-add-clearfix all); 261                 &:extend(.abs-add-clearfix all);
250             } 262             }
251         } 263         }
252         .product-image-wrapper { 264         .product-image-wrapper {
253             &:extend(.abs-reset-image-wrapper all); 265             &:extend(.abs-reset-image-wrapper all);
254         } 266         }
255         .product-item-pricing { 267         .product-item-pricing {
256             .label { 268             .label {
257                 display: inline-block; 269                 display: inline-block;
258                 width: 4.5rem;    
259             } 270             }
260         } 271         }
261         .price-minicart { 272         .price-minicart {
262             margin-bottom: @indent__xs; 273             margin-bottom: @indent__xs;
263         } 274         }
264         .product-item-name {    
265             font-size: 14px;    
266             font-weight: @font-weight__regular;    
267             margin: 0 0 @indent__s;    
268             a {    
269                 .lib-css(color, @link__color);    
270             }    
271         }    
272         .product-item-details { 275         .product-item-details {
273             padding-left: 95px;    
274             text-align: left; 276             text-align: left;
275             .price {    
276                 font-weight: @font-weight__bold;    
277                 color: #000;    
278             }    
279             .price-including-tax, 277             .price-including-tax,
280             .price-excluding-tax { 278             .price-excluding-tax {
281                 margin: @indent__xs 0; 279                 margin: @indent__xs 0;
282             } 280             }
283             .weee[data-label] { 281             .weee[data-label] {
284                 .lib-font-size(11); 282                 .lib-font-size(11);
285                 .label { 283                 .label {
286                     &:extend(.abs-no-display all); 284                     &:extend(.abs-no-display all);
287                 } 285                 }
288             } 286             }
289             .details-qty { 287             .details-qty {
290                 margin-top: @indent__s; 288                 margin-top: @indent__s;
291             } 289             }
292         } 290         }
293         .product { 291         .product {
294             > .product-item-photo, 292             > .product-item-photo,
295             > .product-image-container { 293             > .product-image-container {
296                 float: left; 294                 float: left;
297                 min-width: 0; 295                 min-width: 0;
298             } 296             }
299             .toggle { 297             .toggle {
300                 &:after { 298                 &:after {
301                     position: static; 299                     position: static;
302                     margin: 0 0 0 @indent__xs; 300                     margin: 0 0 0 @indent__xs;
303                     .lib-css(color, @color-gray56); 301                     .lib-css(color, @color-gray56);
304                 } 302                 }
305                 border: 0; 303                 border: 0;
306                 padding: 0 @indent__xl @indent__xs 0; 304                 padding: 0 @indent__xl @indent__xs 0;
307             } 305             }
308             .product.options { 306             .product.options {
309                 > .toggle { 307                 > .toggle {
310                     &:after { 308                     &:after {
311                         font-family: @icon-font-family; 309                         font-family: @icon-font-family;
312                     } 310                     }
313                     .lib-icon-font-symbol( 311                     .lib-icon-font-symbol(
314                         @_icon-font-content: @icon-down, 312                         @_icon-font-content: @icon-down,
315                         @_icon-font-position: after 313                         @_icon-font-position: after
316                     ); 314                     );
317                 } 315                 }
318                 &.active { 316                 &.active {
319                     > .toggle { 317                     > .toggle {
320                         .lib-icon-font-symbol( 318                         .lib-icon-font-symbol(
321                             @_icon-font-content: @icon-up, 319                             @_icon-font-content: @icon-up,
322                             @_icon-font-position: after 320                             @_icon-font-position: after
323                         ); 321                         );
324                     } 322                     }
325                 } 323                 }
326             } 324             }
327             &.pricing { 325             &.pricing {
328                 margin-top: 3px; 326                 margin-top: 3px;
329             } 327             }
330             &.options { 328             &.options {
331                 .tooltip.toggle { 329                 .tooltip.toggle {
332                     .lib-icon-font( 330                     .lib-icon-font(
333                         @icon-down, 331                         @icon-down,
334                         @_icon-font-size: 12px, 332                         @_icon-font-size: 12px,
335                         @_icon-font-line-height: 12px, 333                         @_icon-font-line-height: 12px,
336                         @_icon-font-text-hide: true, 334                         @_icon-font-text-hide: true,
337                         @_icon-font-margin: -3px 0 0 7px, 335                         @_icon-font-margin: -3px 0 0 7px,
338                         @_icon-font-position: after 336                         @_icon-font-position: after
339                     ); 337                     );
340                 } 338                 }
341                 .details { 339                 .details {
342                     display: none; 340                     display: none;
343                 } 341                 }
344             } 342             }
345         } 343         }
346         .details-qty, 344         .details-qty,
347         .price-minicart { 345         .price-minicart {
348             .label { 346             .label {
349                 &:extend(.abs-colon all); 347                 &:extend(.abs-colon all);
350             } 348             }
351         } 349         }
352         .item-qty { 350         .item-qty {
353             width: 40px; 351             width: 40px;
354             text-align: center; 352             text-align: center;
355             margin-right: @indent__s; 353             margin-right: @indent__s;
356             border-radius: 3px; 354             border-radius: 3px;
357         } 355         }
358         .update-cart-item { 356         .update-cart-item {
359             vertical-align: top; 357             vertical-align: top;
360             .lib-font-size(11); 358             .lib-font-size(11);
361         } 359         }
362         .action {    
363             &.edit,    
364             &.delete {    
365                 .lib-icon-font(    
366                     @icon-edit,    
367                     @_icon-font-size: 18px,    
368                     @_icon-font-line-height: 20px,    
369                     @_icon-font-text-hide: true,    
370                     @_icon-font-color: @minicart-icons-color,    
371                     @_icon-font-color-hover: @minicart-icons-color,    
372                     @_icon-font-color-active: @minicart-icons-color    
373                 );    
374             }    
375             &.delete {    
376                 .lib-icon-font-symbol(    
377                     @_icon-font-content: @icon-trash    
378                 );    
379             }    
380         }    
381         .subtitle { 360         .subtitle {
382             display: none; 361             display: none;
383         } 362         }
384     } 363     }
385  364 
386 } 365 }
387  366 
388 // 367 //
389 //  Mobile 368 //  Mobile
390 //  _____________________________________________ 369 //  _____________________________________________
391  370 
392 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) { 371 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
393     .minicart-wrapper .block-minicart { 372     .minicart-wrapper .block-minicart {
394         width: 290px; 373         width: 290px;
395     } 374     }
396 } 375 }
397  376 
398 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {    
399     .minicart-wrapper {    
400         margin-top: @indent__s;    
401     }    
402 }    
403     
404     
405 // 377 //
406 //  Desktop 378 //  Desktop
407 //  _____________________________________________ 379 //  _____________________________________________
408  380 
409 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 381 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
410     .minicart-wrapper {    
411         .block-minicart {    
412             right: -15px;    
413             width: 350px;    
414         }    
415     }    
416     .minilist .action.delete, 382     .minilist .action.delete,
417     .minicart-wrapper .action.edit { 383     .minicart-wrapper .action.edit {
418         .lib-icon-font-size( 384         .lib-icon-font-size(
419             @_icon-font-size: 16px 385             @_icon-font-size: 16px
420         ); 386         );
421     } 387     }
422 } 388 }