🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@spectrum-web-components/checkbox
Advanced tools
@spectrum-web-components/checkbox - npm Package Compare versions
Comparing version 0.5.4 to 0.5.5-alpha.60
@@ -19,2 +19,7 @@ { | ||
| { | ||
| "name": "emphasized", | ||
| "type": "boolean", | ||
| "default": "false" | ||
| }, | ||
| { | ||
| "name": "checked", | ||
@@ -61,2 +66,8 @@ "type": "boolean", | ||
| { | ||
| "name": "emphasized", | ||
| "attribute": "emphasized", | ||
| "type": "boolean", | ||
| "default": "false" | ||
| }, | ||
| { | ||
| "name": "checked", | ||
@@ -63,0 +74,0 @@ "attribute": "checked", |
@@ -21,3 +21,3 @@ { | ||
| ], | ||
| "version": "0.5.4", | ||
| "version": "0.5.5-alpha.60+a478c2c4", | ||
| "description": "", | ||
@@ -52,12 +52,13 @@ "main": "src/index.js", | ||
| "devDependencies": { | ||
| "@spectrum-css/checkbox": "^3.0.0-beta.3" | ||
| "@spectrum-css/checkbox": "^3.0.0-beta.5", | ||
| "@spectrum-web-components/field-group": "^0.0.2-alpha.1214+a478c2c4" | ||
| }, | ||
| "dependencies": { | ||
| "@spectrum-web-components/base": "^0.1.3", | ||
| "@spectrum-web-components/icon": "^0.6.3", | ||
| "@spectrum-web-components/icons-ui": "^0.3.3", | ||
| "@spectrum-web-components/shared": "^0.7.4", | ||
| "@spectrum-web-components/base": "^0.1.4-alpha.60+a478c2c4", | ||
| "@spectrum-web-components/icon": "^0.6.4-alpha.60+a478c2c4", | ||
| "@spectrum-web-components/icons-ui": "^0.3.4-alpha.60+a478c2c4", | ||
| "@spectrum-web-components/shared": "^0.7.5-alpha.60+a478c2c4", | ||
| "tslib": "^2.0.0" | ||
| }, | ||
| "gitHead": "d57ea3ab83d9c16738fdd95d326e3082b1f997e2" | ||
| "gitHead": "a478c2c484b45e88c5d8b5cc64a255e31d0a3829" | ||
| } |
@@ -38,5 +38,5 @@ ## Description | ||
| Standard checkboxes are the default style for checkboxes. The blue color | ||
| provides a visual prominence that is optimal for forms, settings, lists or grids | ||
| of assets, etc. where the checkboxes need to be noticed. | ||
| Standard checkboxes are the default style for checkboxes. They are optimal for | ||
| application panels where all visual elements are monochrome in order to direct | ||
| focus to the content. | ||
@@ -68,8 +68,7 @@ ```html-live | ||
| ### Quiet checkboxes | ||
| ### Emphasized checkboxes | ||
| Quiet checkboxes are a secondary style for checkboxes. The gray color provides a | ||
| less prominent style than the standard checkboxes. They are optimal for | ||
| application panels where all visual elements are monochrome in order to direct | ||
| focus to the content. | ||
| Emphasized checkboxes are a secondary style for checkboxes. The blue color | ||
| provides a visual prominence that is optimal for forms, settings, lists or grids | ||
| of assets, etc. where the checkboxes need to be noticed. | ||
@@ -80,5 +79,5 @@ ```html-live | ||
| <h4 class="spectrum-Heading--subtitle1">Default</h4> | ||
| <sp-checkbox quiet>Web component</sp-checkbox> | ||
| <sp-checkbox quiet checked>Web component</sp-checkbox> | ||
| <sp-checkbox quiet indeterminate>Web component</sp-checkbox> | ||
| <sp-checkbox emphasized>Web component</sp-checkbox> | ||
| <sp-checkbox emphasized checked>Web component</sp-checkbox> | ||
| <sp-checkbox emphasized indeterminate>Web component</sp-checkbox> | ||
| </div> | ||
@@ -85,0 +84,0 @@ |
@@ -14,17 +14,13 @@ /* | ||
| const styles = css ` | ||
| :host([dir=ltr]){margin-right:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2)}:host{align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}:host([dir=ltr]) #input{left:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*-1)}:host([dir=rtl]) #input{right:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*-1)}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;width:calc(100% + var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| :host{align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height, | ||
| var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-checkbox-text-font-style,var(--spectrum-global-font-style-regular));line-height:var(--spectrum-checkbox-text-line-height,var(--spectrum-alias-body-text-line-height));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height, | ||
| var(--spectrum-global-dimension-size-400)) - var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-emphasized-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius, | ||
| var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;forced-color-adjust:none;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius, | ||
| var(--spectrum-alias-border-radius-small)) + var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #box:before,:host([quiet][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]:hover) #input:checked+#box:before,:host([quiet][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]:active) #input:checked+#box:before,:host([quiet][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}:host([disabled][checked]) #input+#box:before,:host([disabled][checked]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([invalid][indeterminate]) #box:before,:host([invalid][indeterminate]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))} | ||
| var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}:host{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}:host([disabled][checked]) #input+#box:before,:host([disabled][checked]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([invalid][indeterminate]) #box:before,:host([invalid][indeterminate]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))} | ||
| `; | ||
| export default styles; | ||
| //# sourceMappingURL=checkbox.css.js.map |
@@ -14,16 +14,12 @@ /* | ||
| const styles = css` | ||
| :host([dir=ltr]){margin-right:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2)}:host{align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}:host([dir=ltr]) #input{left:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*-1)}:host([dir=rtl]) #input{right:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*-1)}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;width:calc(100% + var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| :host{align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height, | ||
| var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-checkbox-text-font-style,var(--spectrum-global-font-style-regular));line-height:var(--spectrum-checkbox-text-line-height,var(--spectrum-alias-body-text-line-height));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height, | ||
| var(--spectrum-global-dimension-size-400)) - var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-emphasized-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius, | ||
| var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;forced-color-adjust:none;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius, | ||
| var(--spectrum-alias-border-radius-small)) + var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #box:before,:host([quiet][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]:hover) #input:checked+#box:before,:host([quiet][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]:active) #input:checked+#box:before,:host([quiet][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}:host([disabled][checked]) #input+#box:before,:host([disabled][checked]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([invalid][indeterminate]) #box:before,:host([invalid][indeterminate]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))} | ||
| var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}:host{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}:host([disabled][checked]) #input+#box:before,:host([disabled][checked]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([invalid][indeterminate]) #box:before,:host([invalid][indeterminate]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))} | ||
| `; | ||
| export default styles; |
@@ -7,2 +7,3 @@ import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base'; | ||
| invalid: boolean; | ||
| emphasized: boolean; | ||
| static get styles(): CSSResultArray; | ||
@@ -9,0 +10,0 @@ protected render(): TemplateResult; |
@@ -25,2 +25,3 @@ /* | ||
| this.invalid = false; | ||
| this.emphasized = false; | ||
| } | ||
@@ -70,2 +71,5 @@ static get styles() { | ||
| ], Checkbox.prototype, "invalid", void 0); | ||
| __decorate([ | ||
| property({ type: Boolean, reflect: true }) | ||
| ], Checkbox.prototype, "emphasized", void 0); | ||
| //# sourceMappingURL=Checkbox.js.map |
@@ -37,2 +37,5 @@ /* | ||
| @property({ type: Boolean, reflect: true }) | ||
| public emphasized = false; | ||
| public static get styles(): CSSResultArray { | ||
@@ -39,0 +42,0 @@ return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles]; |
@@ -14,17 +14,13 @@ /* | ||
| const styles = css ` | ||
| :host([dir=ltr]){margin-right:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2)}:host{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}:host([dir=ltr]) #input{left:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*-1)}:host([dir=rtl]) #input{right:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*-1)}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;width:calc(100% + var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| :host{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height, | ||
| var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-checkbox-text-font-style,var(--spectrum-global-font-style-regular));line-height:var(--spectrum-checkbox-text-line-height,var(--spectrum-alias-body-text-line-height));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height, | ||
| var(--spectrum-global-dimension-size-400)) - var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-emphasized-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius, | ||
| var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;forced-color-adjust:none;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius, | ||
| var(--spectrum-alias-border-radius-small)) + var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #box:before,:host([quiet][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]:hover) #input:checked+#box:before,:host([quiet][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]:active) #input:checked+#box:before,:host([quiet][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))} | ||
| var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))} | ||
| `; | ||
| export default styles; | ||
| //# sourceMappingURL=spectrum-checkbox.css.js.map |
@@ -14,16 +14,12 @@ /* | ||
| const styles = css` | ||
| :host([dir=ltr]){margin-right:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2)}:host{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}:host([dir=ltr]) #input{left:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*-1)}:host([dir=rtl]) #input{right:calc(var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*-1)}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;width:calc(100% + var(--spectrum-checkbox-cursor-hit-x, | ||
| var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| :host{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height, | ||
| var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-checkbox-text-font-style,var(--spectrum-global-font-style-regular));line-height:var(--spectrum-checkbox-text-line-height,var(--spectrum-alias-body-text-line-height));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height, | ||
| var(--spectrum-global-dimension-size-400)) - var(--spectrum-checkbox-box-size, | ||
| var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-emphasized-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius, | ||
| var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;forced-color-adjust:none;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius, | ||
| var(--spectrum-alias-border-radius-small)) + var(--spectrum-alias-focus-ring-gap, | ||
| var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #box:before,:host([quiet][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]:hover) #input:checked+#box:before,:host([quiet][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]:active) #input:checked+#box:before,:host([quiet][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))} | ||
| var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))} | ||
| `; | ||
| export default styles; |
@@ -25,6 +25,2 @@ /* | ||
| type: 'boolean', | ||
| selector: '.spectrum-Checkbox--quiet', | ||
| }, | ||
| { | ||
| type: 'boolean', | ||
| selector: ':disabled', | ||
@@ -42,2 +38,7 @@ }, | ||
| }, | ||
| { | ||
| type: 'boolean', | ||
| name: 'emphasized', | ||
| selector: '.spectrum-Checkbox--emphasized', | ||
| }, | ||
| ], | ||
@@ -44,0 +45,0 @@ ids: [ |
| { | ||
| "custom-properties": { | ||
| "--spectrum-checkbox-cursor-hit-x": "var(--spectrum-global-dimension-size-100)", | ||
| "--spectrum-checkbox-height": "var(--spectrum-global-dimension-size-400)", | ||
@@ -10,2 +9,4 @@ "--spectrum-checkbox-box-size": "var(--spectrum-global-dimension-size-175)", | ||
| "--spectrum-checkbox-text-font-weight": "var(--spectrum-global-font-weight-regular)", | ||
| "--spectrum-checkbox-text-font-style": "var(--spectrum-global-font-style-regular)", | ||
| "--spectrum-checkbox-text-line-height": "var(--spectrum-alias-body-text-line-height)", | ||
| "--spectrum-checkbox-box-border-radius": "var(--spectrum-alias-border-radius-small)", | ||
@@ -17,14 +18,13 @@ "--spectrum-checkbox-box-border-size": "var(--spectrum-alias-border-size-thick)", | ||
| "--spectrum-checkbox-checkmark-color": "var(--spectrum-global-color-gray-75)", | ||
| "--spectrum-checkbox-emphasized-box-border-color": "var(--spectrum-global-color-gray-600)", | ||
| "--spectrum-checkbox-emphasized-box-background-color": "var(--spectrum-global-color-gray-75)", | ||
| "--spectrum-checkbox-emphasized-text-color": "var(--spectrum-alias-text-color)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-selected": "var(--spectrum-global-color-blue-500)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-selected-hover": "var(--spectrum-global-color-blue-600)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-selected-down": "var(--spectrum-global-color-blue-700)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-hover": "var(--spectrum-global-color-gray-700)", | ||
| "--spectrum-checkbox-emphasized-text-color-hover": "var(--spectrum-alias-text-color-hover)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-down": "var(--spectrum-global-color-gray-800)", | ||
| "--spectrum-checkbox-emphasized-text-color-down": "var(--spectrum-alias-text-color-down)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-disabled": "var(--spectrum-global-color-gray-400)", | ||
| "--spectrum-checkbox-emphasized-box-background-color-disabled": "var(--spectrum-global-color-gray-75)", | ||
| "--spectrum-checkbox-box-border-color": "var(--spectrum-global-color-gray-600)", | ||
| "--spectrum-checkbox-box-background-color": "var(--spectrum-global-color-gray-75)", | ||
| "--spectrum-checkbox-box-border-color-selected": "var(--spectrum-global-color-gray-700)", | ||
| "--spectrum-checkbox-box-border-color-selected-hover": "var(--spectrum-global-color-gray-800)", | ||
| "--spectrum-checkbox-box-border-color-selected-down": "var(--spectrum-global-color-gray-900)", | ||
| "--spectrum-checkbox-box-border-color-hover": "var(--spectrum-global-color-gray-700)", | ||
| "--spectrum-checkbox-text-color-hover": "var(--spectrum-alias-text-color-hover)", | ||
| "--spectrum-checkbox-box-border-color-down": "var(--spectrum-global-color-gray-800)", | ||
| "--spectrum-checkbox-text-color-down": "var(--spectrum-alias-text-color-down)", | ||
| "--spectrum-checkbox-box-border-color-disabled": "var(--spectrum-global-color-gray-400)", | ||
| "--spectrum-checkbox-box-background-color-disabled": "var(--spectrum-global-color-gray-75)", | ||
| "--spectrum-checkbox-text-color-disabled": "var(--spectrum-alias-text-color-disabled)", | ||
@@ -34,5 +34,7 @@ "--spectrum-checkbox-box-border-color-key-focus": "var(--spectrum-global-color-gray-700)", | ||
| "--spectrum-checkbox-focus-ring-color-key-focus": "var(--spectrum-alias-focus-ring-color)", | ||
| "--spectrum-checkbox-quiet-box-border-color-selected": "var(--spectrum-global-color-gray-700)", | ||
| "--spectrum-checkbox-quiet-box-border-color-selected-hover": "var(--spectrum-global-color-gray-800)", | ||
| "--spectrum-checkbox-quiet-box-border-color-selected-down": "var(--spectrum-global-color-gray-900)", | ||
| "--spectrum-checkbox-box-border-color-selected-key-focus": "var(--spectrum-global-color-gray-800)", | ||
| "--spectrum-checkbox-text-color-key-focus": "var(--spectrum-alias-text-color-hover)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-selected": "var(--spectrum-global-color-blue-500)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-selected-hover": "var(--spectrum-global-color-blue-600)", | ||
| "--spectrum-checkbox-emphasized-box-border-color-selected-down": "var(--spectrum-global-color-blue-700)", | ||
| "--spectrum-checkbox-box-border-color-error": "var(--spectrum-global-color-red-500)", | ||
@@ -43,4 +45,6 @@ "--spectrum-checkbox-text-color-error": "var(--spectrum-global-color-red-600)", | ||
| "--spectrum-checkbox-box-border-color-error-down": "var(--spectrum-global-color-red-700)", | ||
| "--spectrum-checkbox-text-color-error-down": "var(--spectrum-global-color-red-700)" | ||
| "--spectrum-checkbox-text-color-error-down": "var(--spectrum-global-color-red-700)", | ||
| "--spectrum-checkbox-focus-ring-gap-key-focus": "var(--spectrum-alias-focus-ring-gap)", | ||
| "--spectrum-alias-background-color-transparent": "transparent" | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
156952
13.04%- Lines of code
1353
3.68%Worsened metrics
- Dev dependency count
2
100%- Number of lines in readme file
115
-0.86%- Number of medium supply chain risk alerts
1
Infinity%Dependency changes
+ Added
@spectrum-web-components/base@0.1.4-alpha.178(transitive)+ Added
@spectrum-web-components/icon@0.6.4-alpha.178(transitive)+ Added
@spectrum-web-components/icons-ui@0.3.4-alpha.178(transitive)+ Added
@spectrum-web-components/iconset@0.2.6-alpha.178(transitive)+ Added
@spectrum-web-components/shared@0.7.5-alpha.178(transitive)+ Added
@spectrum-web-components/styles@0.6.2-alpha.263(transitive)+ Added
@spectrum-web-components/theme@0.6.4-alpha.178(transitive)- Removed
@spectrum-web-components/base@0.1.3(transitive)- Removed
@spectrum-web-components/icon@0.6.3(transitive)- Removed
@spectrum-web-components/icons-ui@0.3.3(transitive)- Removed
@spectrum-web-components/iconset@0.2.5(transitive)- Removed
@spectrum-web-components/shared@0.7.4(transitive)- Removed
@spectrum-web-components/styles@0.6.1(transitive)- Removed
@spectrum-web-components/theme@0.6.3(transitive)Updated
@spectrum-web-components/base@^0.1.4-alpha.60+a478c2c4Updated
@spectrum-web-components/icon@^0.6.4-alpha.60+a478c2c4Updated
@spectrum-web-components/icons-ui@^0.3.4-alpha.60+a478c2c4Updated
@spectrum-web-components/shared@^0.7.5-alpha.60+a478c2c4