aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/forms/select-with-tooltip.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/forms/select-with-tooltip.module.scss')
-rw-r--r--src/components/molecules/forms/select-with-tooltip.module.scss48
1 files changed, 48 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..bfadece
--- /dev/null
+++ b/src/components/molecules/forms/select-with-tooltip.module.scss
@@ -0,0 +1,48 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.wrapper {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: center;
+ position: relative;
+}
+
+.select {
+ width: auto;
+
+ @include mix.pointer("fine") {
+ padding: fun.convert-px(3) var(--spacing-xs);
+ }
+}
+
+.btn {
+ margin-left: var(--spacing-xs);
+
+ &--activated {
+ background: var(--color-primary);
+
+ * {
+ color: var(--color-fg-inverted);
+ }
+ }
+}
+
+.tooltip {
+ position: absolute;
+ top: calc(100% + var(--spacing-xs));
+ transform-origin: top;
+ transition: all 0.75s ease-in-out 0s;
+
+ &--hidden {
+ opacity: 0;
+ visibility: hidden;
+ transform: scale(0);
+ }
+
+ &--visible {
+ opacity: 1;
+ visibility: visible;
+ transform: scale(1);
+ }
+}