Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(styles): adjust main.css to fix 'SIGN IN' visibility on 13-inch screens #19551

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

fix(styles): adjust main.css to fix 'SIGN IN' visibility on 13-inch screens #19551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9f22911
fix(styles): adjust `main.css` to fix 'SIGN IN' visibility on 13-inch…
mpinia76 Feb 18, 2025
56ff9b9
fix(styles): adjust `*.scss` to fix 'SIGN IN' visibility on 13-inch s…
marcoscodnet Feb 19, 2025
67013c9
fix: resolve design issue in horizontal and hamburger menu
marcoscodnet Feb 20, 2025
a573303
fix: resolve design issue in horizontal and hamburger menu
marcoscodnet Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 126 additions & 26 deletions doc/templates/uno/component/navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
border-bottom: 1px solid #f4f2f3;
justify-content: space-between;


&::after,
&::before {
content: none;
Expand All @@ -48,7 +47,6 @@

@media (max-width: 1023px) {
width: 100%;
// 70vh is a magic value found by trial and error.
max-height: 70vh;
overflow-y: auto;
}
Expand All @@ -58,13 +56,11 @@
}
}


#header-logo-container {
width: 36px;
vertical-align: middle;
z-index: 9;


img {
width: 100%;
}
Expand Down Expand Up @@ -116,16 +112,33 @@
}

@include media-breakpoint-up(lg) {
font-size: 19px;
line-height: 17px;
font-size: 18px;
/*line-height: 17px;*/
}
}

// Media queries for font size and padding adjustments
Copy link
Contributor

@agneszitte agneszitte Feb 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marcoscodnet Could we align the banner buttons with the Uno Platform website for consistency? This includes matching the style, font, and size adjustments based on the same breakpoints (as right now it is really different).
(As we can switch from one site to another and it should match the same visually if possible)

Uno.Platform.Banner.mp4

@media (min-width: 1024px) {
font-size: 14px;
/*line-height: 17px;*/
padding: .2rem !important;
}

@media (min-width: 1280px) {
font-size: 16px;
/*line-height: 17px;*/
padding: .2rem !important;
}

@media (min-width: 1366px) {
font-size: 18px;
/*line-height: 17px;*/
padding: .2rem !important;
}
}
/**
* Top level menu items
*/
& > ul > li {

@include media-breakpoint-up(lg) {
margin: 0 4px;
align-self: center;
Expand All @@ -135,16 +148,13 @@
@include media-breakpoint-up(navbar) {
margin: 0 16px;
}

/**
* menu-item-has-children means there is a submenu
*/
&.menu-item-has-children {
// actual submenu
position: relative;

& > a {

&::after {
display: inline-block;
text-rendering: auto;
Expand Down Expand Up @@ -216,7 +226,6 @@
padding-bottom: 14px;
width:100%
}

}

a {
Expand All @@ -242,7 +251,6 @@
}
}

// sub-menu columns
ul {
@extend .visibility-opacity-transition;
display: flex;
Expand All @@ -256,7 +264,6 @@
}
}

// shows the submenu
&:hover > ul {
visibility: visible;
opacity: 1;
Expand Down Expand Up @@ -284,7 +291,6 @@
&.row-menu > ul {
flex-direction: row;
}

}
}

Expand All @@ -295,9 +301,10 @@
border-radius: 8px;

margin-left: 0;
padding: 8px 32px;
/*padding: 8px 32px;*/
padding: 1.2rem 2.4rem !important;

font-size: 16px;
/*font-size: 16px;*/
line-height: 24px;
font-weight: 700;
min-width: 125px;
Expand All @@ -315,13 +322,57 @@
color: $white;
background-position: bottom left;
}

@media (min-width: 1024px) {
font-size: 14px;

}

@media (min-width: 1280px) {
font-size: 16px;

}

@media (min-width: 1366px) {
font-size: 18px;

}

}
}

.custom-login-item {
a {
border: 2px solid rgba(21, 155, 255, 1);
margin-left: 20px !important;
width: 90% !important;
text-transform: none !important;
color: rgba(21, 155, 255, 1) !important;
border-radius: 13px;
padding: 1.2rem 1.6rem !important;


@media (min-width: 1024px) {
font-size: 14px;

}

@media (min-width: 1280px) {
font-size: 16px;

}

@media (min-width: 1366px) {
font-size: 18px;

}

}
}
}

#navbar {
@media (max-width: 1023px) {

overflow: auto !important;

position: fixed;
Expand All @@ -344,7 +395,6 @@
display: none !important;
}


&.collapse.in {
display: block !important;
height: 100vh !important;
Expand All @@ -360,21 +410,64 @@
display: block;
padding: 0;

&.get-started-btn {
position: absolute;
padding: 0 16px;
bottom: 10%;
&.get-started-btn,
&.custom-login-item {
display: flex;
/*justify-content: center;
align-items: center;*/
width: 100%;
margin-bottom: 10px;
}

&.get-started-btn {
padding: 0 2rem;
}

&.custom-login-item {
padding: 0;
}

&.get-started-btn a,
&.custom-login-item a {
font-size: 20px !important;

padding: 12px 25px !important;
/*text-align: center !important;*/
line-height: 30px !important;
border-radius: 10px !important;
}
&.custom-login-item a {

font-weight: 600;
width: 95% !important;

}
&.get-started-btn a {

font-weight: 700;
width: 100% !important;
text-align: left;

}

&.custom-login-item a {
border: 2px solid rgba(21, 155, 255, 1);
color: rgba(21, 155, 255, 1) !important;
background: transparent !important;
}

/*&.get-started-btn a {
background: $turquoise;
color: $black !important;
}*/

&.menu-item-has-children {
position: relative;

ul {
position: relative;
max-height: 0;
padding: 0;

overflow: hidden;
transition: all .5s ease;
}
Expand All @@ -399,6 +492,13 @@
position: fixed;
top: 67px;
width: 100%;
z-index: 999;
background-color: #f8f8f8;
left: 0;
z-index: 9;

background: $lightblue;
padding: 10px 0;

@include media-breakpoint-up(lg) {
display: none;
}
}
Loading
Loading