diff options
Diffstat (limited to 'src/components/molecules/forms/select-with-tooltip.module.scss')
| -rw-r--r-- | src/components/molecules/forms/select-with-tooltip.module.scss | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/src/components/molecules/forms/select-with-tooltip.module.scss b/src/components/molecules/forms/select-with-tooltip.module.scss new file mode 100644 index 0000000..1f91f74 --- /dev/null +++ b/src/components/molecules/forms/select-with-tooltip.module.scss @@ -0,0 +1,52 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.wrapper { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: var(--spacing-xs); + position: relative; +} + +.label { + margin-right: auto; +} + +.select { + width: auto; + + @include mix.pointer("fine") { + padding: fun.convert-px(3) var(--spacing-xs); + } +} + +.btn { + &--activated { + background: var(--color-primary); + + * { + color: var(--color-fg-inverted); + } + } +} + +.tooltip { + position: absolute; + top: calc(100% + var(--spacing-xs)); + right: 0; + transform-origin: top right; + transition: all 0.75s ease-in-out 0s; + + &--hidden { + opacity: 0; + visibility: hidden; + transform: scale(0); + } + + &--visible { + opacity: 1; + visibility: visible; + transform: scale(1); + } +} |
