forked from pattern-lab/patternlab-node
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(annotations): displaying annotation tooltips correctly (pattern-l…
…ab#1406) * chore(docs): some typos missed to replace mustache initially and incorrect handlebars two times (both in package name and URL) * Revert "Merge pull request pattern-lab#2 from pattern-lab/dev" This reverts commit 7812878, reversing changes made to 26db979. * Revert "Merge pull request pattern-lab#1 from pattern-lab/dev" This reverts commit 26db979, reversing changes made to fc90750. * Revert "chore(docs): some typos" This reverts commit 271dc8d. * chore: some reformatting * chore: formatting * chore: formatting This reverts commit 271dc8d. * chore: formatting * refactor: let's hide elements the modern way with the hidden attribute * refactor: extracting annotations inside modal styles * refactor: we won't need this as a generated CSS file * Revert "Merge branch 'dev' into fix/annotations-tooltip-rendering" This reverts commit 2c715ae, reversing changes made to 5effb4f. * refactor: adding some sample content for the annotations and corrected the current approach to provide annotations JSON * refactor: regenerated those files Co-authored-by: Maximilian <mfr@nzke.net>
- Loading branch information
Showing
4 changed files
with
81 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
@charset "UTF-8"; | ||
|
||
/*------------------------------------*\ | ||
#ANNOTATIONS INSIDE MODAL | ||
\*------------------------------------*/ | ||
|
||
/** | ||
* Annotations area | ||
* 1) Appears inside of modal | ||
*/ | ||
.pl-c-annotations { | ||
margin: 1rem 0; | ||
} | ||
|
||
/** | ||
* Annotations Title | ||
* Says the word "Annotations" | ||
*/ | ||
.pl-c-annotations__title { | ||
font-size: 1.2rem !important; | ||
margin: 0 0 0.5rem; | ||
} | ||
|
||
/** | ||
* Annotations list | ||
* 1) Ordered list of annotations | ||
* 2) Presented with parent selector to force styles | ||
* over pl-c-text-passage | ||
*/ | ||
.pl-c-annotations .pl-c-annotations__list { | ||
counter-reset: the-count; | ||
padding: 0; | ||
margin: 0; | ||
list-style: none; | ||
} | ||
|
||
/** | ||
* Annotations list item | ||
* 1) Displays each item as a number | ||
*/ | ||
.pl-c-annotations__item { | ||
position: relative; | ||
padding-left: 1.5rem; | ||
margin-bottom: 1rem; | ||
border-radius: $pl-border-radius-med; | ||
transition: background-color $pl-animate-quick ease; | ||
|
||
&:before { | ||
content: counter(the-count); | ||
counter-increment: the-count; | ||
font-size: 85%; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
width: 14px; | ||
height: 14px; | ||
border-radius: 50%; | ||
padding: 2px; | ||
text-align: center; | ||
background-color: $pl-color-gray-50; | ||
color: $pl-color-white; | ||
position: absolute; | ||
top: 4px; | ||
left: 0; | ||
} | ||
|
||
&.pl-is-active { | ||
outline: 1px dotted $pl-color-gray-50; | ||
outline-offset: -1px; | ||
} | ||
} | ||
|
||
.pl-c-annotations .pl-c-annotations__item-title { | ||
margin-bottom: 0; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters