chore: copia de libs/shared con prefijo Pi y APIs de terceros actualizadas
This commit is contained in:
499
libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss
Normal file
499
libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss
Normal file
@@ -0,0 +1,499 @@
|
||||
@keyframes pulse {
|
||||
to {
|
||||
box-shadow: 0 0 0 var(--pi-spacing-xxx-small) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0%;
|
||||
}
|
||||
25% {
|
||||
background-position: 25%;
|
||||
}
|
||||
50% {
|
||||
background-position: 50%;
|
||||
}
|
||||
75% {
|
||||
background-position: 75%;
|
||||
}
|
||||
100% {
|
||||
background-position: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin topbarParentMenuItemLargeDevice {
|
||||
border: 0.0625rem solid;
|
||||
border-radius: var(--pi-border-radius-medium);
|
||||
transition: 0.4s all ease-in-out;
|
||||
animation: pulse 1.5s infinite 2s ease-in;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
animation: unset;
|
||||
&::before {
|
||||
height: 2.75rem;
|
||||
width: 6rem;
|
||||
margin-top: -0.125rem;
|
||||
margin-left: -0.125rem;
|
||||
opacity: 1;
|
||||
filter: blur(0.1rem);
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 0.75rem;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin-top: 1.1875rem;
|
||||
margin-left: 2.8125rem;
|
||||
}
|
||||
& > span {
|
||||
& > span {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2.25rem;
|
||||
width: 6rem;
|
||||
padding-bottom: 0.05rem;
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-background-clip: text;
|
||||
-moz-text-fill-color: transparent;
|
||||
transition: all 0.45s ease-Out;
|
||||
|
||||
font: {
|
||||
weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin largeDeviceChildMenu(
|
||||
$margin-left,
|
||||
$background-color,
|
||||
$grid-template-columns: repeat(2, 1fr)
|
||||
) {
|
||||
// Menu item
|
||||
.pi-menu__children {
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
margin-top: var(--pi-spacing-large);
|
||||
margin-left: $margin-left;
|
||||
border-radius: var(--pi-border-radius-large);
|
||||
background-color: var(--pi-color-white);
|
||||
box-shadow: var(--pi-box-shadow-double);
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-columns: $grid-template-columns;
|
||||
gap: var(--pi-spacing-medium);
|
||||
}
|
||||
|
||||
& > aside {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
// Submenu entry
|
||||
.pi-list-item {
|
||||
min-width: 15.625rem;
|
||||
&:not(:hover) {
|
||||
.pi-list-item-content {
|
||||
&.pi-list-item-content__left {
|
||||
& > span {
|
||||
//
|
||||
&:nth-child(1) {
|
||||
color: var(--pi-color-black);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin largeDeviceChildMenuItemColor($background-color) {
|
||||
// Submenu entry
|
||||
.pi-list-item {
|
||||
&:hover {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Small device
|
||||
@mixin smallDevieMenuSize($topbar-center-content-height: calc(100vh - 10rem)) {
|
||||
.pi-website-topbar-content {
|
||||
// Center
|
||||
&.pi-website-topbar-content__center {
|
||||
height: $topbar-center-content-height;
|
||||
min-height: $topbar-center-content-height;
|
||||
overflow: auto;
|
||||
|
||||
// Generic Scroll
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: var(--pi-border-radius-small);
|
||||
background-color: var(--pi-color-grey-75);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--pi-color-grey-100);
|
||||
transition: var(--pi-animation);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin smallDeviceMenuColor($border-color, $color) {
|
||||
& > span {
|
||||
border-color: $border-color;
|
||||
& > span {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-website-footer-content {
|
||||
&.pi-website-footer-content__top-right {
|
||||
.pi-menu-event-item {
|
||||
&:nth-child(2) {
|
||||
.pi-menu__children {
|
||||
.pi-text {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
.pi-menu__children {
|
||||
.pi-text {
|
||||
color: var(--pi-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
.pi-menu__children {
|
||||
.pi-text {
|
||||
color: var(--pi-color-highlighted);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
@include smallDevieMenuSize;
|
||||
}
|
||||
// Mobile & Tablet
|
||||
&:not(.is-desktop) {
|
||||
// Small device
|
||||
@media screen and (max-width: 62rem) {
|
||||
.pi-website-topbar-content {
|
||||
// Center
|
||||
&.pi-website-topbar-content__center {
|
||||
.pi-menu {
|
||||
// Parent
|
||||
&.pi-menu__parent {
|
||||
& > nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--pi-spacing-xx-large);
|
||||
padding-bottom: var(--pi-spacing-xx-large);
|
||||
.pi-menu-event-item {
|
||||
&.has-children {
|
||||
& > span {
|
||||
display: flex;
|
||||
width: -webkit-fill-available;
|
||||
border-bottom: 1px solid;
|
||||
padding-bottom: var(--pi-spacing-xxx-small);
|
||||
|
||||
& > span {
|
||||
padding-left: var(--pi-spacing-xx-small);
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Company
|
||||
&:nth-child(1) {
|
||||
@include smallDeviceMenuColor(
|
||||
var(--pi-color-primary-100),
|
||||
var(--pi-color-primary)
|
||||
);
|
||||
}
|
||||
// Investor
|
||||
&:nth-child(2) {
|
||||
@include smallDeviceMenuColor(
|
||||
var(--pi-color-accent-100),
|
||||
var(--pi-color-accent)
|
||||
);
|
||||
}
|
||||
// Advisor
|
||||
&:nth-child(3) {
|
||||
@include smallDeviceMenuColor(
|
||||
var(--pi-color-highlighted-100),
|
||||
var(--pi-color-highlighted)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Children
|
||||
&.pi-menu__children {
|
||||
.pi-list-item {
|
||||
padding-top: var(--pi-spacing-small);
|
||||
padding-bottom: var(--pi-spacing-small);
|
||||
&:nth-child(n + 2) {
|
||||
padding-left: var(--pi-spacing-x-large);
|
||||
.pi-list-item-content {
|
||||
&.pi-list-item-content__left {
|
||||
& > span {
|
||||
&:nth-child(1) {
|
||||
color: var(--pi-color-grey);
|
||||
font: {
|
||||
weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-list-item-content {
|
||||
&.pi-list-item-content__left {
|
||||
& > span {
|
||||
&:nth-child(2) {
|
||||
color: var(--pi-color-grey-300);
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
&.is-tablet__small {
|
||||
@include smallDevieMenuSize(calc(100vh - 11.5rem));
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
// Large device
|
||||
@media screen and (min-width: 62rem) {
|
||||
.pi-shell__deale-website {
|
||||
// Topbar
|
||||
.pi-website-topbar {
|
||||
.pi-menu {
|
||||
.pi-menu-event-item {
|
||||
@include topbarParentMenuItemLargeDevice;
|
||||
}
|
||||
// Parent
|
||||
&.pi-menu__parent {
|
||||
& > nav {
|
||||
display: flex;
|
||||
gap: var(--pi-spacing-medium);
|
||||
}
|
||||
.pi-menu-event-item {
|
||||
&.has-children {
|
||||
&:not(.is-selected) {
|
||||
.pi-menu__children {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
&.is-selected {
|
||||
.pi-menu__children {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Child
|
||||
&.pi-menu__children {
|
||||
& > div,
|
||||
& > aside {
|
||||
// Menu items
|
||||
& > div {
|
||||
& > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Child menu
|
||||
& > div {
|
||||
padding: var(--pi-spacing-medium);
|
||||
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
|
||||
// Child Menu items
|
||||
& > div {
|
||||
& > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Aside menu
|
||||
& > aside {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100%;
|
||||
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large)
|
||||
var(--pi-spacing-medium);
|
||||
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
|
||||
// Aside Menu items
|
||||
& > div {
|
||||
& > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-website-topbar-content {
|
||||
// Center
|
||||
&.pi-website-topbar-content__center {
|
||||
.pi-menu {
|
||||
&.pi-menu__parent {
|
||||
& > nav {
|
||||
& > .pi-menu-event-item {
|
||||
// Company
|
||||
&:nth-child(1) {
|
||||
@include largeDeviceChildMenu(-18.75rem, var(--pi-color-primary-25));
|
||||
@include largeDeviceChildMenuItemColor(var(--pi-color-primary-25));
|
||||
}
|
||||
// Investor
|
||||
&:nth-child(2) {
|
||||
@include largeDeviceChildMenu(-14.125rem, var(--pi-color-accent-25));
|
||||
@include largeDeviceChildMenuItemColor(var(--pi-color-accent-25));
|
||||
}
|
||||
// Advisor
|
||||
&:nth-child(3) {
|
||||
@include largeDeviceChildMenu(-14.625rem, var(--pi-color-highlighted-25));
|
||||
@include largeDeviceChildMenuItemColor(var(--pi-color-highlighted-25));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Right
|
||||
&.pi-website-topbar-content__right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-medium);
|
||||
@include largeDeviceChildMenu(-100px, unset, 1fr);
|
||||
.pi-menu {
|
||||
&:not(.pi-menu__children) {
|
||||
& > nav {
|
||||
& > .pi-menu-event-item {
|
||||
@include topbarParentMenuItemLargeDevice;
|
||||
|
||||
// Prices
|
||||
&:nth-of-type(1) {
|
||||
.pi-menu__children {
|
||||
& > div {
|
||||
.pi-list-item {
|
||||
&:hover {
|
||||
// Company Pricing
|
||||
&:nth-child(1) {
|
||||
color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-primary-25);
|
||||
}
|
||||
// Investor Pricing
|
||||
&:nth-child(2) {
|
||||
color: var(--pi-color-accent);
|
||||
background-color: var(--pi-color-accent-25);
|
||||
}
|
||||
// Advisor Pricing
|
||||
&:nth-child(3) {
|
||||
color: var(--pi-color-highlighted);
|
||||
background-color: var(--pi-color-highlighted-25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Login
|
||||
.pi-button__type--menu-item {
|
||||
&.pi-button__action {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2.25rem;
|
||||
width: 7rem;
|
||||
border-radius: var(--pi-border-radius-medium);
|
||||
|
||||
@include topbarParentMenuItemLargeDevice;
|
||||
& > span {
|
||||
padding-bottom: 0.1875rem;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-background-clip: text;
|
||||
-moz-text-fill-color: transparent;
|
||||
|
||||
font: {
|
||||
weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
position: relative;
|
||||
transition: all 0.45s ease-Out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// LargeDevice
|
||||
&.is-desktop {
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user