aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/forms/fieldset.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/forms/fieldset.module.scss')
-rw-r--r--src/components/molecules/forms/fieldset.module.scss61
1 files changed, 61 insertions, 0 deletions
diff --git a/src/components/molecules/forms/fieldset.module.scss b/src/components/molecules/forms/fieldset.module.scss
new file mode 100644
index 0000000..3102bf7
--- /dev/null
+++ b/src/components/molecules/forms/fieldset.module.scss
@@ -0,0 +1,61 @@
+.legend {
+ float: left;
+ color: var(--color-primary-darker);
+ font-size: var(--font-size-md);
+ font-weight: 600;
+
+ &#{&}--has-tooltip {
+ padding: 0 var(--spacing-xs) 0 0;
+ }
+}
+
+.btn {
+ margin: 0 var(--spacing-2xs) var(--spacing-2xs) 0;
+
+ &--activated {
+ background: var(--color-primary);
+
+ * {
+ color: var(--color-fg-inverted);
+ }
+ }
+}
+
+.tooltip {
+ top: calc(100% + var(--spacing-xs));
+ transform-origin: top;
+ transition: all 0.75s ease-in-out 0s;
+
+ &--hidden {
+ flex: 0 0 0;
+ opacity: 0;
+ visibility: hidden;
+ transform: scale(0);
+ }
+
+ &--visible {
+ opacity: 1;
+ visibility: visible;
+ transform: scale(1);
+ }
+}
+
+.wrapper {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: center;
+ max-width: 100%;
+ padding: 0;
+ position: relative;
+ border: none;
+
+ &--stacked {
+ .body {
+ flex: 1 0 100%;
+ }
+ }
+
+ .tooltip {
+ position: absolute;
+ }
+}