@paygreen/pgui 3.1.2 → 3.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +5 -5
- package/dist/index.mjs +657 -668
- package/dist/pgui.css +1 -1
- package/package.json +1 -1
- package/src/components/select/select.css +4 -0
package/dist/pgui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: .8;--PhoneInputInternationalIconGlobe-opacity: .65;--PhoneInputCountrySelect-marginRight: .35em;--PhoneInputCountrySelectArrow-width: .3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: .45;--PhoneInputCountrySelectArrow-color: currentColor;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.select-custom-container{font-size:var(--chakra-font-sizes-sm);min-width:200px;display:inline-block;width:100%}.select-custom-container--error .select-custom__control{border-color:var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control--is-focused{border-color:var(--chakra-colors-border-error)!important;box-shadow:0 0 0 1px var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control:hover{border-color:var(--chakra-colors-border-error)!important}.select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__control--is-disabled{opacity:.5!important;cursor:not-allowed!important}.select-custom__control--is-disabled .select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__single-value{color:var(--chakra-colors-fg)!important}.select-custom__control{border:1px solid var(--chakra-colors-border)!important}.select-custom__control,.select-custom__control--is-focused{min-height:var(--chakra-sizes-9)!important;background-color:transparent!important}.select-custom__control--is-focused{box-shadow:none!important;outline-offset:0!important;outline-width:var(--focus-ring-width, 1px)!important;outline-color:var(--chakra-colors-color-palette-focus-ring)!important;outline-style:var(--focus-ring-style, solid)!important;border-color:var(--chakra-colors-color-palette-focus-ring)!important}@keyframes pgui-select-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-custom__menu{z-index:1000!important;border:1px solid var(--chakra-colors-border)!important;background-color:var(--chakra-colors-bg-panel)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f!important;border-radius:var(--chakra-radii-md)!important;animation:pgui-select-menu-in .2s cubic-bezier(.4,0,.2,1)}.select-custom__menu-list{border-radius:var(--chakra-radii-md)!important;padding:0!important}.select-custom__multi-value{background-color:var(--chakra-colors-bg-panel)!important;border:1px solid var(--chakra-colors-border)!important;border-radius:var(--chakra-radii-sm)!important}.select-custom__multi-value__label{color:var(--chakra-colors-fg)!important}.select-custom__option{background-color:var(--chakra-colors-bg)!important;font-size:var(--chakra-font-sizes-sm)!important;padding:5px 10px!important}.select-custom__option:hover{background-color:var(--chakra-colors-bg-muted)!important;cursor:pointer!important}.select-custom__option--is-selected{color:var(--chakra-colors-fg)!important;background-color:var(--chakra-colors-bg-muted)!important}.select-custom__multi-value__label{font-size:var(--chakra-font-sizes-sm)!important}.select-custom__multi-value__remove{color:var(--chakra-colors-fg)!important}.select-custom__multi-value__remove:hover{cursor:pointer!important;background-color:var(--chakra-colors-danger-muted)!important}.select-custom__indicator svg{cursor:pointer;width:15px;height:15px}
|
|
1
|
+
:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: .8;--PhoneInputInternationalIconGlobe-opacity: .65;--PhoneInputCountrySelect-marginRight: .35em;--PhoneInputCountrySelectArrow-width: .3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: .45;--PhoneInputCountrySelectArrow-color: currentColor;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.select-custom-container{font-size:var(--chakra-font-sizes-sm);min-width:200px;display:inline-block;width:100%}.select-custom-container--error .select-custom__control{border-color:var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control--is-focused{border-color:var(--chakra-colors-border-error)!important;box-shadow:0 0 0 1px var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control:hover{border-color:var(--chakra-colors-border-error)!important}.select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__control--is-disabled{opacity:.5!important;cursor:not-allowed!important}.select-custom__control--is-disabled .select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__single-value{color:var(--chakra-colors-fg)!important}.select-custom__control{border:1px solid var(--chakra-colors-border)!important}.select-custom__control,.select-custom__control--is-focused{min-height:var(--chakra-sizes-9)!important;background-color:transparent!important}.select-custom__control--is-focused{box-shadow:none!important;outline-offset:0!important;outline-width:var(--focus-ring-width, 1px)!important;outline-color:var(--chakra-colors-color-palette-focus-ring)!important;outline-style:var(--focus-ring-style, solid)!important;border-color:var(--chakra-colors-color-palette-focus-ring)!important}@keyframes pgui-select-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-custom__menu{z-index:1000!important;border:1px solid var(--chakra-colors-border)!important;background-color:var(--chakra-colors-bg-panel)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f!important;border-radius:var(--chakra-radii-md)!important;animation:pgui-select-menu-in .2s cubic-bezier(.4,0,.2,1)}.select-custom__menu-list{border-radius:var(--chakra-radii-md)!important;padding:0!important}.select-custom__multi-value{background-color:var(--chakra-colors-bg-panel)!important;border:1px solid var(--chakra-colors-border)!important;border-radius:var(--chakra-radii-sm)!important}.select-custom__multi-value__label{color:var(--chakra-colors-fg)!important}.select-custom__option{background-color:var(--chakra-colors-bg)!important;font-size:var(--chakra-font-sizes-sm)!important;padding:5px 10px!important}.select-custom__option:hover{background-color:var(--chakra-colors-bg-muted)!important;cursor:pointer!important}.select-custom__option--is-focused{background-color:var(--chakra-colors-bg-muted)!important}.select-custom__option--is-selected{color:var(--chakra-colors-fg)!important;background-color:var(--chakra-colors-bg-muted)!important}.select-custom__multi-value__label{font-size:var(--chakra-font-sizes-sm)!important}.select-custom__multi-value__remove{color:var(--chakra-colors-fg)!important}.select-custom__multi-value__remove:hover{cursor:pointer!important;background-color:var(--chakra-colors-danger-muted)!important}.select-custom__indicator svg{cursor:pointer;width:15px;height:15px}
|
package/package.json
CHANGED
|
@@ -100,6 +100,10 @@
|
|
|
100
100
|
cursor: pointer !important;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
+
.select-custom__option--is-focused {
|
|
104
|
+
background-color: var(--chakra-colors-bg-muted) !important;
|
|
105
|
+
}
|
|
106
|
+
|
|
103
107
|
.select-custom__option--is-selected {
|
|
104
108
|
color: var(--chakra-colors-fg) !important;
|
|
105
109
|
background-color: var(--chakra-colors-bg-muted) !important;
|