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

QOLOE-209 CSS clean up #287

Merged
merged 4 commits into from
Jun 23, 2024
Merged

QOLOE-209 CSS clean up #287

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f8f9a13
QOLOE-209 CSS clean up
SenChung Jun 21, 2024
ae4dae5
QOLOE-209 updated the way the breakpoints are added
SenChung Jun 21, 2024
d5da33c
Merge branch 'develop' into QOLOE-209-quick-exit-qa-update
SenChung Jun 21, 2024
10868b3
Merge branch 'develop' into QOLOE-209-quick-exit-qa-update
SenChung Jun 23, 2024
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
118 changes: 51 additions & 67 deletions src/components/bs5/quickexit/quickexit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
--#{$prefix}quick-exit-gaps: 25px;
--#{$prefix}quick-exit-text-outline: 2px;
--#{$prefix}quick-exit-text-outline-offset: 2px;

--#{$prefix}tooltip-width: 190px;
--#{$prefix}tooltip-arrow: 8px;
--#{$prefix}tooltip-desktop-top-offset: 40px;
Expand All @@ -28,7 +27,6 @@
z-index: 200;

&-inner {
display: -ms-flexbox;
display: flex;
align-items: center;
height: 100%;
Expand Down Expand Up @@ -72,7 +70,6 @@
}
.qld-quick-exit-item.qld-tooltip-container {
text-decoration: underline;
margin-inline-end: var(--#{$prefix}quick-exit-gaps);
&:focus,
&:active,
&:focus-within {
Expand Down Expand Up @@ -106,6 +103,7 @@
height: 100%;
-ms-flex-pack: distribute;
justify-content: space-around;
gap: var(--#{$prefix}quick-exit-gaps);
}
.qld-quick-exit-actions {
-ms-flex-positive: 1;
Expand All @@ -124,24 +122,32 @@
background-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
}
}
.qld-quick-exit-tip-link {
a.qld-quick-exit-tip-link {
color: var(--#{$prefix}quick-exit-link-text-colour);
&:visited {
text-decoration-color: var(--#{$prefix}quick-exit-text-colour);
}
&:hover,
&:focus {
text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
}
}
.qg-quick-exit__tips {
flex-grow: 1;
}
&.has-icon-info .qg-quick-exit__tips {
position: relative;
display: block;
padding-inline-start: var(--#{$prefix}icon-info-spacing);
}
}
}

/*
* Desktop layout
*/
@media screen and (min-width: 992px) {
.qld-quick-exit {
.icon-info {
position: absolute;
inset-inline-start: 0;
background-repeat: no-repeat;
margin-block-start: 4px;
background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
}
@media screen and (min-width: 992px) {
SenChung marked this conversation as resolved.
Show resolved Hide resolved
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
Expand All @@ -152,18 +158,15 @@
z-index: 999;
padding-block: 20px;
padding-inline: 40px;

.container {
padding-inline: calc(var(--#{$prefix}gutter-x) * 0.5);
}

&-inner {
justify-content: space-between;

.qld-quick-exit-tip-link {
-ms-flex-align: center;
align-items: center;
color: $qld-white;
color: var(--#{$prefix}quick-exit-text-colour);
display: -ms-flexbox;
display: flex;
}
Expand Down Expand Up @@ -197,66 +200,47 @@
}
}
}
}
.icon-info {
position: absolute;
inset-inline-start: calc(var(--#{$prefix}quick-exit-spacing) * 2.5);
background-repeat: no-repeat;
margin-block-start: 4px;
background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
}
.qld-quick-exit-inner.has-tooltip {
.qg-quick-exit__tips {
padding-inline-start: 0;
}
@media screen and (max-width: 925px) {
.not-mobile {
display: none;
.qld-quick-exit-inner.has-tooltip {
.qg-quick-exit__tips {
padding-inline-start: 0;
}
@media screen and (max-width: 925px) {
SenChung marked this conversation as resolved.
Show resolved Hide resolved
.not-mobile {
display: none;
}
}
@media screen and (max-width: 420px) {
.very-small-mobile {
display: none;
}
}
}
@media screen and (max-width: 420px) {
.very-small-mobile {
display: none;
.qld-quick-exit-inner.has-icon-info {
.qg-quick-exit__tips {
padding-inline-start: calc(var(--#{$prefix}icon-info-spacing) * 1);
}
}
}
.qld-quick-exit-inner.has-icon-info {
.qg-quick-exit__tips {
padding-inline-start: var(--#{$prefix}icon-info-spacing);
.qld-quick-exit-inner.has-icon-info.has-tooltip {
@media screen and (max-width: 925px) {
.not-mobile {
display: none;
}
}
}
}
.qld-quick-exit-inner.has-icon-info.has-tooltip {
@media screen and (max-width: 1020px) {
.icon-info {
@media screen and (max-width: 850px) {
.not-mobile,
.qld-quick-exit-tip-link {
display: none;
}
.qg-quick-exit__tips {
padding-inline-start: 0;
.icon-info {
margin-block-start: 0;
}
}
@media screen and (max-width: 925px) {
.not-mobile {
display: none;
////////////////////////////////////////////////////////////////////////////////////
/// This is only for Responsive Design and keeping important info available to view
@media screen and (max-width: 365px) {
.qld-quick-exit-button {
padding-inline: 10px;
}
}
// @media screen and (max-width: 520px) {
// .very-small-mobile {
// display: none;
// }
// }
}

@media screen and (max-width: 850px) {
.not-mobile,
.qld-quick-exit-tip-link {
display: none;
}
}

////////////////////////////////////////////////////////////////////////////////////
/// This is only for Responsive Design and keeping important info available to view
@media screen and (max-width: 365px) {
.qld-quick-exit-button {
padding-inline: 10px; //
}
}
Loading