diff --git a/.github/factory/index.css.scss b/.github/factory/index.css.scss index f8f7186..8f623e3 100644 --- a/.github/factory/index.css.scss +++ b/.github/factory/index.css.scss @@ -277,8 +277,7 @@ $name: 'option-picker'; z-index: 1; * { // Remove (hide) line-break in option editor - display: inline; - font: inherit; + display: none; } + span { bottom: 0; diff --git a/index.css b/index.css index f3e042d..ed1bf5f 100644 --- a/index.css +++ b/index.css @@ -277,8 +277,7 @@ z-index: 1; } .option-picker__input span * { - display: inline; - font: inherit; + display: none; } .option-picker__input span + span { bottom: 0; diff --git a/index.min.css b/index.min.css index 7d21a8e..9b86260 100644 --- a/index.min.css +++ b/index.min.css @@ -1 +1 @@ -:root{--color-option-picker--disabled:#666;--color-option-picker:#000;--color-option-picker__option--active:#fff;--color-option-picker__option--disabled:#666;--color-option-picker__option--hover:#fff;--color-option-picker__option--selected:#00f;--color-option-picker__option-group--disabled:#666;--color-option-picker__option-group:#000;--color-option-picker__options--disabled:#666;--fill-option-picker--disabled:#eee;--fill-option-picker:#fff;--fill-option-picker__option--active:#009;--fill-option-picker__option--disabled:none;--fill-option-picker__option--hover:#00f;--fill-option-picker__option--selected:none;--fill-option-picker__option:none;--fill-option-picker__options--disabled:#eee;--fill-option-picker__options:#fff;--font-face-option-picker:inherit;--font-height-option-picker:1.5em;--font-size-option-picker:inherit;--shadow-option-picker:none;--shadow-option-picker__options:0 1px 2px rgba(0, 0, 0, .4);--stroke-option-picker--disabled:#666;--stroke-option-picker--focus:#00f;--stroke-option-picker--open:#00f;--stroke-option-picker:#000;--stroke-option-picker__options--disabled:#999;--stroke-option-picker__options--open:#00f;--stroke-option-picker__options:#000;--width-option-picker:12em}.option-picker,.option-picker *,.option-picker ::after,.option-picker ::before,.option-picker::after,.option-picker::before{box-sizing:border-box;font:inherit}.option-picker{-moz-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;background:var(--fill-option-picker);border:1px solid;border-color:var(--stroke-option-picker);border-radius:var(--arc-option-picker);box-shadow:var(--shadow-option-picker);color:var(--color-option-picker);cursor:pointer;display:inline-block;font-family:var(--font-face-option-picker);font-size:var(--font-size-option-picker);height:var(--height-option-picker,auto);line-height:var(--font-height-option-picker);max-height:var(--height-max-option-picker,100%);max-width:var(--width-max-option-picker,100%);min-height:var(--height-min-option-picker,0);min-width:var(--width-min-option-picker,0);outline:0;padding:.25em;position:relative;user-select:none;vertical-align:middle;width:var(--width-option-picker,auto)}.option-picker:hover{background:var(--fill-option-picker--hover,var(--fill-option-picker));border-color:var(--stroke-option-picker--hover,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--hover,var(--shadow-option-picker));color:var(--color-option-picker--hover,var(--color-option-picker))}.option-picker:focus{background:var(--fill-option-picker--focus,var(--fill-option-picker));border-color:var(--stroke-option-picker--focus,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--focus,var(--shadow-option-picker));color:var(--color-option-picker--focus,var(--color-option-picker))}.option-picker:active{background:var(--fill-option-picker--active,var(--fill-option-picker));border-color:var(--stroke-option-picker--active,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--active,var(--shadow-option-picker));color:var(--color-option-picker--active,var(--color-option-picker))}.option-picker::after{border:0 solid transparent;border-bottom-color:inherit;border-left-width:.35em;border-right-width:.35em;border-top-color:inherit;border-top-width:.45em;content:"";height:0;pointer-events:none;position:absolute;right:.5em;top:calc(50% - .225em);width:0}.option-picker--open.option-picker--down{border-bottom-left-radius:0;border-bottom-right-radius:0}.option-picker--open.option-picker--up{border-top-left-radius:0;border-top-right-radius:0}.option-picker--open::after{border-bottom-width:.45em;border-top-width:0}.option-picker--open .option-picker__options{background:var(--fill-option-picker__options--open,var(--fill-option-picker__options,var(--fill-option-picker)));border-color:var(--stroke-option-picker__options--open,var(--stroke-option-picker__options,var(--stroke-option-picker)));color:var(--color-option-picker__options--open,var(--stroke-option-picker__options,var(--stroke-option-picker)));display:block}.option-picker--open.option-picker--down .option-picker__options{border-top-left-radius:0;border-top-right-radius:0}.option-picker--open.option-picker--up .option-picker__options{border-bottom-left-radius:0;border-bottom-right-radius:0}.option-picker *{outline:0}.option-picker.option-picker--focus{background:var(--fill-option-picker--focus,var(--fill-option-picker));border-color:var(--stroke-option-picker--focus,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--focus,var(--shadow-option-picker));color:var(--color-option-picker--focus,var(--color-option-picker))}.option-picker.option-picker--disabled{background:var(--fill-option-picker--disabled,var(--fill-option-picker));border-color:var(--stroke-option-picker--disabled,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--disabled,var(--shadow-option-picker));color:var(--color-option-picker--disabled,var(--color-option-picker))}.option-picker__options{background:var(--fill-option-picker__options,var(--fill-option-picker));border:inherit;border-color:var(--stroke-option-picker__options,var(--stroke-option-picker));border-radius:var(--arc-option-picker__options,var(--arc-option-picker));box-shadow:var(--shadow-option-picker__options);color:var(--color-option-picker__options,var(--color-option-picker));display:none;overflow:auto;position:fixed;z-index:9999}.option-picker__options .option-picker__option{background:var(--fill-option-picker__option);color:var(--color-option-picker__option);cursor:pointer;display:block;font:inherit;overflow:hidden;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap}.option-picker__options .option-picker__option[hidden]{display:none}.option-picker__options .option-picker__option:not(.option-picker__option--disabled):hover{background:var(--fill-option-picker__option--hover,var(--fill-option-picker__option));color:var(--color-option-picker__option--hover,var(--color-option-picker__option))}.option-picker__options .option-picker__option:not(.option-picker__option--disabled):focus{background:var(--fill-option-picker__option--focus,var(--fill-option-picker__option));color:var(--color-option-picker__option--focus,var(--color-option-picker__option))}.option-picker__options .option-picker__option:not(.option-picker__option--disabled):active{background:var(--fill-option-picker__option--active,var(--fill-option-picker__option));color:var(--color-option-picker__option--active,var(--color-option-picker__option))}.option-picker__options .option-picker__option--selected{background:var(--fill-option-picker__option--selected,var(--fill-option-picker__option));color:var(--color-option-picker__option--selected,var(--color-option-picker__option))}.option-picker__options .option-picker__option--disabled{background:var(--fill-option-picker__option--disabled,var(--fill-option-picker__option));color:var(--color-option-picker__option--disabled,var(--color-option-picker__option));cursor:not-allowed}.option-picker__option-group{display:block;padding:0 .5em}.option-picker__option-group[title]::before{content:attr(title);display:block;font-weight:700;margin:0 -.5em;overflow:hidden;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap}.option-picker__option-group--disabled{color:var(--color-disabled__option-group--disabled,var(--color-disabled__option-group))}.option-picker__option-group .option-picker__option{margin:0 -.5em;padding-left:1.5em}.option-picker__source{left:-9999px;position:fixed;top:-9999px}.option-picker__source:disabled+.option-picker{background:var(--fill-option-picker--disabled,var(--fill-option-picker));border-color:var(--stroke-option-picker--disabled,var(--stroke-option-picker));color:var(--color-option-picker--disabled,var(--color-option-picker));cursor:not-allowed}.option-picker__source:disabled+.option-picker::after{border-top-color:var(--stroke-option-picker--disabled,var(--stroke-option-picker))}.option-picker__source:disabled+.option-picker .option-picker__option{color:var(--color-option-picker--disabled,var(--color-option-picker))}.option-picker__source:disabled+.option-picker .option-picker__options{background:var(--fill-option-picker__options--disabled,var(--fill-option-picker--disabled),var(--fill-option-picker));border-color:var(--stroke-option-picker__options--disabled,var(--stroke-option-picker--disabled,var(--stroke-option-picker)));color:var(--color-option-picker__options--disabled,var(--color-option-picker--disabled,var(--color-option-picker)))}.option-picker__source:disabled+.option-picker .option-picker__options,.option-picker__source:disabled+.option-picker .option-picker__values{pointer-events:none}.option-picker__source[size]+.option-picker{height:auto}.option-picker__source[size]+.option-picker::after{display:none}.option-picker__source[size]+.option-picker .option-picker__options{border-color:inherit;border-width:0;border-top-width:inherit;box-shadow:none;display:block;margin:.25em -.25em -.25em;position:relative;z-index:1}.option-picker__source[size]+.option-picker .option-picker__values{margin:0}.option-picker__source[multiple]+.option-picker .option-picker__values{white-space:normal}.option-picker__input span{display:block;height:100%;outline:0;position:relative;z-index:1}.option-picker__input span *{display:inline;font:inherit}.option-picker__input span+span{opacity:.5;padding:inherit;right:0;white-space:nowrap;position:absolute;top:0;bottom:0;left:0;z-index:0}.option-picker__input{cursor:text}.option-picker__input,.option-picker__values{display:block;margin-right:1.25em;overflow:hidden;padding:0 .25em;position:relative;text-overflow:ellipsis;white-space:nowrap} \ No newline at end of file +:root{--color-option-picker--disabled:#666;--color-option-picker:#000;--color-option-picker__option--active:#fff;--color-option-picker__option--disabled:#666;--color-option-picker__option--hover:#fff;--color-option-picker__option--selected:#00f;--color-option-picker__option-group--disabled:#666;--color-option-picker__option-group:#000;--color-option-picker__options--disabled:#666;--fill-option-picker--disabled:#eee;--fill-option-picker:#fff;--fill-option-picker__option--active:#009;--fill-option-picker__option--disabled:none;--fill-option-picker__option--hover:#00f;--fill-option-picker__option--selected:none;--fill-option-picker__option:none;--fill-option-picker__options--disabled:#eee;--fill-option-picker__options:#fff;--font-face-option-picker:inherit;--font-height-option-picker:1.5em;--font-size-option-picker:inherit;--shadow-option-picker:none;--shadow-option-picker__options:0 1px 2px rgba(0, 0, 0, .4);--stroke-option-picker--disabled:#666;--stroke-option-picker--focus:#00f;--stroke-option-picker--open:#00f;--stroke-option-picker:#000;--stroke-option-picker__options--disabled:#999;--stroke-option-picker__options--open:#00f;--stroke-option-picker__options:#000;--width-option-picker:12em}.option-picker,.option-picker *,.option-picker ::after,.option-picker ::before,.option-picker::after,.option-picker::before{box-sizing:border-box;font:inherit}.option-picker{-moz-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;background:var(--fill-option-picker);border:1px solid;border-color:var(--stroke-option-picker);border-radius:var(--arc-option-picker);box-shadow:var(--shadow-option-picker);color:var(--color-option-picker);cursor:pointer;display:inline-block;font-family:var(--font-face-option-picker);font-size:var(--font-size-option-picker);height:var(--height-option-picker,auto);line-height:var(--font-height-option-picker);max-height:var(--height-max-option-picker,100%);max-width:var(--width-max-option-picker,100%);min-height:var(--height-min-option-picker,0);min-width:var(--width-min-option-picker,0);outline:0;padding:.25em;position:relative;user-select:none;vertical-align:middle;width:var(--width-option-picker,auto)}.option-picker:hover{background:var(--fill-option-picker--hover,var(--fill-option-picker));border-color:var(--stroke-option-picker--hover,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--hover,var(--shadow-option-picker));color:var(--color-option-picker--hover,var(--color-option-picker))}.option-picker:focus{background:var(--fill-option-picker--focus,var(--fill-option-picker));border-color:var(--stroke-option-picker--focus,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--focus,var(--shadow-option-picker));color:var(--color-option-picker--focus,var(--color-option-picker))}.option-picker:active{background:var(--fill-option-picker--active,var(--fill-option-picker));border-color:var(--stroke-option-picker--active,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--active,var(--shadow-option-picker));color:var(--color-option-picker--active,var(--color-option-picker))}.option-picker::after{border:0 solid transparent;border-bottom-color:inherit;border-left-width:.35em;border-right-width:.35em;border-top-color:inherit;border-top-width:.45em;content:"";height:0;pointer-events:none;position:absolute;right:.5em;top:calc(50% - .225em);width:0}.option-picker--open.option-picker--down{border-bottom-left-radius:0;border-bottom-right-radius:0}.option-picker--open.option-picker--up{border-top-left-radius:0;border-top-right-radius:0}.option-picker--open::after{border-bottom-width:.45em;border-top-width:0}.option-picker--open .option-picker__options{background:var(--fill-option-picker__options--open,var(--fill-option-picker__options,var(--fill-option-picker)));border-color:var(--stroke-option-picker__options--open,var(--stroke-option-picker__options,var(--stroke-option-picker)));color:var(--color-option-picker__options--open,var(--stroke-option-picker__options,var(--stroke-option-picker)));display:block}.option-picker--open.option-picker--down .option-picker__options{border-top-left-radius:0;border-top-right-radius:0}.option-picker--open.option-picker--up .option-picker__options{border-bottom-left-radius:0;border-bottom-right-radius:0}.option-picker *{outline:0}.option-picker.option-picker--focus{background:var(--fill-option-picker--focus,var(--fill-option-picker));border-color:var(--stroke-option-picker--focus,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--focus,var(--shadow-option-picker));color:var(--color-option-picker--focus,var(--color-option-picker))}.option-picker.option-picker--disabled{background:var(--fill-option-picker--disabled,var(--fill-option-picker));border-color:var(--stroke-option-picker--disabled,var(--stroke-option-picker));box-shadow:var(--shadow-option-picker--disabled,var(--shadow-option-picker));color:var(--color-option-picker--disabled,var(--color-option-picker))}.option-picker__options{background:var(--fill-option-picker__options,var(--fill-option-picker));border:inherit;border-color:var(--stroke-option-picker__options,var(--stroke-option-picker));border-radius:var(--arc-option-picker__options,var(--arc-option-picker));box-shadow:var(--shadow-option-picker__options);color:var(--color-option-picker__options,var(--color-option-picker));display:none;overflow:auto;position:fixed;z-index:9999}.option-picker__options .option-picker__option{background:var(--fill-option-picker__option);color:var(--color-option-picker__option);cursor:pointer;display:block;font:inherit;overflow:hidden;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap}.option-picker__options .option-picker__option[hidden]{display:none}.option-picker__options .option-picker__option:not(.option-picker__option--disabled):hover{background:var(--fill-option-picker__option--hover,var(--fill-option-picker__option));color:var(--color-option-picker__option--hover,var(--color-option-picker__option))}.option-picker__options .option-picker__option:not(.option-picker__option--disabled):focus{background:var(--fill-option-picker__option--focus,var(--fill-option-picker__option));color:var(--color-option-picker__option--focus,var(--color-option-picker__option))}.option-picker__options .option-picker__option:not(.option-picker__option--disabled):active{background:var(--fill-option-picker__option--active,var(--fill-option-picker__option));color:var(--color-option-picker__option--active,var(--color-option-picker__option))}.option-picker__options .option-picker__option--selected{background:var(--fill-option-picker__option--selected,var(--fill-option-picker__option));color:var(--color-option-picker__option--selected,var(--color-option-picker__option))}.option-picker__options .option-picker__option--disabled{background:var(--fill-option-picker__option--disabled,var(--fill-option-picker__option));color:var(--color-option-picker__option--disabled,var(--color-option-picker__option));cursor:not-allowed}.option-picker__option-group{display:block;padding:0 .5em}.option-picker__option-group[title]::before{content:attr(title);display:block;font-weight:700;margin:0 -.5em;overflow:hidden;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap}.option-picker__option-group--disabled{color:var(--color-disabled__option-group--disabled,var(--color-disabled__option-group))}.option-picker__option-group .option-picker__option{margin:0 -.5em;padding-left:1.5em}.option-picker__source{left:-9999px;position:fixed;top:-9999px}.option-picker__source:disabled+.option-picker{background:var(--fill-option-picker--disabled,var(--fill-option-picker));border-color:var(--stroke-option-picker--disabled,var(--stroke-option-picker));color:var(--color-option-picker--disabled,var(--color-option-picker));cursor:not-allowed}.option-picker__source:disabled+.option-picker::after{border-top-color:var(--stroke-option-picker--disabled,var(--stroke-option-picker))}.option-picker__source:disabled+.option-picker .option-picker__option{color:var(--color-option-picker--disabled,var(--color-option-picker))}.option-picker__source:disabled+.option-picker .option-picker__options{background:var(--fill-option-picker__options--disabled,var(--fill-option-picker--disabled),var(--fill-option-picker));border-color:var(--stroke-option-picker__options--disabled,var(--stroke-option-picker--disabled,var(--stroke-option-picker)));color:var(--color-option-picker__options--disabled,var(--color-option-picker--disabled,var(--color-option-picker)))}.option-picker__source:disabled+.option-picker .option-picker__options,.option-picker__source:disabled+.option-picker .option-picker__values{pointer-events:none}.option-picker__source[size]+.option-picker{height:auto}.option-picker__source[size]+.option-picker::after{display:none}.option-picker__source[size]+.option-picker .option-picker__options{border-color:inherit;border-width:0;border-top-width:inherit;box-shadow:none;display:block;margin:.25em -.25em -.25em;position:relative;z-index:1}.option-picker__source[size]+.option-picker .option-picker__values{margin:0}.option-picker__source[multiple]+.option-picker .option-picker__values{white-space:normal}.option-picker__input span{display:block;height:100%;outline:0;position:relative;z-index:1}.option-picker__input span *{display:none}.option-picker__input span+span{opacity:.5;padding:inherit;right:0;white-space:nowrap;position:absolute;top:0;bottom:0;left:0;z-index:0}.option-picker__input{cursor:text}.option-picker__input,.option-picker__values{display:block;margin-right:1.25em;overflow:hidden;padding:0 .25em;position:relative;text-overflow:ellipsis;white-space:nowrap} \ No newline at end of file diff --git a/index.scss b/index.scss index f8f7186..8f623e3 100644 --- a/index.scss +++ b/index.scss @@ -277,8 +277,7 @@ $name: 'option-picker'; z-index: 1; * { // Remove (hide) line-break in option editor - display: inline; - font: inherit; + display: none; } + span { bottom: 0;