Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
style: Align App UI with the design system (#1672)
This PR adds entity label component in entities selector, also includes kebab-case in some nuxt-link * rename core folder to base * fix checkbox margin * remove unused prop * decorator * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix copy text * force commit * update test snapshot Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Closes #1670 (cherry picked from commit 52bbceb)
- Loading branch information
1 parent
79f0529
commit 67d6de8
Showing
152 changed files
with
2,073 additions
and
3,157 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
This file was deleted.
Oops, something went wrong.
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
105 changes: 105 additions & 0 deletions
105
frontend/assets/scss/abstract/placeholders/_tooltip.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,105 @@ | ||
| // tooltip | ||
| $tooltip-bg: palette(grey, 100); | ||
| $tooltip-color: palette(white); | ||
| $tooltip-font-size: 14px; | ||
| $tooltip-triangle-size: 7px; | ||
| $tooltip-border-radius: $border-radius-s; | ||
|
|
||
| %tooltip { | ||
| position: absolute; | ||
| margin: auto; | ||
| max-width: 266px; | ||
| overflow-wrap: break-word; | ||
| pointer-events: none; | ||
| z-index: 2; | ||
| white-space: nowrap; | ||
| padding: $base-space $base-space*2; | ||
| transform: none; | ||
| background: $tooltip-bg; | ||
| color: $tooltip-color; | ||
| border-radius: $tooltip-border-radius; | ||
| @include font-size($tooltip-font-size); | ||
| font-family: $ff; | ||
| font-weight: 600; | ||
| } | ||
| %has-tooltip--left { | ||
| @extend %has-tooltip; | ||
| &:after { | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| right: calc(100% + 10px); | ||
| } | ||
| &:before { | ||
| right: calc(100% + $tooltip-triangle-size/2); | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| @include triangle(right, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg); | ||
| } | ||
| } | ||
| %has-tooltip--bottom { | ||
| @extend %has-tooltip; | ||
| &:after { | ||
| top: calc(100% + 20px); | ||
| right: 50%; | ||
| transform: translateX(50%); | ||
| } | ||
| &:before { | ||
| right: calc(50% - $tooltip-triangle-size/2); | ||
| top: $tooltip-triangle-size*2; | ||
| @include triangle(top, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg); | ||
| } | ||
| } | ||
| %has-tooltip--top { | ||
| @extend %has-tooltip; | ||
| &:after { | ||
| bottom: calc(100% + 10px); | ||
| right: 50%; | ||
| transform: translateX(50%); | ||
| } | ||
| &:before { | ||
| right: calc(50% - $tooltip-triangle-size); | ||
| top: -10px; | ||
| @include triangle(bottom, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg); | ||
| } | ||
| } | ||
| %tooltip-large-text { | ||
| &:after { | ||
| min-width: 216px; | ||
| white-space: break-spaces; | ||
| text-align: left; | ||
| line-height: 1.4em; | ||
| } | ||
| } | ||
| %has-tooltip { | ||
| &:after { | ||
| content: attr(data-title); | ||
| @extend %tooltip; | ||
| opacity: 0; | ||
| z-index: -1; | ||
| width: 0; | ||
| height: 0; | ||
| overflow: hidden; | ||
| } | ||
| &:before { | ||
| content: ""; | ||
| position: absolute; | ||
| display: block; | ||
| width: 0; | ||
| height: 0; | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| } | ||
| &:hover{ | ||
| &:after { | ||
| width: auto; | ||
| height: auto; | ||
| opacity: 1; | ||
| transition: opacity 0.1s ease 0.2s; | ||
| z-index: 2; | ||
| } | ||
| &:before { | ||
| opacity: 1; | ||
| transition: opacity 0.1s ease 0.2s; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.