1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 11:28:51 +01:00
metamask-extension/ui/components/multichain/product-tour-popover/product-tour-popover.scss
Nidhi Kumari 0efd00b755
UX Multichain: Added product tour component (#18571)
* adding product tour component

* updated control for prevIcon

* updated app-header and product tour

* updated css

* updated message strings

* updated tests

* removed console statement

* added selector for product tour

* updated test

* updated test

* updated state with steps

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/product-tour-popover/product-tour-popover.scss

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* fixed lint errors

* updated lint error

* added changes for rtl support

* added changes for rtl support

* fixed lint errors

* Some suggestions (#18676)

* updated messages and indentation

* fixed popup close on my final step

* updated rtl classname condition

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-04-21 20:58:18 +05:30

58 lines
993 B
SCSS

.multichain-product-tour-menu {
width: 344px;
box-shadow: none;
left: -7px !important;
top: 10px !important; //important is required here since Menu has absolute position added via inline style in base component.
&--rtl {
left: 6px !important;
right: 6px !important;
}
&__arrow,
&__arrow::before {
position: absolute;
width: 12px;
height: 12px;
background: inherit;
}
&__arrow {
width: 40px;
height: 40px;
visibility: hidden;
top: 0;
}
&__arrow::before {
display: block;
background-color: inherit;
visibility: visible;
content: '';
transform: rotate(45deg);
border-radius: 2px 0 0 0;
top: -7px;
}
&__header {
position: relative;
}
&__previous-icon {
position: absolute;
left: 0;
top: 0;
}
&__button {
&:hover {
color: var(--color-primary-default);
}
&:active {
opacity: 0.5;
background-color: var(--color-primary-inverse);
}
}
}