@componyx/ui 0.0.0-stage → 1.0.3

package/FormField/FormField.css

@@ -0,0 +1,468 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.form-field.theme
+{
+    --margin: 0.5rem;
+    cursor: default;
+    position: relative;
+    vertical-align: top;
+    display: table;
+    clear: both;
+    margin-top: var(--margin);
+    margin-bottom: var(--margin);
+}
+
+    .form-field.theme > input,
+    .form-field.theme > textarea,
+    .form-field.theme > select
+    {
+        height: 28px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        line-height: 22px;
+        padding-left: 4px;
+        padding-right: 4px;
+        background: transparent;
+        border-style: solid;
+        border-width: 1px;
+    }
+
+    .form-field.theme > textarea
+    {
+        height: auto;
+    }
+
+    .form-field.theme > select
+    {
+        box-sizing: content-box;
+    }
+
+    .form-field.theme.borderless input,
+    .form-field.theme.borderless select
+    {
+        border-top-color: transparent;
+        border-left-color: transparent;
+        border-right-color: transparent;
+        border-radius: 0;
+    }
+
+    .form-field.theme input:focus,
+    .form-field.theme textarea:focus,
+    .form-field.theme select:focus
+    {
+        transition: all 0.5s ease-in-out, color 0.1s ease-in-out;
+    }
+
+    .form-field.theme.before,
+    .form-field.theme.after
+    {
+        display: flex;
+        align-items: center;
+    }
+
+        .form-field.theme.after > label
+        {
+            padding-left: 10px;
+        }
+
+    .form-field.theme.above,
+    .form-field.theme.inside,
+    .form-field.theme.floating
+    {
+        display: flex;
+        flex-direction: column;
+    }
+
+        .form-field.theme.floating
+        {
+            margin-top: calc(var(--margin) + 28px);
+        }
+
+        .form-field.theme.inline
+        {
+            display: inline-flex;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+    /* the b tag is used to display a custom styled checkbox or radiobutton */
+    .form-field.theme > b
+    {
+        display: none;
+    }
+
+    .form-field.theme > input[type="checkbox"] > b,
+    .form-field.theme > input[type="radio"] > b
+    {
+        display: inline-block;
+    }
+
+    .form-field.theme.inside
+    {
+        line-height: normal;
+    }
+
+        /* the i tag contains the label text */
+        .form-field.theme.above > label,
+        .form-field.theme.before > label,
+        .form-field.theme.inside > label,
+        .form-field.theme.floating > label
+        {
+            position: relative;
+            display: inline-flex;
+            order: 0;
+            line-height: 28px;
+            font-style: normal;
+            cursor: pointer;
+            font-weight: normal;
+            margin: 0;
+            padding: 0;
+            color: inherit;
+            font-family: inherit;
+            user-select: text;
+        }
+
+        .form-field.theme.inside > label,
+        .form-field.theme.floating > label
+        {
+            margin-left: 1px;
+        }
+
+    .form-field.theme.before > label
+    {
+        padding-right: 10px;
+    }
+
+    .form-field.theme.floating > label,
+    .form-field.theme.inside > label
+    {
+        position: absolute;
+        top: 0px;
+        line-height: 28px;
+        cursor: text;
+    }
+
+    .form-field.theme.above > :not(label),
+    .form-field.theme.inside > :not(label),
+    .form-field.theme.floating > :not(label),
+    .form-field.theme.before > :not(label)
+    {
+        order: 1;
+    }
+
+
+    .form-field.theme.floating > label
+    {
+        transition: all 0.1s ease-in-out;
+    }
+
+    .form-field.theme.before > label,
+    .form-field.theme.after > label
+    {
+        position: static;
+        line-height: 28px;
+    }
+
+    .form-field.theme.before > input ~ b
+    {
+        order: 1;
+    }
+
+
+    /* inside */
+    .form-field.theme.inside > label,
+    .form-field.theme.floating > label
+    {
+        opacity: 0.6;
+    }
+
+    /* Show label above input when input is not empty or has focus */
+    .form-field.theme.floating:has(input:not(:placeholder-shown)) > label,
+    .form-field.theme.floating:has(textarea:not(:placeholder-shown)) > label,
+    .form-field.theme.floating:has(*:focus) > label
+    {
+        top: -28px;
+        font-size: 0.85rem;
+        opacity: 1;
+    }
+
+    /* Hide label inside if not above and input is not empty, or on focus */
+    .form-field.theme.inside:has(input:not(:placeholder-shown)) > label,
+    .form-field.theme.inside:has(textarea:not(:placeholder-shown)) > label,
+    .form-field.theme.inside:has(*:focus) > label
+    {
+        display: none;
+    }
+
+    /* Hide placeholder when input is NOT focused when label inside */
+    .form-field.theme.inside input:not(:focus)::placeholder,
+    .form-field.theme.inside textarea:not(:focus)::placeholder
+    {
+        color: transparent !important;
+    }
+
+    /* initial state: placeholder hidden */
+    .form-field.theme.floating input::placeholder,
+    .form-field.theme.floating textarea::placeholder
+    {
+        color: transparent !important;
+    }
+
+    /* On focus, start animation with delay = floating label transition duration (e.g. 0.1s) */
+    .form-field.theme.floating input:focus::placeholder,
+    .form-field.theme.floating textarea:focus::placeholder
+    {
+        color: rgba(0,0,0,0.5) !important;
+        transition: color 0s linear 0.1s;
+    }
+
+    .form-field.theme > *:disabled ~ b,
+    .form-field.theme > *:disabled ~ label,
+    .form-field.theme > *:disabled ~ b ~ label
+    {
+        opacity: 0.5;
+    }
+
+    .form-field.theme.required > label::before
+    {
+        font-family: 'UI';
+        font-size: 10px;
+        content: "\e917";
+        margin-right: 6px;
+    }
+
+    /* checkbox and radiobutton */
+    .form-field.theme > input[type="radio"],
+    .form-field.theme > input[type="checkbox"]
+    {
+        position: absolute;
+        left: 0px;
+        margin: 0px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0px;
+        height: 1px;
+        opacity: 0 !important;
+        font-size: 0px;
+        -moz-appearance: none
+    }
+
+    .form-field.theme > input ~ b
+    {
+        display: block;
+        position: relative;
+        left: 0px;
+        margin: 0px;
+        min-width: 24px; /* don't allow to be compressed in flexbox or grid */
+        width: 24px;
+        height: 24px;
+        border-style: solid;
+        border-color: transparent;
+    }
+
+    /* transparent with borders */
+    .form-field.theme.lucent > input ~ b
+    {
+        background: transparent;
+        border-color: inherit;
+    }
+
+    .form-field.theme > input:checked ~ b::before
+    {
+        display: inline-block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) rotate(45deg);
+        content: '';
+        border-width: 0px 3px 3px 0px;
+        border-style: solid;
+        width: 4px;
+        height: 7px;
+        border-radius: 0px;
+    }
+
+    .form-field.theme > input[type="checkbox"]:checked ~ b::before
+    {
+        transform: translate(-50%, -60%) rotate(45deg);
+    }
+
+    .form-field.theme > input[type="radio"]:checked ~ b::before
+    {
+        width: 0px;
+        height: 0px;
+        border-width: 4px;
+        border-radius: 50%;
+    }
+
+
+    .form-field.theme > input ~ b ~ label,
+    .form-field.theme.before > input ~ b ~ label,
+    .form-field.theme.after > input ~ b ~ label
+    {
+        position: relative;
+    }
+
+    .form-field.theme.before > input ~ b ~ label
+    {
+        padding-right: 12px;
+    }
+
+    /* after label is set to bold when checked, so reserve space for bold text so that the container-size won't change when checked */
+    .form-field.theme.after > input ~ b ~ label,
+    .form-field.theme.before > input ~ b ~ label
+    {
+        display: inline-block;
+        line-height: 28px;
+        font-weight: bold;
+        font-style: normal;
+        opacity: 0;
+        user-select: none;
+        margin-left: 0px;
+        padding-left: 6px;
+        padding-right: 12px;
+    }
+
+    .form-field.theme.before > input ~ b ~ label
+    {
+        padding-left: 0px;
+        padding-right: 6px;
+    }
+
+    .form-field.theme.switch.after > input ~ b ~ label
+    {
+        padding-left: 10px;
+    }
+
+    .form-field.theme.switch.after
+    {
+        margin-left: 8px; /* reserve some space for box shadow */
+    }
+
+    .form-field.theme.switch.before > input ~ b ~ label
+    {
+        padding-right: 10px;
+    }
+
+    .form-field.theme.inline.before + .form-field.theme.inline.before
+    {
+        padding-left: 12px;
+    }
+
+    .form-field.theme.after > input:checked ~ b ~ label,
+    .form-field.theme.before > input:checked ~ b ~ label
+    {
+        opacity: 1;
+    }
+
+    /* set title attribute of label > b */
+    .form-field.theme.after > input ~ b::after,
+    .form-field.theme.before > input ~ b::after
+    {
+        display: block;
+        white-space: nowrap;
+        content: attr(title);
+        font-weight: normal;
+        position: absolute;
+        left: 31px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .form-field.theme.before > input ~ b::after
+    {
+        left: auto;
+        right: 31px;
+    }
+
+    .form-field.theme.after > input:checked ~ b::after,
+    .form-field.theme.before > input:checked ~ b::after
+    {
+        display: none;
+    }
+
+    /* switch */
+    .form-field.theme.switch > input[type="checkbox"] ~ b
+    {
+        display: block;
+        position: relative;
+        left: 0px;
+        width: 35px;
+        height: 16px;
+        border-radius: 8px;
+    }
+
+        .form-field.theme.switch > input[type="checkbox"] ~ b::before
+        {
+            content: '';
+            font-family: 'ui';
+            font-size: 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            left: -2px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            transition: left 0.1s;
+            border: 0px;
+            line-height: 0;
+        }
+
+    .form-field.theme.switch > input[type="checkbox"]:checked ~ b::before
+    {
+        content: '\e90b';
+        left: 16px;
+    }
+
+
+    .form-field.theme.switch > input[type="checkbox"] ~ b::after
+    {
+        left: 46px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .form-field.theme.before.switch > input[type="checkbox"] ~ b::after
+    {
+        left: auto;
+        right: 46px;
+    }
+
+    .form-field.theme.switch > input[type="checkbox"]:checked ~ b::after
+    {
+        display: none;
+    }
+
+    .form-field.theme.switch > input ~ b::before
+    {
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
+    }
+
+    /* tooltip icon */
+    .form-field.theme > label > i
+    {
+        margin-left: 10px;
+        transition: opacity 0.2s ease;
+    }
+
+    .form-field.theme.floating > label > i
+    {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .form-field.theme.floating:has(input:not(:placeholder-shown)) > label > i,
+    .form-field.theme.floating:has(textarea:not(:placeholder-shown)) > label > i,
+    .form-field.theme.floating:focus-within > label > i
+    {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+.form-field.theme .field-content-wrapper
+{
+    flex: 1;
+}