general-library-union 2.9.73 → 2.9.74

package/src/assets/layout/styles/layout/_menuprofile.scss

@@ -1,76 +1,76 @@
-.layout-container {
-    &.layout-menu-profile-active {
-        .layout-menu-profile-toggler {
-            transform: rotate(-180deg);
-        }
-    }
-
-    &.layout-menu-profile-end {
-        .layout-menu-profile {
-            border-top: 1px solid var(--inline-menu-border-color);
-        }
-    }
-
-    &.layout-menu-profile-start {        
-        .layout-menu-profile {
-            border-bottom: 1px solid var(--inline-menu-border-color);
-        }
-    }
-}
-
-.layout-menu-profile {
-    width: 100%;
-    background: var(--menu-bg);
-    overflow: hidden;
-
-    > button {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        padding: 0.75rem 1.5rem;
-        color: var(--menuitem-text-color);
-        transition: background-color var(--transition-duration);
-
-        > span {
-            display: flex;
-            flex-direction: column;
-            margin-left: .5rem;
-        }
-
-        > i {
-            margin-left: auto;
-            transition: transform var(--transition-duration);
-            color: var(--color-400);
-        }
-
-        &:hover {
-            background-color: var(--menuitem-hover-bg);
-        }
-    }
-
-    > ul {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-
-        > li {
-            > button {
-                width: 100%;
-                display: flex;
-                align-items: center;
-                padding: 0.75rem 1.5rem;
-                transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
-                color: var(--menuitem-text-color);
-
-                > i {
-                    margin-right: .5rem;
-                    color: var(--menuitem-text-color);
-                }
-
-                &:hover {
-                    background-color: var(--menuitem-hover-bg);
-                }
-            }
-        }
-    }
+.layout-container {
+    &.layout-menu-profile-active {
+        .layout-menu-profile-toggler {
+            transform: rotate(-180deg);
+        }
+    }
+
+    &.layout-menu-profile-end {
+        .layout-menu-profile {
+            border-top: 1px solid var(--inline-menu-border-color);
+        }
+    }
+
+    &.layout-menu-profile-start {        
+        .layout-menu-profile {
+            border-bottom: 1px solid var(--inline-menu-border-color);
+        }
+    }
+}
+
+.layout-menu-profile {
+    width: 100%;
+    background: var(--menu-bg);
+    overflow: hidden;
+
+    > button {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        padding: 0.75rem 1.5rem;
+        color: var(--menuitem-text-color);
+        transition: background-color var(--transition-duration);
+
+        > span {
+            display: flex;
+            flex-direction: column;
+            margin-left: .5rem;
+        }
+
+        > i {
+            margin-left: auto;
+            transition: transform var(--transition-duration);
+            color: var(--color-400);
+        }
+
+        &:hover {
+            background-color: var(--menuitem-hover-bg);
+        }
+    }
+
+    > ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+
+        > li {
+            > button {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                padding: 0.75rem 1.5rem;
+                transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
+                color: var(--menuitem-text-color);
+
+                > i {
+                    margin-right: .5rem;
+                    color: var(--menuitem-text-color);
+                }
+
+                &:hover {
+                    background-color: var(--menuitem-hover-bg);
+                }
+            }
+        }
+    }
 }

package/src/assets/layout/styles/layout/_responsive.scss

@@ -1,244 +1,244 @@
-@media screen and (min-width: $breakpoint) {
-    .layout-container {
-        &.layout-static {
-            .layout-sidebar {
-                transition: transform .3s cubic-bezier(0, 0, 0.2, 1);
-            }
-            
-            .layout-content-wrapper {
-                margin-left: 17rem;
-                transition: margin-left .3s cubic-bezier(0, 0, 0.2, 1);
-            }
-
-            .layout-topbar {
-                .layout-menu-button {
-                    i {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-        }
-
-        &.layout-static-inactive {
-            .layout-sidebar {
-                transform: translateX(-100%);
-            }
-
-            .layout-content-wrapper {
-                margin-left: 0;
-            }
-
-            .layout-topbar {
-                .layout-menu-button {
-                    i {
-                        transform: rotate(0deg);
-                    }
-                }
-            }
-        }
-
-        &.layout-overlay {
-            .layout-content-wrapper {
-                margin-left: 0;
-            }
-
-            .layout-sidebar {
-                z-index: 999;
-                transform: translateX(-100%);
-                transition: transform .3s cubic-bezier(0, 0, 0.2, 1);
-            }
-
-            &.layout-overlay-active {
-                .layout-sidebar {
-                    transform: translateX(0);
-                }
-
-                .layout-topbar {
-                    .layout-menu-button {
-                        i {
-                            transform: rotate(180deg);
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    ul.layout-topbar-items {
-        color: var(--color-400) !important;
-    }
-
-    .eleccion-modo{
-        color: #fff;
-    }
-
-
-        
-
-}
-
-@media screen and (max-width: ($breakpoint - 1)) {
-    .blocked-scroll {
-        overflow: hidden;
-    }
-
-    .layout-container {
-        .layout-content-wrapper {
-            margin-left: 0;
-        }
-    
-        .layout-sidebar {
-            z-index: 999;
-            transform: translateX(-100%);
-            transition: transform .3s cubic-bezier(0, 0, 0.2, 1);
-        }
-
-        &.layout-mobile-active {
-            .layout-sidebar {
-                transform: translateX(0);
-            }
-
-            .layout-mask {
-                display: block;
-                animation: px-mask-in .3s cubic-bezier(0, 0, 0.2, 1);
-            }
-
-            .layout-topbar {
-                .layout-menu-button {
-                    i {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-        }
-
-        .layout-mask {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 998;
-            width: 100%;
-            height: 100%;
-            background-color: var(--maskbg);
-        }
-
-        &.layout-topbar-menu-active {
-            .layout-topbar {
-                .layout-topbar-end {
-                    display: flex;
-                    flex-direction: column-reverse;
-                    align-items: stretch;
-                    position: fixed;
-                    top: 4rem;
-                    width: 100%;
-                    background-color: var(--color-75);
-                    padding-left: 0;
-                    box-shadow: 8px 0px 5px 1px var(--color-200);
-
-                    .layout-megamenu {   
-                        height: 3rem;
-
-                        &.p-megamenu .p-megamenu-root-list > .p-menuitem {
-                            position: static;
-
-                            .p-megamenu-panel {
-                                position: absolute;
-                                left: 1rem;
-                                right: 1rem;
-                                max-height: 20rem;
-                                overflow: auto;
-                            }
-
-                            .p-megamenu-grid {
-                                flex-direction: column;
-                            }
-                        }
-                    }
-
-                    .layout-topbar-items {
-                        justify-content: space-between;
-                        align-items: center;
-                        height: 3rem;
-                        padding: 0 1rem;
-                        color: var(--color-400);
-
-                        > li {
-                            position: static;
-
-                            a{
-                                color: var(--color-400);
-                            }
-
-                            > div {
-                                left: 1rem;
-                                right: 1rem;
-                            }
-                        }
-                    }
-                }
-
-                .eleccion-modo{
-                    background: #ffffff;
-                    padding: 5px 10px;
-                    border-radius: 5px;
-                    color: var(--color-400);
-                    box-shadow: 2px 2px 4px var(--color-100);
-                }
-
-                .layout-topbar-actions-start {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    height: 3rem;
-                    color: var(--color-400);
-                }
-            }
-        }
-    }
-
-    .layout-topbar {
-        display: flex;
-        flex-direction: column;
-
-        .layout-topbar-start {
-            padding: 0 1rem;
-            width: 100%;
-            height: 4rem;
-            justify-content: start;
-
-            .layout-menu-button {
-                position: relative;
-                margin-top: 0;
-                margin-left: 1rem;
-                top: auto;
-            }
-
-            .layout-topbar-mobile-button {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin-left: auto;
-                transition: background-color var(--transition-duration);
-                color: #fff;
-
-                &:hover {
-                    background-color: #39373f;
-                }
-            }
-        }
-
-        .layout-topbar-end {
-            display: none;
-        }
-    }
-}
-
-@media screen and (min-width: 1729px) {
-    .layout-content {
-        width: 1474px;
-        // width: 1504px;
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
+@media screen and (min-width: $breakpoint) {
+    .layout-container {
+        &.layout-static {
+            .layout-sidebar {
+                transition: transform .3s cubic-bezier(0, 0, 0.2, 1);
+            }
+            
+            .layout-content-wrapper {
+                margin-left: 17rem;
+                transition: margin-left .3s cubic-bezier(0, 0, 0.2, 1);
+            }
+
+            .layout-topbar {
+                .layout-menu-button {
+                    i {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+
+        &.layout-static-inactive {
+            .layout-sidebar {
+                transform: translateX(-100%);
+            }
+
+            .layout-content-wrapper {
+                margin-left: 0;
+            }
+
+            .layout-topbar {
+                .layout-menu-button {
+                    i {
+                        transform: rotate(0deg);
+                    }
+                }
+            }
+        }
+
+        &.layout-overlay {
+            .layout-content-wrapper {
+                margin-left: 0;
+            }
+
+            .layout-sidebar {
+                z-index: 999;
+                transform: translateX(-100%);
+                transition: transform .3s cubic-bezier(0, 0, 0.2, 1);
+            }
+
+            &.layout-overlay-active {
+                .layout-sidebar {
+                    transform: translateX(0);
+                }
+
+                .layout-topbar {
+                    .layout-menu-button {
+                        i {
+                            transform: rotate(180deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    ul.layout-topbar-items {
+        color: var(--color-400) !important;
+    }
+
+    .eleccion-modo{
+        color: #fff;
+    }
+
+
+        
+
+}
+
+@media screen and (max-width: ($breakpoint - 1)) {
+    .blocked-scroll {
+        overflow: hidden;
+    }
+
+    .layout-container {
+        .layout-content-wrapper {
+            margin-left: 0;
+        }
+    
+        .layout-sidebar {
+            z-index: 999;
+            transform: translateX(-100%);
+            transition: transform .3s cubic-bezier(0, 0, 0.2, 1);
+        }
+
+        &.layout-mobile-active {
+            .layout-sidebar {
+                transform: translateX(0);
+            }
+
+            .layout-mask {
+                display: block;
+                animation: px-mask-in .3s cubic-bezier(0, 0, 0.2, 1);
+            }
+
+            .layout-topbar {
+                .layout-menu-button {
+                    i {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+
+        .layout-mask {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 998;
+            width: 100%;
+            height: 100%;
+            background-color: var(--maskbg);
+        }
+
+        &.layout-topbar-menu-active {
+            .layout-topbar {
+                .layout-topbar-end {
+                    display: flex;
+                    flex-direction: column-reverse;
+                    align-items: stretch;
+                    position: fixed;
+                    top: 4rem;
+                    width: 100%;
+                    background-color: var(--color-75);
+                    padding-left: 0;
+                    box-shadow: 8px 0px 5px 1px var(--color-200);
+
+                    .layout-megamenu {   
+                        height: 3rem;
+
+                        &.p-megamenu .p-megamenu-root-list > .p-menuitem {
+                            position: static;
+
+                            .p-megamenu-panel {
+                                position: absolute;
+                                left: 1rem;
+                                right: 1rem;
+                                max-height: 20rem;
+                                overflow: auto;
+                            }
+
+                            .p-megamenu-grid {
+                                flex-direction: column;
+                            }
+                        }
+                    }
+
+                    .layout-topbar-items {
+                        justify-content: space-between;
+                        align-items: center;
+                        height: 3rem;
+                        padding: 0 1rem;
+                        color: var(--color-400);
+
+                        > li {
+                            position: static;
+
+                            a{
+                                color: var(--color-400);
+                            }
+
+                            > div {
+                                left: 1rem;
+                                right: 1rem;
+                            }
+                        }
+                    }
+                }
+
+                .eleccion-modo{
+                    background: #ffffff;
+                    padding: 5px 10px;
+                    border-radius: 5px;
+                    color: var(--color-400);
+                    box-shadow: 2px 2px 4px var(--color-100);
+                }
+
+                .layout-topbar-actions-start {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    height: 3rem;
+                    color: var(--color-400);
+                }
+            }
+        }
+    }
+
+    .layout-topbar {
+        display: flex;
+        flex-direction: column;
+
+        .layout-topbar-start {
+            padding: 0 1rem;
+            width: 100%;
+            height: 4rem;
+            justify-content: start;
+
+            .layout-menu-button {
+                position: relative;
+                margin-top: 0;
+                margin-left: 1rem;
+                top: auto;
+            }
+
+            .layout-topbar-mobile-button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-left: auto;
+                transition: background-color var(--transition-duration);
+                color: #fff;
+
+                &:hover {
+                    background-color: #39373f;
+                }
+            }
+        }
+
+        .layout-topbar-end {
+            display: none;
+        }
+    }
+}
+
+@media screen and (min-width: 1729px) {
+    .layout-content {
+        width: 1474px;
+        // width: 1504px;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
 }