@eui/styles 15.0.0-rc.2 → 15.0.0-rc.21

package/src/styles/07-elements/legacy/_input-radio-default.scss

@@ -1,289 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-// DEFAULT RADIO STYLE
-// Duplicated selectors are present for better understanding
-////////////////////////////////////////////////////////////////////////////////
-// stylelint-disable no-descending-specificity
-// stylelint-disable no-duplicate-selectors
-
-input[type="radio"]:not(.cdk-visually-hidden),
-input[type="radio"]:not(.eui-input-radio) {
-    // Hide default
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    opacity: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-table {
-    // Show default checkbox
-    input[type="radio"]:not(.cdk-visually-hidden),
-    input[type="radio"]:not(.eui-input-radio) {
-        -moz-appearance: initial;    // Hack for Firefox browsers which does not support after/before pseudos on input type
-        border: inherit;
-        clip: initial;
-        height: 0;
-        opacity: 1;
-        overflow: visible;
-        padding: 0;
-        position: absolute !important;
-        width: 0;
-
-        &:focus {
-            &::before {
-                border: 2px solid v(eui-base-color-accent-120);
-                box-shadow: inset 0 0 0 3px v(eui-base-color-white), 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-                cursor: pointer;
-                outline: none;
-            }
-        }
-
-        // Force hiding default input radio when using ux-form-control (EUI-4602)
-        &.ux-input__radio {
-            clip: rect(0 0 0 0) !important;
-
-            &::after,
-            &::before {
-                content: none !important;
-            }
-        }
-    }
-}
-
-[type="radio"]:not(.cdk-visually-hidden),
-[type="radio"]:not(.eui-input-radio) {
-    -moz-appearance: initial;    // Hack for Firefox browsers which does not support after/before pseudos on input type
-
-    // WITHOUT LABEL
-    /////////////////
-    &.ux-radio {
-        clip: auto !important;
-        height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)}) !important;
-        opacity: 1 !important;
-        position: relative !important;
-        width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)}) !important;
-    }
-
-    // Unchecked
-    &::before {
-        background: v(eui-base-color-white);
-        border: 2px solid v(eui-base-color-grey-15);
-        border-radius: 100%;
-        clip: auto; // +
-        content: '';
-        cursor: pointer;
-        display: inline-block;
-        height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-        margin-right: v(eui-base-spacing-m);
-        opacity: 1;     // +
-        position: relative;
-        text-align: center;
-        top: 0;
-        transition: all 250ms ease;
-        vertical-align: top;
-        width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-    }
-
-    // Checked
-    &:checked {
-        // The circle
-        &::before {
-            background: v(eui-base-color-primary-100);
-            border: 2px solid v(eui-base-color-grey-15);
-            box-shadow: inset 0 0 0 3px v(eui-base-color-white);
-        }
-    }
-
-    &:disabled {
-        opacity: v(eui-base-disabled-opacity);
-        pointer-events: none;
-
-        &::before {
-            background: v(eui-base-color-grey-15);
-            border: 2px solid v(eui-base-color-grey-15);
-        }
-
-        &:checked {
-            &::before {
-                background-color: v(eui-base-color-grey-20);
-            }
-        }
-    }
-
-    // Focused
-    &:focus {
-        &::before {
-            border: 2px solid v(eui-base-color-accent-120);
-            box-shadow: inset 0 0 0 3px v(eui-base-color-white);
-            cursor: pointer;
-            outline: none;
-        }
-    }
-
-    &[readonly] {
-        background: v(eui-base-color-grey-25);
-        box-shadow: none;
-        outline: none;
-        pointer-events: none;
-
-        // The circle
-        &::before {
-            background: v(eui-base-color-grey-20);
-            border: 2px solid v(eui-base-color-grey-15);
-        }
-
-        // Checked
-        &:checked {
-            // The circle
-            &::before {
-                // Keep it displayed!
-                background: v(eui-base-color-grey-25);
-                border: 2px solid v(eui-base-color-grey-15);
-                box-shadow: inset 0 0 0 3px v(eui-base-color-white);
-            }
-        }
-    }
-
-    // WITH LABEL
-    /////////////////
-    // Unchecked
-    + label:not(:empty) {
-        cursor: pointer;
-        // margin-bottom: v(eui-base-spacing-2xs);
-        // margin-top: v(eui-base-spacing-2xs);
-        padding-left: v(eui-base-spacing-xl);
-
-        &::before {
-            background: v(eui-base-color-white);
-            border: 2px solid v(eui-base-color-grey-15);
-            border-radius: 100%;
-            content: '';
-            cursor: pointer;
-            display: inline-block;
-            flex-shrink: 0;     // Fixes long label issue
-            height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-            margin-right: v(eui-base-spacing-m);
-            text-align: center;
-            top: 0;
-            transition: all 250ms ease;
-            vertical-align: top;
-            width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-        }
-
-        &:empty {
-            &::before {
-                margin-right: 0;
-            }
-        }
-    }
-
-    // Checked (duplicated here for better reading & understanding)
-    &:checked {
-        + label {
-            cursor: pointer;
-            // margin-bottom: v(eui-base-spacing-2xs);
-            // margin-top: v(eui-base-spacing-2xs);;
-            padding-left: v(eui-base-spacing-xl);
-
-            &::before {
-                background-color: v(eui-base-color-primary-100);
-                box-shadow: inset 0 0 0 3px v(eui-base-color-white);
-            }
-        }
-    }
-    // Focused (duplicated here for better reading & understanding)
-    &:focus {
-        + label {
-            &::before {
-                border-color: v(eui-base-color-accent-120);
-                box-shadow: inset 0 0 0 3px v(eui-base-color-white), 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-                cursor: pointer;
-                outline: none;
-            }
-        }
-    }
-
-    &:disabled {
-        opacity: v(eui-base-disabled-opacity);
-        pointer-events: none;
-
-        // Unchecked
-        + label {
-            color: v(eui-base-color-grey-25);
-            pointer-events: none;
-
-            &::before {
-                background: v(eui-base-color-grey-10);
-                border: 2px solid v(eui-base-color-grey-15);
-                box-shadow: none;
-            }
-        }
-        // Checked
-        &:checked {
-            pointer-events: none;
-
-            + label {
-                color: v(eui-base-color-grey-25);
-                pointer-events: none;
-
-                &::before {
-                    background-color: v(eui-base-color-primary-100);
-                    border: 2px solid v(eui-base-color-grey-15);
-                    box-shadow: inset 0 0 0 3px v(eui-base-color-white);
-                    opacity: v(eui-base-disabled-opacity);
-                }
-            }
-        }
-    }
-
-    &[readonly] {
-        background: v(eui-base-color-grey-25);
-        background-image: none;
-        box-shadow: none;
-        outline: none;
-        pointer-events: none;
-
-        &::after {
-            background: v(eui-base-color-grey-15);
-        }
-
-        // Unchecked
-        + label {
-            cursor: not-allowed;
-            pointer-events: none;
-
-            &::before {
-                background: v(eui-base-color-grey-20);
-                border: 2px solid v(eui-base-color-grey-15);
-            }
-        }
-        // Checked
-        &:checked {
-            pointer-events: none;
-
-            &::after {
-                background: v(eui-base-color-grey-25);
-            }
-
-            + label {
-                color: v(eui-base-color-text);
-                pointer-events: none;
-
-                .ux-form-group--inline & {
-                    position: relative;
-                    top: calc(-1 * #{v(eui-base-spacing-2xs)});
-                }
-
-                &::before {
-                    background: v(eui-base-color-grey-20);
-                    border-color: v(eui-base-color-grey-15);
-                    box-shadow: inset 0 0 0 3px v(eui-base-color-white);
-                    display: none;
-                }
-            }
-        }
-    }
-}