Refactor Saas naming, structure and modules
- Add more documentation. - Use `main.scss` instead of importing components individually. This improves productivity without compilation errors due to missing imports and allows for easier future file/folder changes and refactorings inside `./styles`. - Use partials with underscored naming. Because it documents that the files should not be individually imported. - Introduce `third-party-extensions` folder to group styles that overwrites third party components. - Refactor variable names from generic to specific. - Use Sass modules (`@use` and `@forward`) over depreciated `@import` syntax. - Separate font assets from Sass files (`styles/`). Create `assets/` folder that will contain both. - Create `_globals.css` for global styling of common element instead of using `App.vue`.
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
|
||||
@use "@/presentation/assets/styles/colors" as *;
|
||||
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
.tooltip-inner {
|
||||
background: $color-primary-darkest;
|
||||
color: $color-on-primary;
|
||||
border-radius: 16px;
|
||||
padding: 5px 10px 4px;
|
||||
}
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: $color-primary-darkest;
|
||||
z-index: 1;
|
||||
}
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
&[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user