392. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2023-07-12 04:43:24 +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.

392.1 Files compared

#LocationFileLast Modified
1Porto v4.0.5/Theme Files/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout_tooltip.less2018-11-28 08:56:04 +0000
2Porto v4.0.6/Theme Files/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout_tooltip.less2023-06-20 07:41:56 +0000

392.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged3282
Changed26
Inserted00
Removed00

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

392.4 Active regular expressions

No regular expressions were active.

392.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 @checkout-tooltip__hover__z-index: @tooltip__z-index;  10 @checkout-tooltip__hover__z-index: @tooltip__z-index;
11  11 
12 @checkout-tooltip-icon-arrow__font-size: 10px; 12 @checkout-tooltip-icon-arrow__font-size: 10px;
13 @checkout-tooltip-icon-arrow__left: -( @checkout-tooltip-content__padding + @checkout-tooltip-icon-arrow__font-size - @checkout-tooltip-content__border-width); 13 @checkout-tooltip-icon-arrow__left: -( @checkout-tooltip-content__padding + @checkout-tooltip-icon-arrow__font-size - @checkout-tooltip-content__border-width);
14  14 
15 @checkout-tooltip-icon__color: @color-gray-light2; 15 @checkout-tooltip-icon__color: @color-gray-light2;
16 @checkout-tooltip-icon__content: @icon-help; 16 @checkout-tooltip-icon__content: @icon-help;
17 @checkout-tooltip-icon__font-size: 24px; 17 @checkout-tooltip-icon__font-size: 24px;
18 @checkout-tooltip-icon__hover__color: @primary__color; 18 @checkout-tooltip-icon__hover__color: @primary__color;
19  19 
20 @checkout-tooltip-content__background-color: @color-gray-light01; 20 @checkout-tooltip-content__background-color: @color-gray-light01;
21 @checkout-tooltip-content__border-color: #ddd; 21 @checkout-tooltip-content__border-color: #ddd;
22 @checkout-tooltip-content__border-width: 1px; 22 @checkout-tooltip-content__border-width: 1px;
23 @checkout-tooltip-content__font-size: @font-size__base; 23 @checkout-tooltip-content__font-size: @font-size__base;
24 @checkout-tooltip-content__padding: 12px; 24 @checkout-tooltip-content__padding: 12px;
25 @checkout-tooltip-content__width: 270px; 25 @checkout-tooltip-content__width: 270px;
26 @checkout-tooltip-content__active__border-color: #ddd; 26 @checkout-tooltip-content__active__border-color: #ddd;
27  27 
28 @checkout-tooltip-content-mobile-popup__width: 200px; 28 @checkout-tooltip-content-mobile-popup__width: 200px;
29 @checkout-tooltip-content-mobile__right: -(@indent__s); 29 @checkout-tooltip-content-mobile__right: -(@indent__s);
30 @checkout-tooltip-content-mobile__top: 30px + @checkout-tooltip-icon-arrow__font-size; 30 @checkout-tooltip-content-mobile__top: 30px + @checkout-tooltip-icon-arrow__font-size;
31  31 
32 // 32 //
33 //  Common 33 //  Common
34 //  _____________________________________________ 34 //  _____________________________________________
35  35 
36 & when (@media-common = true) { 36 & when (@media-common = true) {
37  37 
38     .field-tooltip { 38     .field-tooltip {
39         cursor: pointer; 39         cursor: pointer;
40         position: absolute; 40         position: absolute;
41         left: 0; 41         left: 0;
42         top: 1px; 42         top: 1px;
43  43         > .label {
    44           display: none;
    45         }
44         &._active { 46         &._active {
45             .lib-css(z-index, @checkout-tooltip__hover__z-index); 47             .lib-css(z-index, @checkout-tooltip__hover__z-index);
46  48 
47             .field-tooltip-content { 49             .field-tooltip-content {
48                 display: block; 50                 display: block;
49             } 51             }
50             .field-tooltip-action { 52             .field-tooltip-action {
51                 &:before { 53                 &:before {
52                     .lib-css(color, @checkout-tooltip-icon__hover__color); 54                     .lib-css(color, @checkout-tooltip-icon__hover__color);
53                 } 55                 }
54             } 56             }
55         } 57         }
56  58 
57         .field-tooltip-action { 59         .field-tooltip-action {
58             .lib-icon-font( 60             .lib-icon-font(
59                 @checkout-tooltip-icon__content, 61                 @checkout-tooltip-icon__content,
60                 @_icon-font-size: @checkout-tooltip-icon__font-size, 62                 @_icon-font-size: @checkout-tooltip-icon__font-size,
61                 @_icon-font-text-hide: true, 63                 @_icon-font-text-hide: true,
62                 @_icon-font-color: @checkout-tooltip-icon__color, 64                 @_icon-font-color: @checkout-tooltip-icon__color,
63                 @_icon-font-color-hover: @checkout-tooltip-icon__hover__color, 65                 @_icon-font-color-hover: @checkout-tooltip-icon__hover__color,
64                 @_icon-font-color-active: false 66                 @_icon-font-color-active: false
65             ); 67             );
66  68 
67             &:focus { 69             &:focus {
68                 ._keyfocus & { 70                 ._keyfocus & {
69                     .lib-css(z-index, @checkout-tooltip__hover__z-index); 71                     .lib-css(z-index, @checkout-tooltip__hover__z-index);
70                     + .field-tooltip-content { 72                     + .field-tooltip-content {
71                         display: block; 73                         display: block;
72                     } 74                     }
73                     &:before { 75                     &:before {
74                         .lib-css(color, @checkout-tooltip-icon__hover__color); 76                         .lib-css(color, @checkout-tooltip-icon__hover__color);
75                     } 77                     }
76                 } 78                 }
77             } 79             }
78         } 80         }
79  81 
80         .field-tooltip-content { 82         .field-tooltip-content {
81             .lib-css(background, @checkout-tooltip-content__background-color); 83             .lib-css(background, @checkout-tooltip-content__background-color);
82             .lib-css(border, @checkout-tooltip-content__border-width solid @checkout-tooltip-content__border-color); 84             .lib-css(border, @checkout-tooltip-content__border-width solid @checkout-tooltip-content__border-color);
83             .lib-css(border-radius, @checkout-tooltip-content__border-width); 85             .lib-css(border-radius, @checkout-tooltip-content__border-width);
84             .lib-css(font-size, @checkout-tooltip-content__font-size); 86             .lib-css(font-size, @checkout-tooltip-content__font-size);
85             .lib-css(padding, @checkout-tooltip-content__padding); 87             .lib-css(padding, @checkout-tooltip-content__padding);
86             .lib-css(width, @checkout-tooltip-content__width); 88             .lib-css(width, @checkout-tooltip-content__width);
87             display: none; 89             display: none;
88             right: 38px; 90             right: 38px;
89             position: absolute; 91             position: absolute;
90             text-transform: none; 92             text-transform: none;
91             top: -9px; 93             top: -9px;
92             word-wrap: break-word; 94             word-wrap: break-word;
93             z-index: 2; 95             z-index: 2;
94  96 
95             &:before, 97             &:before,
96             &:after { 98             &:after {
97                 .lib-arrow( 99                 .lib-arrow(
98                 @_position: left, 100                 @_position: left,
99                 @_size: @checkout-tooltip-icon-arrow__font-size, 101                 @_size: @checkout-tooltip-icon-arrow__font-size,
100                 @_color: @checkout-tooltip-content__background-color 102                 @_color: @checkout-tooltip-content__background-color
101                 ); 103                 );
102                 .lib-css(right, @checkout-tooltip-icon-arrow__left); 104                 .lib-css(right, @checkout-tooltip-icon-arrow__left);
103                 .lib-css(top, @checkout-tooltip-content__padding); 105                 .lib-css(top, @checkout-tooltip-content__padding);
104                 border-right-color: transparent; 106                 border-right-color: transparent;
105                 border-left-color: @checkout-tooltip-content__background-color; 107                 border-left-color: @checkout-tooltip-content__background-color;
106                 content: ''; 108                 content: '';
107                 display: block; 109                 display: block;
108                 position: absolute; 110                 position: absolute;
109                 z-index: 3; 111                 z-index: 3;
110             } 112             }
111             &:before { 113             &:before {
112                 .lib-css(border-left-color, @checkout-tooltip-content__active__border-color); 114                 .lib-css(border-left-color, @checkout-tooltip-content__active__border-color);
113             } 115             }
114             &:after { 116             &:after {
115                 .lib-css(border-left-color, @checkout-tooltip-content__background-color); 117                 .lib-css(border-left-color, @checkout-tooltip-content__background-color);
116                 width: 1px; 118                 width: 1px;
117                 z-index: 4; 119                 z-index: 4;
118             } 120             }
119         } 121         }
120     } 122     }
121 } 123 }
122  124 
123 // 125 //
124 //  Mobile 126 //  Mobile
125 //  _____________________________________________ 127 //  _____________________________________________
126  128 
127 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) { 129 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
128     .modal-popup { 130     .modal-popup {
129         .field-tooltip { 131         .field-tooltip {
130             .field-tooltip-content { 132             .field-tooltip-content {
131                 .lib-css(width, @checkout-tooltip-content-mobile-popup__width); 133                 .lib-css(width, @checkout-tooltip-content-mobile-popup__width);
132             } 134             }
133         } 135         }
134     } 136     }
135 } 137 }
136  138 
137 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { 139 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
138     .field-tooltip { 140     .field-tooltip {
139         .field-tooltip-content { 141         .field-tooltip-content {
140             &:extend(.abs-checkout-tooltip-content-position-top-mobile all); 142             &:extend(.abs-checkout-tooltip-content-position-top-mobile all);
141         } 143         }
142     } 144     }
143 } 145 }

Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.