Skip to content

Commit

Permalink
feat: make Coach Mark support RTL
Browse files Browse the repository at this point in the history
  • Loading branch information
@lazd
lazd committed Feb 14, 2020
1 parent cf2f540 commit f4c9c59
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 25 deletions.
47 changes: 24 additions & 23 deletions components/coachmark/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ governing permissions and limitations under the License.
.spectrum-CoachMarkPopover {
position: relative;

min-width: var(--spectrum-coachmark-min-width);
max-width: var(--spectrum-coachmark-max-width);
min-inline-size: var(--spectrum-coachmark-min-width);
max-inline-size: var(--spectrum-coachmark-max-width);

border-radius: var(--spectrum-coachmark-border-radius);
border-width: var(--spectrum-coachmark-border-size);
Expand All @@ -27,35 +27,36 @@ governing permissions and limitations under the License.
.spectrum-CoachMarkPopover-image {
border-radius: var(--spectrum-coachmark-border-radius) var(--spectrum-coachmark-border-radius) 0 0;

width: 100%;
inline-size: 100%;
}

.spectrum-CoachMarkPopover-header,
.spectrum-CoachMarkPopover-content,
.spectrum-CoachMarkPopover-footer {
padding: 0 var(--spectrum-coachmark-padding-x);
padding-block: 0;
padding-inline: var(--spectrum-coachmark-padding-x);
}

.spectrum-CoachMarkPopover-header {
padding-top: var(--spectrum-coachmark-padding-y);
padding-block-start: var(--spectrum-coachmark-padding-y);
}

.spectrum-CoachMarkPopover-footer {
padding-bottom: var(--spectrum-coachmark-padding-y);
padding-block-end: var(--spectrum-coachmark-padding-y);
}

.spectrum-CoachMarkPopover-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--spectrum-coachmark-title-margin-bottom);
margin-block-end: var(--spectrum-coachmark-title-margin-bottom);
}

.spectrum-CoachMarkPopover-title {
font-size: var(--spectrum-coachmark-title-text-size);
font-weight: var(--spectrum-coachmark-title-text-font-weight);
line-height: var(--spectrum-coachmark-title-text-line-height);
margin-bottom: 0;
margin-block-end: 0;
}

.spectrum-CoachMarkPopover-step {
Expand All @@ -68,12 +69,12 @@ governing permissions and limitations under the License.
}

.spectrum-CoachMarkPopover-content {
margin-bottom: var(--spectrum-coachmark-content-margin-bottom);
margin-block-end: var(--spectrum-coachmark-content-margin-bottom);
}

.spectrum-CoachMarkPopover-footer {
margin-top: 0;
text-align: right;
margin-block-start: 0;
text-align: end;
}

.spectrum-CoachMarkIndicator {
Expand All @@ -100,16 +101,16 @@ governing permissions and limitations under the License.
}

.spectrum-CoachMarkIndicator {
min-width: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3);
min-height: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3);
min-inline-size: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3);
min-block-size: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 3);
}

.spectrum-CoachMarkIndicator-ring {
top: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75);
left: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75);
inset-block-start: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75);
inset-inline-start: calc(var(--spectrum-coachmark-indicator-ring-diameter) * 0.75);

width: var(--spectrum-coachmark-indicator-ring-diameter);
height: var(--spectrum-coachmark-indicator-ring-diameter);
inline-size: var(--spectrum-coachmark-indicator-ring-diameter);
block-size: var(--spectrum-coachmark-indicator-ring-diameter);
animation: pulse var(--spectrum-coachmark-animation-indicator-ring-duration) linear infinite;

&:nth-child(1) {
Expand All @@ -118,15 +119,15 @@ governing permissions and limitations under the License.
}

.spectrum-CoachMarkIndicator--quiet {
min-width: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75);
min-height: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75);
min-inline-size: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75);
min-block-size: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 2.75);

.spectrum-CoachMarkIndicator-ring {
top: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75);
left: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75);
inset-block-start: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75);
inset-inline-start: calc(var(--spectrum-coachmark-quiet-indicator-ring-diameter) * 0.75);

width: var(--spectrum-coachmark-quiet-indicator-ring-diameter);
height: var(--spectrum-coachmark-quiet-indicator-ring-diameter);
inline-size: var(--spectrum-coachmark-quiet-indicator-ring-diameter);
block-size: var(--spectrum-coachmark-quiet-indicator-ring-diameter);
animation: pulse--quiet var(--spectrum-coachmark-animation-indicator-ring-duration) linear infinite;

&:nth-child(1) {
Expand Down
4 changes: 2 additions & 2 deletions components/coachmark/metadata/coachmark.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ examples:
<div class="spectrum-CoachMarkPopover">
<div class="spectrum-CoachMarkPopover-header">
<div class="spectrum-CoachMarkPopover-title">Zoom in</div>
<div class="spectrum-CoachMarkPopover-step">2 of 8</div>
<div class="spectrum-CoachMarkPopover-step"><bdo dir="ltr">2 of 8</bdo></div>
</div>
<div class="spectrum-CoachMarkPopover-content">
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Expand All @@ -129,7 +129,7 @@ examples:
<div class="spectrum-CoachMarkPopover-header">
<div class="spectrum-CoachMarkPopover-title">Zoom in</div>
<div class="spectrum-CoachMarkPopover-step">2 of 8</div>
<div class="spectrum-CoachMarkPopover-step"><bdo dir="ltr">2 of 8</bdo></div>
</div>
<div class="spectrum-CoachMarkPopover-content">
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Expand Down

0 comments on commit f4c9c59

Please sign in to comment.