294. Araxis Merge File Comparison Report

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

294.1 Files compared

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

294.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged3278
Changed12
Inserted13
Removed00

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

294.4 Active regular expressions

No regular expressions were active.

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

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