Skip to content

Commit

Permalink
Merge branch 'main' into incremental-migration-vite
Browse files Browse the repository at this point in the history
  • Loading branch information
@guidari
guidari committed Jul 28, 2023
2 parents 43ec6c7 + 734a3be commit 978248c
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 39 deletions.
2 changes: 1 addition & 1 deletion packages/react/src/components/Popover/story.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
flex-direction: column;
}

.popover-tabtip-story .cds--popover-content {
.popover-tabtip-story .cds--popover-content.p-3 {
width: 16rem;
}

Expand Down
144 changes: 106 additions & 38 deletions packages/styles/scss/components/popover/_popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ $popover-caret-height: custom-property.get-var(
}

.#{$prefix}--popover--tab-tip
.#{$prefix}--popover
> .#{$prefix}--popover
.#{$prefix}--popover-caret {
display: none;
}
Expand All @@ -183,13 +183,17 @@ $popover-caret-height: custom-property.get-var(
//-----------------------------------------------------------------------------

// Popover content placement
.#{$prefix}--popover--bottom .#{$prefix}--popover-content {
.#{$prefix}--popover--bottom
> .#{$prefix}--popover
.#{$prefix}--popover-content {
bottom: 0;
left: 50%;
transform: translate(-50%, calc(100% + $popover-offset));
}

.#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
.#{$prefix}--popover--bottom-left
> .#{$prefix}--popover
.#{$prefix}--popover-content {
bottom: 0;
left: 0;
transform: translate(
Expand All @@ -198,16 +202,24 @@ $popover-caret-height: custom-property.get-var(
);
}

.#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
.#{$prefix}--popover--bottom-right
> .#{$prefix}--popover
.#{$prefix}--popover-content {
right: 0;
bottom: 0;
transform: translate($popover-offset, calc(100% + $popover-offset));
}

// Popover hover area placement
.#{$prefix}--popover--bottom .#{$prefix}--popover-content::before,
.#{$prefix}--popover--bottom-left .#{$prefix}--popover-content::before,
.#{$prefix}--popover--bottom-right .#{$prefix}--popover-content::before {
.#{$prefix}--popover--bottom
> .#{$prefix}--popover
.#{$prefix}--popover-content::before,
.#{$prefix}--popover--bottom-left
> .#{$prefix}--popover
.#{$prefix}--popover-content::before,
.#{$prefix}--popover--bottom-right
> .#{$prefix}--popover
.#{$prefix}--popover-content::before {
top: 0;
right: 0;
left: 0;
Expand All @@ -216,9 +228,15 @@ $popover-caret-height: custom-property.get-var(
}

// Caret placement
.#{$prefix}--popover--bottom .#{$prefix}--popover-caret,
.#{$prefix}--popover--bottom-left .#{$prefix}--popover-caret,
.#{$prefix}--popover--bottom-right .#{$prefix}--popover-caret {
.#{$prefix}--popover--bottom
> .#{$prefix}--popover
.#{$prefix}--popover-caret,
.#{$prefix}--popover--bottom-left
> .#{$prefix}--popover
.#{$prefix}--popover-caret,
.#{$prefix}--popover--bottom-right
> .#{$prefix}--popover
.#{$prefix}--popover-caret {
bottom: 0;
left: 50%;
width: $popover-caret-width;
Expand All @@ -232,13 +250,17 @@ $popover-caret-height: custom-property.get-var(
//-----------------------------------------------------------------------------

// Popover content placement
.#{$prefix}--popover--top .#{$prefix}--popover-content {
.#{$prefix}--popover--top
> .#{$prefix}--popover
.#{$prefix}--popover-content {
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - $popover-offset));
}

.#{$prefix}--popover--top-left .#{$prefix}--popover-content {
.#{$prefix}--popover--top-left
> .#{$prefix}--popover
.#{$prefix}--popover-content {
top: 0;
left: 0;
transform: translate(
Expand All @@ -247,16 +269,24 @@ $popover-caret-height: custom-property.get-var(
);
}

.#{$prefix}--popover--top-right .#{$prefix}--popover-content {
.#{$prefix}--popover--top-right
> .#{$prefix}--popover
.#{$prefix}--popover-content {
top: 0;
right: 0;
transform: translate($popover-offset, calc(-100% - $popover-offset));
}

// Popover hover area placement
.#{$prefix}--popover--top .#{$prefix}--popover-content::before,
.#{$prefix}--popover--top-left .#{$prefix}--popover-content::before,
.#{$prefix}--popover--top-right .#{$prefix}--popover-content::before {
.#{$prefix}--popover--top
> .#{$prefix}--popover
.#{$prefix}--popover-content::before,
.#{$prefix}--popover--top-left
> .#{$prefix}--popover
.#{$prefix}--popover-content::before,
.#{$prefix}--popover--top-right
> .#{$prefix}--popover
.#{$prefix}--popover-content::before {
right: 0;
bottom: 0;
left: 0;
Expand All @@ -265,9 +295,13 @@ $popover-caret-height: custom-property.get-var(
}

// Caret placement
.#{$prefix}--popover--top .#{$prefix}--popover-caret,
.#{$prefix}--popover--top-left .#{$prefix}--popover-caret,
.#{$prefix}--popover--top-right .#{$prefix}--popover-caret {
.#{$prefix}--popover--top > .#{$prefix}--popover .#{$prefix}--popover-caret,
.#{$prefix}--popover--top-left
> .#{$prefix}--popover
.#{$prefix}--popover-caret,
.#{$prefix}--popover--top-right
> .#{$prefix}--popover
.#{$prefix}--popover-caret {
top: 0;
left: 50%;
width: $popover-caret-width;
Expand All @@ -281,15 +315,19 @@ $popover-caret-height: custom-property.get-var(
//-----------------------------------------------------------------------------

// Popover content placement
.#{$prefix}--popover--right .#{$prefix}--popover-content {
.#{$prefix}--popover--right
> .#{$prefix}--popover
.#{$prefix}--popover-content {
top: 50%;
left: 100%;
// Add in 0.1px to prevent rounding errors where the content is
// moved farther than the caret
transform: translate($popover-offset, -50%);
}

.#{$prefix}--popover--right-top .#{$prefix}--popover-content {
.#{$prefix}--popover--right-top
> .#{$prefix}--popover
.#{$prefix}--popover-content {
top: 50%;
left: 100%;
transform: translate(
Expand All @@ -298,16 +336,24 @@ $popover-caret-height: custom-property.get-var(
);
}

.#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
.#{$prefix}--popover--right-bottom
> .#{$prefix}--popover
.#{$prefix}--popover-content {
bottom: 50%;
left: 100%;
transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
}

// Popover hover area placement
.#{$prefix}--popover--right .#{$prefix}--popover-content::before,
.#{$prefix}--popover--right-top .#{$prefix}--popover-content::before,
.#{$prefix}--popover--right-bottom .#{$prefix}--popover-content::before {
.#{$prefix}--popover--right
> .#{$prefix}--popover
.#{$prefix}--popover-content::before,
.#{$prefix}--popover--right-top
> .#{$prefix}--popover
.#{$prefix}--popover-content::before,
.#{$prefix}--popover--right-bottom
> .#{$prefix}--popover
.#{$prefix}--popover-content::before {
top: 0;
bottom: 0;
left: 0;
Expand All @@ -316,9 +362,13 @@ $popover-caret-height: custom-property.get-var(
}

// Caret placement
.#{$prefix}--popover--right .#{$prefix}--popover-caret,
.#{$prefix}--popover--right-top .#{$prefix}--popover-caret,
.#{$prefix}--popover--right-bottom .#{$prefix}--popover-caret {
.#{$prefix}--popover--right > .#{$prefix}--popover .#{$prefix}--popover-caret,
.#{$prefix}--popover--right-top
> .#{$prefix}--popover
.#{$prefix}--popover-caret,
.#{$prefix}--popover--right-bottom
> .#{$prefix}--popover
.#{$prefix}--popover-caret {
top: 50%;
left: 100%;
width: $popover-caret-height;
Expand All @@ -332,15 +382,19 @@ $popover-caret-height: custom-property.get-var(
//-----------------------------------------------------------------------------

// Popover content placement
.#{$prefix}--popover--left .#{$prefix}--popover-content {
.#{$prefix}--popover--left
> .#{$prefix}--popover
.#{$prefix}--popover-content {
top: 50%;
right: 100%;
// Add in 0.1px to prevent rounding errors where the content is
// moved farther than the caret
transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
}

.#{$prefix}--popover--left-top .#{$prefix}--popover-content {
.#{$prefix}--popover--left-top
> .#{$prefix}--popover
.#{$prefix}--popover-content {
top: -50%;
right: 100%;
// Add in 0.1px to prevent rounding errors where the content is
Expand All @@ -351,7 +405,9 @@ $popover-caret-height: custom-property.get-var(
);
}

.#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
.#{$prefix}--popover--left-bottom
> .#{$prefix}--popover
.#{$prefix}--popover-content {
right: 100%;
bottom: -50%;
// Add in 0.1px to prevent rounding errors where the content is
Expand All @@ -363,9 +419,15 @@ $popover-caret-height: custom-property.get-var(
}

// Popover hover area placement
.#{$prefix}--popover--left .#{$prefix}--popover-content::before,
.#{$prefix}--popover--left-top .#{$prefix}--popover-content::before,
.#{$prefix}--popover--left-bottom .#{$prefix}--popover-content::before {
.#{$prefix}--popover--left
> .#{$prefix}--popover
.#{$prefix}--popover-content::before,
.#{$prefix}--popover--left-top
> .#{$prefix}--popover
.#{$prefix}--popover-content::before,
.#{$prefix}--popover--left-bottom
> .#{$prefix}--popover
.#{$prefix}--popover-content::before {
top: 0;
right: 0;
bottom: 0;
Expand All @@ -374,9 +436,13 @@ $popover-caret-height: custom-property.get-var(
}

// Caret placement
.#{$prefix}--popover--left .#{$prefix}--popover-caret,
.#{$prefix}--popover--left-top .#{$prefix}--popover-caret,
.#{$prefix}--popover--left-bottom .#{$prefix}--popover-caret {
.#{$prefix}--popover--left > .#{$prefix}--popover .#{$prefix}--popover-caret,
.#{$prefix}--popover--left-top
> .#{$prefix}--popover
.#{$prefix}--popover-caret,
.#{$prefix}--popover--left-bottom
> .#{$prefix}--popover
.#{$prefix}--popover-caret {
top: 50%;
right: 100%;
width: $popover-caret-height;
Expand All @@ -388,7 +454,9 @@ $popover-caret-height: custom-property.get-var(
//-----------------------------------------------------------------------------
// Tab Tip Variant
//-----------------------------------------------------------------------------
.#{$prefix}--popover--tab-tip .#{$prefix}--popover-content {
.#{$prefix}--popover--tab-tip
> .#{$prefix}--popover
.#{$prefix}--popover-content {
border-radius: 0;
}

Expand Down

0 comments on commit 978248c

Please sign in to comment.