@orangesk/orange-design-system 2.0.0-beta.47 → 2.0.0-beta.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/BlockAction/style.css +1 -1
- package/build/components/BlockAction/style.css.map +1 -1
- package/build/components/Breadcrumbs/style.css +1 -1
- package/build/components/Breadcrumbs/style.css.map +1 -1
- package/build/components/DocumentationSidebar/style.css +1 -1
- package/build/components/DocumentationSidebar/style.css.map +1 -1
- package/build/components/Icon/style.css +1 -1
- package/build/components/Icon/style.css.map +1 -1
- package/build/components/Loader/style.css +1 -1
- package/build/components/Loader/style.css.map +1 -1
- package/build/components/Megamenu/style.css +1 -1
- package/build/components/Megamenu/style.css.map +1 -1
- package/build/components/Pagination/style.css +1 -1
- package/build/components/Pagination/style.css.map +1 -1
- package/build/components/PromotionCard/style.css +1 -1
- package/build/components/PromotionCard/style.css.map +1 -1
- package/build/components/Section/style.css +1 -1
- package/build/components/Section/style.css.map +1 -1
- package/build/components/SocialButton/style.css +1 -1
- package/build/components/SocialButton/style.css.map +1 -1
- package/build/components/Stepbar/style.css +1 -1
- package/build/components/Stepbar/style.css.map +1 -1
- package/build/components/Table/style.css +1 -1
- package/build/components/Table/style.css.map +1 -1
- package/build/components/Tag/style.css +1 -1
- package/build/components/Tag/style.css.map +1 -1
- package/build/components/Tile/style.css +1 -1
- package/build/components/Tile/style.css.map +1 -1
- package/build/components/index.js +1 -1
- package/build/components/index.js.map +1 -1
- package/build/components/tsconfig.tsbuildinfo +1 -1
- package/build/components/types/index.d.ts +4 -11
- package/build/components/types/src/components/Carousel/Carousel.static.d.ts +4 -1
- package/build/components/types/src/components/Forms/Autocomplete/Autocomplete.static.d.ts +11 -0
- package/build/components/types/src/components/Forms/Group/Group.d.ts +1 -1
- package/build/components/types/src/components/Tile/Tile.d.ts +3 -11
- package/build/lib/base.css +1 -1
- package/build/lib/base.css.map +1 -1
- package/build/lib/components.css +1 -1
- package/build/lib/components.css.map +1 -1
- package/build/lib/megamenu.css +1 -1
- package/build/lib/megamenu.css.map +1 -1
- package/build/lib/scripts.js +1 -1
- package/build/lib/scripts.js.map +1 -1
- package/build/lib/style.css +1 -1
- package/build/lib/style.css.map +1 -1
- package/build/lib/tsconfig.tsbuildinfo +1 -1
- package/build/lib/utilities.css +1 -1
- package/build/lib/utilities.css.map +1 -1
- package/build/search-index.json +4 -4
- package/package.json +17 -17
- package/src/components/BlockAction/styles/style.scss +6 -4
- package/src/components/Breadcrumbs/styles/style.scss +2 -1
- package/src/components/Carousel/Carousel.static.ts +29 -1
- package/src/components/Carousel/tests/Carousel.static.test.jsx +50 -0
- package/src/components/DocumentationSidebar/DocumentationSidebar.tsx +21 -34
- package/src/components/DocumentationSidebar/styles/style.scss +0 -6
- package/src/components/Forms/Autocomplete/Autocomplete.static.ts +190 -14
- package/src/components/Forms/Autocomplete/styles/style.scss +61 -8
- package/src/components/Forms/Autocomplete/tests/Autocomplete.static.test.ts +187 -0
- package/src/components/Forms/DatePicker/styles/style.scss +1 -2
- package/src/components/Forms/Group/Group.tsx +4 -1
- package/src/components/Forms/Group/styles/config.scss +1 -1
- package/src/components/Forms/Group/styles/mixins.scss +17 -0
- package/src/components/Forms/Group/tests/Group.unit.test.jsx +9 -0
- package/src/components/Forms/TextArea/styles/config.scss +1 -0
- package/src/components/Forms/TextArea/styles/mixins.scss +7 -1
- package/src/components/Forms/TextInput/styles/config.scss +3 -1
- package/src/components/Forms/TextInput/styles/mixins.scss +7 -1
- package/src/components/Forms/TextInput/styles/style.scss +17 -12
- package/src/components/Forms/styles/config.scss +3 -2
- package/src/components/Icon/styles/style.scss +2 -1
- package/src/components/Loader/styles/style.scss +0 -2
- package/src/components/Pagination/styles/mixins.scss +8 -6
- package/src/components/Pagination/styles/style.scss +0 -4
- package/src/components/Preview/PreviewGenerator.tsx +15 -2
- package/src/components/PromotionCard/styles/mixins.scss +2 -1
- package/src/components/Section/styles/mixins.scss +27 -5
- package/src/components/SocialButton/styles/config.scss +2 -2
- package/src/components/Stepbar/styles/style.scss +4 -2
- package/src/components/Table/styles/mixins.scss +6 -3
- package/src/components/Tag/styles/config.scss +1 -1
- package/src/components/Tag/styles/style.scss +22 -5
- package/src/components/Tile/Tile.tsx +18 -42
- package/src/components/Tile/styles/mixins.scss +45 -47
- package/src/components/Tile/styles/style.scss +5 -17
- package/src/components/Tile/tests/Tile.unit.test.jsx +9 -78
- package/src/styles/tokens/color-vars.scss +0 -2
- package/src/styles/utilities/color.scss +0 -153
- package/src/components/Tile/CHANGELOG.md +0 -28
- package/src/components/Tile/styles/config.scss +0 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,OAGE,+BAAgC,CADhC,sBAAuB,CADvB,UAGF,CACA,oBAIE,
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,OAGE,+BAAgC,CADhC,sBAAuB,CADvB,UAGF,CACA,oBAIE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAAmB,CAHnB,eAAgB,CAChB,qBAKF,CACA,oCACE,oBAEE,kBAAmB,CAEnB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,oCACE,oBAEE,kBAAmB,CAEnB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,gBAGE,oDAAqD,CACrD,eAAgB,CAFhB,eAAgB,CADhB,qBAIF,CACA,UAEE,kDAAmD,CADnD,mBAEF,CACA,gBACE,uBACF,CACA,gBACE,eACF,CACA,mBACE,+CACF,CACA,gBACE,qBAAsB,CACtB,iDACF,CACA,kCACE,2CACF,CACA,0CACE,kDACF,CACA,gBACE,UACF,CACA,uCACE,yBACE,YACF,CACA,iFAGE,aACF,CACA,4BACE,iBACF,CACA,uCACE,eACF,CACA,4BAEE,kBAAmB,CADnB,iBAAkB,CAElB,yBACF,CACA,mCACE,wBAAyB,CACzB,aAAc,CACd,eAAgB,CAChB,sBACF,CACA,wCACE,cACF,CACF,CACA,kBAIE,gCAAiC,CAHjC,aAAc,CAEd,eAAgB,CADhB,UAGF,CACA,0CAEE,kBACF,CACA,uCACE,sBAIE,gCAAiC,CAHjC,aAAc,CAEd,eAAgB,CADhB,UAGF,CACA,kDAEE,kBACF,CACF,CACA,uCACE,sBAIE,gCAAiC,CAHjC,aAAc,CAEd,eAAgB,CADhB,UAGF,CACA,kDAEE,kBACF,CACF,CACA,wCACE,sBAIE,gCAAiC,CAHjC,aAAc,CAEd,eAAgB,CADhB,UAGF,CACA,kDAEE,kBACF,CACF,CACA,wCACE,sBAIE,gCAAiC,CAHjC,aAAc,CAEd,eAAgB,CADhB,UAGF,CACA,kDAEE,kBACF,CACF,CACA,oBAME,cAAe,CAJf,oBAAqB,CAErB,cAAe,CAHf,iBAAkB,CAIlB,qBAAsB,CAFtB,aAIF,CACA,qDAIE,iCAAkC,CAClC,kCAAmC,CAJnC,UAAW,CAEX,aAAe,CADf,iBAAkB,CAIlB,8BACF,CACA,2BAEE,oDAAqD,CADrD,OAEF,CACA,0BAEE,iDAAkD,CADlD,QAEF,CAIA,kGACE,UACF,CACA,eACE,4CACF,CACA,sCACE,wBACF,CACA,qBAEE,0BAA4B,CAD5B,yBAEF,CACA,qBACE,SACF,CACA,mBACE,UACF,CACF","file":"style.css","sourcesContent":["@layer components {\n .table {\n width: 100%;\n margin-bottom: 1.875rem;\n color: var(--color-text-default);\n }\n .table td,\n .table th {\n padding: 1.25rem;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n @media screen and (min-width: 768px) {\n .table td,\n .table th {\n font-size: 1.125rem;\n line-height: 1.625rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n @media screen and (min-width: 992px) {\n .table td,\n .table th {\n font-size: 1.125rem;\n line-height: 1.625rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n .table thead th {\n vertical-align: bottom;\n text-align: left;\n border-bottom: 2px solid var(--color-border-contrast);\n font-weight: 700;\n }\n .table tr {\n line-height: 1.25rem;\n border-bottom: 1px solid var(--color-border-strong);\n }\n .table thead > tr {\n border-bottom-width: 2px;\n }\n .table tbody > th {\n font-weight: 400;\n }\n .table tbody + tbody {\n border-top: 2px solid var(--color-border-strong);\n }\n .table > tfoot > tr {\n border-bottom-width: 0;\n border-top: 2px solid var(--color-border-contrast);\n }\n .table > tfoot > tr:not(:first-child) {\n border-top-color: var(--color-border-strong);\n }\n .table--striped tbody tr:nth-of-type(odd) {\n background-color: var(--color-background-secondary);\n }\n .table--compact {\n width: auto;\n }\n @media screen and (max-width: 991.98px) {\n .table--responsive thead {\n display: none;\n }\n .table--responsive tbody,\n .table--responsive tbody tr,\n .table--responsive tbody td {\n display: block;\n }\n .table--responsive tbody tr {\n padding: 0.625rem 0;\n }\n .table--responsive tbody tr:last-child {\n margin-bottom: 0;\n }\n .table--responsive tbody td {\n padding: 1.25rem 0;\n border-bottom: none;\n text-align: left !important;\n }\n .table--responsive tbody td:before {\n content: attr(data-label);\n display: block;\n font-weight: 700;\n margin-bottom: 0.3125rem;\n }\n .table--responsive tbody td:first-child {\n padding-left: 0;\n }\n }\n .table-scrollable {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .table-scrollable td,\n .table-scrollable th {\n white-space: nowrap;\n }\n @media screen and (max-width: 767.98px) {\n .table-scrollable--sm {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .table-scrollable--sm td,\n .table-scrollable--sm th {\n white-space: nowrap;\n }\n }\n @media screen and (max-width: 991.98px) {\n .table-scrollable--md {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .table-scrollable--md td,\n .table-scrollable--md th {\n white-space: nowrap;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .table-scrollable--lg {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .table-scrollable--lg td,\n .table-scrollable--lg th {\n white-space: nowrap;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .table-scrollable--xl {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .table-scrollable--xl td,\n .table-scrollable--xl th {\n white-space: nowrap;\n }\n }\n .table__sort-button {\n position: relative;\n display: inline-block;\n width: 1.25rem;\n height: 1.25rem;\n vertical-align: bottom;\n cursor: pointer;\n }\n .table__sort-button::before, .table__sort-button::after {\n content: \"\";\n position: absolute;\n left: 0.3125rem;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n transition: opacity 0.1s ease 0s;\n }\n .table__sort-button::before {\n top: 4px;\n border-bottom: 5px solid var(--color-border-contrast);\n }\n .table__sort-button::after {\n top: 12px;\n border-top: 5px solid var(--color-border-contrast);\n }\n [aria-sort=descending] .table__sort-button::before {\n opacity: 0.3;\n }\n [aria-sort=ascending] .table__sort-button::after {\n opacity: 0.3;\n }\n .table__subrow {\n background-color: var(--color-surface-subtle);\n }\n .table button[aria-expanded=true] > svg {\n transform: rotate(180deg);\n }\n .table__cell--expand {\n padding-top: 4px !important;\n padding-bottom: 0 !important;\n }\n .table__cell--shrink {\n width: 0.1%;\n }\n .table__cell--fill {\n width: 100%;\n }\n}"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.tag{border-radius:9999px;border-width:1px;box-decoration-break:clone;display:inline-flex;font-size:.875rem!important;font-weight:700;line-height:1rem!important;padding:.4375rem .75rem;vertical-align:baseline}.tag--small{border-width:2px;font-size:.75rem!important;font-weight:400;line-height:.875rem!important;padding:.125rem .5rem}.tag--large{border-width:2px;font-size:1rem!important;font-weight:700;line-height:1.125rem!important;padding:.6875rem .9375rem}.tag{background-color:var(--color-fill-subtle);color:var(--color-text-default)}.tag--orange{background-color:var(--tag-orange);color:var(--tag-text-dark)}.tag--black{background-color:var(--tag-black);color:var(--tag-text-light)}.tag--yellow{background-color:var(--tag-yellow)}.tag--green,.tag--yellow{color:var(--tag-text-dark)}.tag--green{background-color:var(--tag-green)}.tag--blue{background-color:var(--tag-blue);color:var(--tag-text-dark)}.tag--success{background-color:var(--tag-success)}.tag--danger,.tag--success{color:var(--tag-text-light)}.tag--danger{background-color:var(--tag-danger)}.tag--info{background-color:var(--tag-info);color:var(--tag-text-light)}.tag--warning{background-color:var(--tag-warning);color:var(--tag-text-dark)}.tag--transparent{background-color:transparent;color:var(--color-text-default)}.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]){background-color:var(--color-surface-moderate)}.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a),.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button){background-color:var(--color-surface-moderate)}.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a):not([disabled]):not([aria-disabled=true]):focus-visible,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a):not([disabled]):not([aria-disabled=true]):hover,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button):not([disabled]):not([aria-disabled=true]):focus-visible,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button):not([disabled]):not([aria-disabled=true]):hover{background-color:#999}.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a):not([disabled]):not([aria-disabled=true]).is-active,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a):not([disabled]):not([aria-disabled=true]):active,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button):not([disabled]):not([aria-disabled=true]).is-active,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button):not([disabled]):not([aria-disabled=true]):active{background-color:var(--color-background-contrast);color:var(--color-text-inverse)}.background-secondary .tag--transparent{background-color:var(--color-surface-primary)}.tag--transparent{border-color:var(--color-border-strong);border-style:solid}.tag--transparent:where(button){background-color:transparent;color:var(--color-text-default);cursor:pointer;outline-offset:2px}@media (hover:hover){.tag--transparent:where(button):hover{border-color:var(--color-fill-secondary)}}.tag--transparent:where(button):focus-visible{background-color:transparent;border-color:transparent;color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag--transparent:where(button).is-active,.tag--transparent:where(button):active{background-color:var(--color-fill-secondary);border-color:var(--color-fill-secondary);color:var(--color-text-inverse);z-index:2}.tag--transparent:where(button){z-index:2}.tag--transparent:where(a){background-color:transparent;color:var(--color-text-default);cursor:pointer;outline-offset:2px}@media (hover:hover){.tag--transparent:where(a):hover{border-color:var(--color-fill-secondary)}}.tag--transparent:where(a):focus-visible{background-color:transparent;border-color:transparent;color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag--transparent:where(a).is-active,.tag--transparent:where(a):active{background-color:var(--color-fill-secondary);border-color:var(--color-fill-secondary);color:var(--color-text-inverse);z-index:2}.tag--transparent:where(a){text-decoration:none;z-index:2}.tag--transparent[aria-disabled=true],.tag--transparent[disabled]{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-disabled);cursor:not-allowed}.tag:not(.tag--transparent):where(button){background-color:var(--color-fill-subtle);color:var(--color-text-default);cursor:pointer;outline-offset:2px}@media (hover:hover){.tag:not(.tag--transparent):where(button):hover{background-color:var(--color-fill-disabled);color:var(--color-text-default)}}.tag:not(.tag--transparent):where(button):focus-visible{background-color:var(--color-fill-subtle);color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag:not(.tag--transparent):where(button).is-active,.tag:not(.tag--transparent):where(button):active{background-color:var(--color-background-contrast);color:var(--color-text-inverse);z-index:2}.tag:not(.tag--transparent):where(button){z-index:2}.tag:not(.tag--transparent):where(a){background-color:var(--color-fill-subtle);color:var(--color-text-default);cursor:pointer;outline-offset:2px}@media (hover:hover){.tag:not(.tag--transparent):where(a):hover{background-color:var(--color-fill-disabled);color:var(--color-text-default)}}.tag:not(.tag--transparent):where(a):focus-visible{background-color:var(--color-fill-subtle);color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag:not(.tag--transparent):where(a).is-active,.tag:not(.tag--transparent):where(a):active{background-color:var(--color-background-contrast);color:var(--color-text-inverse);z-index:2}.tag:not(.tag--transparent):where(a){text-decoration:none;z-index:2}.tag:not(.tag--transparent)[aria-disabled=true],.tag:not(.tag--transparent)[disabled]{background-color:var(--color-fill-subtle);color:var(--color-text-disabled);cursor:not-allowed}.tag__wrapper{align-items:center;display:inline-flex;position:relative}.tag__wrapper .tag{margin-right:.5rem;padding-right:2.375rem!important}.tag__wrapper .tag--large{margin-right:.5rem;padding-right:2.6875rem!important}.tag__action{background-color:var(--color-fill-moderate);box-decoration-break:clone;color:var(--color-text-default);cursor:pointer;display:inline-flex;outline-offset:2px;vertical-align:baseline}@media (hover:hover){.tag__action:hover{background-color:var(--color-fill-disabled);color:var(--color-text-default)}}.tag__action:focus-visible{background-color:var(--color-fill-subtle);color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag__action.is-active,.tag__action:active{background-color:var(--color-background-contrast);color:var(--color-text-inverse);z-index:2}.tag__action[aria-disabled=true],.tag__action[disabled]{background-color:var(--color-fill-moderate);color:var(--color-fill-subtle);cursor:not-allowed}.tag__action{align-items:center;aspect-ratio:1;border-radius:9999px;display:flex;margin-left:-2.375rem!important;padding:.4375rem;z-index:2}.tag__action--large{margin-left:-2.6875rem!important;padding:.59375rem}}
|
|
1
|
+
@layer components{.tag{border-radius:9999px;border-width:1px;box-decoration-break:clone;display:inline-flex;font-size:.875rem!important;font-weight:700;line-height:1rem!important;padding:.4375rem .75rem;vertical-align:baseline}.tag--small{border-width:2px;font-size:.75rem!important;font-weight:400;line-height:.875rem!important;padding:.125rem .5rem}.tag--large{border-width:2px;font-size:1rem!important;font-weight:700;line-height:1.125rem!important;padding:.6875rem .9375rem}.tag{background-color:var(--color-fill-subtle);color:var(--color-text-default)}.tag--orange{background-color:var(--tag-orange);color:var(--tag-text-dark)}.tag--black{background-color:var(--tag-black);color:var(--tag-text-light)}.tag--yellow{background-color:var(--tag-yellow)}.tag--green,.tag--yellow{color:var(--tag-text-dark)}.tag--green{background-color:var(--tag-green)}.tag--blue{background-color:var(--tag-blue);color:var(--tag-text-dark)}.tag--success{background-color:var(--tag-success)}.tag--danger,.tag--success{color:var(--tag-text-light)}.tag--danger{background-color:var(--tag-danger)}.tag--info{background-color:var(--tag-info);color:var(--tag-text-light)}.tag--warning{background-color:var(--tag-warning);color:var(--tag-text-dark)}.tag--transparent{background-color:transparent;color:var(--color-text-default)}.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]){background-color:var(--color-surface-moderate)}.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a),.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button){background-color:var(--color-surface-moderate)}.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a):not([disabled]):not([aria-disabled=true]):focus-visible,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a):not([disabled]):not([aria-disabled=true]):hover,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button):not([disabled]):not([aria-disabled=true]):focus-visible,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button):not([disabled]):not([aria-disabled=true]):hover{background-color:#999}.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a):not([disabled]):not([aria-disabled=true]).is-active,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(a):not([disabled]):not([aria-disabled=true]):active,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button):not([disabled]):not([aria-disabled=true]).is-active,.background-secondary .tag:not([class*="--orange"]):not([class*="--black"]):not([class*="--yellow"]):not([class*="--green"]):not([class*="--blue"]):not([class*="--success"]):not([class*="--danger"]):not([class*="--info"]):not([class*="--warning"]):not([class*="--transparent"]):where(button):not([disabled]):not([aria-disabled=true]):active{background-color:var(--color-background-contrast);color:var(--color-text-inverse)}.tag--transparent{border-color:var(--color-border-strong);border-style:solid}.tag--transparent:where(button){background-color:transparent;color:var(--color-text-default);cursor:pointer;outline-offset:2px}@media (hover:hover){.tag--transparent:where(button):hover{border-color:var(--color-fill-secondary)}}.tag--transparent:where(button):focus-visible{background-color:transparent;border-color:transparent;color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag--transparent:where(button).is-active,.tag--transparent:where(button):active{background-color:var(--color-fill-secondary);border-color:var(--color-fill-secondary);color:var(--color-text-inverse);z-index:2}.tag--transparent:where(button){z-index:2}.tag--transparent:where(a){background-color:transparent;color:var(--color-text-default);cursor:pointer;outline-offset:2px}@media (hover:hover){.tag--transparent:where(a):hover{border-color:var(--color-fill-secondary)}}.tag--transparent:where(a):focus-visible{background-color:transparent;border-color:transparent;color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag--transparent:where(a).is-active,.tag--transparent:where(a):active{background-color:var(--color-fill-secondary);border-color:var(--color-fill-secondary);color:var(--color-text-inverse);z-index:2}.tag--transparent:where(a){text-decoration:none;z-index:2}.tag--transparent[aria-disabled=true],.tag--transparent[disabled]{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-disabled);cursor:not-allowed}.tag:not(.tag--transparent):where(button){background-color:var(--color-fill-subtle);color:var(--color-text-default);cursor:pointer;outline-offset:2px}@media (hover:hover){.tag:not(.tag--transparent):where(button):hover{background-color:var(--color-fill-disabled);color:var(--color-text-default)}}.tag:not(.tag--transparent):where(button):focus-visible{background-color:var(--color-fill-subtle);color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag:not(.tag--transparent):where(button).is-active,.tag:not(.tag--transparent):where(button):active{background-color:var(--color-background-contrast);color:var(--color-text-inverse);z-index:2}.tag:not(.tag--transparent):where(button){z-index:2}.tag:not(.tag--transparent):where(a){background-color:var(--color-fill-subtle);color:var(--color-text-default);cursor:pointer;outline-offset:2px}@media (hover:hover){.tag:not(.tag--transparent):where(a):hover{background-color:var(--color-fill-disabled);color:var(--color-text-default)}}.tag:not(.tag--transparent):where(a):focus-visible{background-color:var(--color-fill-subtle);color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag:not(.tag--transparent):where(a).is-active,.tag:not(.tag--transparent):where(a):active{background-color:var(--color-background-contrast);color:var(--color-text-inverse);z-index:2}.tag:not(.tag--transparent):where(a){text-decoration:none;z-index:2}.tag:not(.tag--transparent)[aria-disabled=true],.tag:not(.tag--transparent)[disabled]{background-color:var(--color-fill-subtle);color:var(--color-text-disabled);cursor:not-allowed}.tag__wrapper{align-items:center;display:inline-flex;position:relative}.tag__wrapper .tag{margin-right:.5rem;padding-right:2.375rem!important}.tag__wrapper .tag--large{margin-right:.5rem;padding-right:2.5rem!important}.tag__action{background-color:var(--color-fill-moderate);box-decoration-break:clone;color:var(--color-text-default);cursor:pointer;display:inline-flex;outline-offset:2px;vertical-align:baseline}@media (hover:hover){.tag__action:hover{background-color:var(--color-fill-disabled);color:var(--color-text-default)}}.tag__action:focus-visible{background-color:var(--color-fill-subtle);color:var(--color-text-default);outline:2px solid var(--color-background-contrast)!important}.tag__action.is-active,.tag__action:active{background-color:var(--color-background-contrast);color:var(--color-text-inverse);z-index:2}.tag__action[aria-disabled=true],.tag__action[disabled]{background-color:var(--color-fill-moderate);color:var(--color-fill-subtle);cursor:not-allowed}.tag__action{align-items:center;aspect-ratio:1;border-radius:9999px;display:flex;z-index:2}.background-secondary .tag__action{background-color:var(--color-border-strong)}.background-secondary .tag__action:not([disabled]):not([aria-disabled=true]):focus-visible,.background-secondary .tag__action:not([disabled]):not([aria-disabled=true]):hover{background-color:#999}.background-secondary .tag__action:not([disabled]):not([aria-disabled=true]).is-active,.background-secondary .tag__action:not([disabled]):not([aria-disabled=true]):active{background-color:var(--color-background-contrast);color:var(--color-text-inverse)}.background-secondary .tag__action[aria-disabled=true],.background-secondary .tag__action[disabled]{background-color:var(--color-border-strong)}.tag__action{margin-left:-2.375rem!important;padding:.4375rem}.tag__action--large{margin-left:-2.5rem!important;padding:.5rem}}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["@layer components {\n .tag {\n display: inline-flex;\n vertical-align: baseline;\n border-radius: 9999px;\n box-decoration-break: clone;\n }\n .tag {\n padding: 0.4375rem 0.75rem;\n font-size: 0.875rem !important;\n line-height: 1rem !important;\n font-weight: 700;\n border-width: 1px;\n }\n .tag--small {\n padding: 0.125rem 0.5rem;\n font-size: 0.75rem !important;\n line-height: 0.875rem !important;\n font-weight: 400;\n border-width: 2px;\n }\n .tag--large {\n padding: 0.6875rem 0.9375rem;\n font-size: 1rem !important;\n line-height: 1.125rem !important;\n font-weight: 700;\n border-width: 2px;\n }\n .tag {\n color: var(--color-text-default);\n background-color: var(--color-fill-subtle);\n }\n .tag--orange {\n color: var(--tag-text-dark);\n background-color: var(--tag-orange);\n }\n .tag--black {\n color: var(--tag-text-light);\n background-color: var(--tag-black);\n }\n .tag--yellow {\n color: var(--tag-text-dark);\n background-color: var(--tag-yellow);\n }\n .tag--green {\n color: var(--tag-text-dark);\n background-color: var(--tag-green);\n }\n .tag--blue {\n color: var(--tag-text-dark);\n background-color: var(--tag-blue);\n }\n .tag--success {\n color: var(--tag-text-light);\n background-color: var(--tag-success);\n }\n .tag--danger {\n color: var(--tag-text-light);\n background-color: var(--tag-danger);\n }\n .tag--info {\n color: var(--tag-text-light);\n background-color: var(--tag-info);\n }\n .tag--warning {\n color: var(--tag-text-dark);\n background-color: var(--tag-warning);\n }\n .tag--transparent {\n color: var(--color-text-default);\n background-color: transparent;\n }\n .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]) {\n background-color: var(--color-surface-moderate);\n }\n .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button), .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a) {\n background-color: var(--color-surface-moderate);\n }\n .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button):not([disabled]):not([aria-disabled=true]):focus-visible, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button):not([disabled]):not([aria-disabled=true]):hover, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a):not([disabled]):not([aria-disabled=true]):focus-visible, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a):not([disabled]):not([aria-disabled=true]):hover {\n background-color: #999;\n }\n .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button):not([disabled]):not([aria-disabled=true]):active, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button):not([disabled]):not([aria-disabled=true]).is-active, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a):not([disabled]):not([aria-disabled=true]):active, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a):not([disabled]):not([aria-disabled=true]).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n }\n .background-secondary .tag--transparent {\n background-color: var(--color-surface-primary);\n }\n .tag--transparent {\n border-color: var(--color-border-strong);\n border-style: solid;\n }\n .tag--transparent:where(button) {\n background-color: transparent;\n color: var(--color-text-default);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag--transparent:where(button):hover {\n border-color: var(--color-fill-secondary);\n }\n }\n .tag--transparent:where(button):focus-visible {\n background-color: transparent;\n color: var(--color-text-default);\n outline: 2px solid var(--color-background-contrast) !important;\n border-color: transparent;\n }\n .tag--transparent:where(button):active, .tag--transparent:where(button).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-fill-secondary);\n border-color: var(--color-fill-secondary);\n z-index: 2;\n }\n .tag--transparent:where(button) {\n z-index: 2;\n }\n .tag--transparent:where(a) {\n background-color: transparent;\n color: var(--color-text-default);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag--transparent:where(a):hover {\n border-color: var(--color-fill-secondary);\n }\n }\n .tag--transparent:where(a):focus-visible {\n background-color: transparent;\n color: var(--color-text-default);\n outline: 2px solid var(--color-background-contrast) !important;\n border-color: transparent;\n }\n .tag--transparent:where(a):active, .tag--transparent:where(a).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-fill-secondary);\n border-color: var(--color-fill-secondary);\n z-index: 2;\n }\n .tag--transparent:where(a) {\n z-index: 2;\n text-decoration: none;\n }\n .tag--transparent[aria-disabled=true], .tag--transparent[disabled] {\n color: var(--color-text-disabled);\n background-color: transparent;\n border-color: var(--color-border-strong);\n cursor: not-allowed;\n }\n .tag:not(.tag--transparent):where(button) {\n background-color: var(--color-fill-subtle);\n color: var(--color-text-default);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag:not(.tag--transparent):where(button):hover {\n color: var(--color-text-default);\n background-color: var(--color-fill-disabled);\n }\n }\n .tag:not(.tag--transparent):where(button):focus-visible {\n color: var(--color-text-default);\n background-color: var(--color-fill-subtle);\n outline: 2px solid var(--color-background-contrast) !important;\n }\n .tag:not(.tag--transparent):where(button):active, .tag:not(.tag--transparent):where(button).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n z-index: 2;\n }\n .tag:not(.tag--transparent):where(button) {\n z-index: 2;\n }\n .tag:not(.tag--transparent):where(a) {\n background-color: var(--color-fill-subtle);\n color: var(--color-text-default);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag:not(.tag--transparent):where(a):hover {\n color: var(--color-text-default);\n background-color: var(--color-fill-disabled);\n }\n }\n .tag:not(.tag--transparent):where(a):focus-visible {\n color: var(--color-text-default);\n background-color: var(--color-fill-subtle);\n outline: 2px solid var(--color-background-contrast) !important;\n }\n .tag:not(.tag--transparent):where(a):active, .tag:not(.tag--transparent):where(a).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n z-index: 2;\n }\n .tag:not(.tag--transparent):where(a) {\n z-index: 2;\n text-decoration: none;\n }\n .tag:not(.tag--transparent)[aria-disabled=true], .tag:not(.tag--transparent)[disabled] {\n color: var(--color-text-disabled);\n background-color: var(--color-fill-subtle);\n cursor: not-allowed;\n }\n .tag__wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n }\n .tag__wrapper .tag {\n padding-right: calc(2.375rem) !important;\n margin-right: 0.5rem;\n }\n .tag__wrapper .tag--large {\n padding-right: calc(2.6875rem) !important;\n margin-right: 0.5rem;\n }\n .tag__action {\n display: inline-flex;\n vertical-align: baseline;\n border-radius: 9999px;\n box-decoration-break: clone;\n color: var(--color-text-default);\n background-color: var(--color-fill-moderate);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag__action:hover {\n color: var(--color-text-default);\n background-color: var(--color-fill-disabled);\n }\n }\n .tag__action:focus-visible {\n color: var(--color-text-default);\n background-color: var(--color-fill-subtle);\n outline: 2px solid var(--color-background-contrast) !important;\n }\n .tag__action:active, .tag__action.is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n z-index: 2;\n }\n .tag__action[aria-disabled=true], .tag__action[disabled] {\n color: var(--color-fill-subtle);\n background-color: var(--color-fill-moderate);\n cursor: not-allowed;\n }\n .tag__action {\n aspect-ratio: 1;\n display: flex;\n align-items: center;\n border-radius: 9999px;\n z-index: 2;\n }\n .tag__action {\n margin-left: calc(-2.375rem) !important;\n padding: 0.4375rem;\n }\n .tag__action--large {\n margin-left: calc(-2.6875rem) !important;\n padding: 0.59375rem;\n }\n}"]}
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["@layer components {\n .tag {\n display: inline-flex;\n vertical-align: baseline;\n border-radius: 9999px;\n box-decoration-break: clone;\n }\n .tag {\n padding: 0.4375rem 0.75rem;\n font-size: 0.875rem !important;\n line-height: 1rem !important;\n font-weight: 700;\n border-width: 1px;\n }\n .tag--small {\n padding: 0.125rem 0.5rem;\n font-size: 0.75rem !important;\n line-height: 0.875rem !important;\n font-weight: 400;\n border-width: 2px;\n }\n .tag--large {\n padding: 0.6875rem 0.9375rem;\n font-size: 1rem !important;\n line-height: 1.125rem !important;\n font-weight: 700;\n border-width: 2px;\n }\n .tag {\n color: var(--color-text-default);\n background-color: var(--color-fill-subtle);\n }\n .tag--orange {\n color: var(--tag-text-dark);\n background-color: var(--tag-orange);\n }\n .tag--black {\n color: var(--tag-text-light);\n background-color: var(--tag-black);\n }\n .tag--yellow {\n color: var(--tag-text-dark);\n background-color: var(--tag-yellow);\n }\n .tag--green {\n color: var(--tag-text-dark);\n background-color: var(--tag-green);\n }\n .tag--blue {\n color: var(--tag-text-dark);\n background-color: var(--tag-blue);\n }\n .tag--success {\n color: var(--tag-text-light);\n background-color: var(--tag-success);\n }\n .tag--danger {\n color: var(--tag-text-light);\n background-color: var(--tag-danger);\n }\n .tag--info {\n color: var(--tag-text-light);\n background-color: var(--tag-info);\n }\n .tag--warning {\n color: var(--tag-text-dark);\n background-color: var(--tag-warning);\n }\n .tag--transparent {\n color: var(--color-text-default);\n background-color: transparent;\n }\n .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]) {\n background-color: var(--color-surface-moderate);\n }\n .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button), .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a) {\n background-color: var(--color-surface-moderate);\n }\n .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button):not([disabled]):not([aria-disabled=true]):focus-visible, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button):not([disabled]):not([aria-disabled=true]):hover, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a):not([disabled]):not([aria-disabled=true]):focus-visible, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a):not([disabled]):not([aria-disabled=true]):hover {\n background-color: #999;\n }\n .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button):not([disabled]):not([aria-disabled=true]):active, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(button):not([disabled]):not([aria-disabled=true]).is-active, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a):not([disabled]):not([aria-disabled=true]):active, .background-secondary .tag:not([class*=\"--orange\"]):not([class*=\"--black\"]):not([class*=\"--yellow\"]):not([class*=\"--green\"]):not([class*=\"--blue\"]):not([class*=\"--success\"]):not([class*=\"--danger\"]):not([class*=\"--info\"]):not([class*=\"--warning\"]):not([class*=\"--transparent\"]):where(a):not([disabled]):not([aria-disabled=true]).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n }\n .tag--transparent {\n border-color: var(--color-border-strong);\n border-style: solid;\n }\n .tag--transparent:where(button) {\n background-color: transparent;\n color: var(--color-text-default);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag--transparent:where(button):hover {\n border-color: var(--color-fill-secondary);\n }\n }\n .tag--transparent:where(button):focus-visible {\n background-color: transparent;\n color: var(--color-text-default);\n outline: 2px solid var(--color-background-contrast) !important;\n border-color: transparent;\n }\n .tag--transparent:where(button):active, .tag--transparent:where(button).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-fill-secondary);\n border-color: var(--color-fill-secondary);\n z-index: 2;\n }\n .tag--transparent:where(button) {\n z-index: 2;\n }\n .tag--transparent:where(a) {\n background-color: transparent;\n color: var(--color-text-default);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag--transparent:where(a):hover {\n border-color: var(--color-fill-secondary);\n }\n }\n .tag--transparent:where(a):focus-visible {\n background-color: transparent;\n color: var(--color-text-default);\n outline: 2px solid var(--color-background-contrast) !important;\n border-color: transparent;\n }\n .tag--transparent:where(a):active, .tag--transparent:where(a).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-fill-secondary);\n border-color: var(--color-fill-secondary);\n z-index: 2;\n }\n .tag--transparent:where(a) {\n z-index: 2;\n text-decoration: none;\n }\n .tag--transparent[aria-disabled=true], .tag--transparent[disabled] {\n color: var(--color-text-disabled);\n background-color: transparent;\n border-color: var(--color-border-strong);\n cursor: not-allowed;\n }\n .tag:not(.tag--transparent):where(button) {\n background-color: var(--color-fill-subtle);\n color: var(--color-text-default);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag:not(.tag--transparent):where(button):hover {\n color: var(--color-text-default);\n background-color: var(--color-fill-disabled);\n }\n }\n .tag:not(.tag--transparent):where(button):focus-visible {\n color: var(--color-text-default);\n background-color: var(--color-fill-subtle);\n outline: 2px solid var(--color-background-contrast) !important;\n }\n .tag:not(.tag--transparent):where(button):active, .tag:not(.tag--transparent):where(button).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n z-index: 2;\n }\n .tag:not(.tag--transparent):where(button) {\n z-index: 2;\n }\n .tag:not(.tag--transparent):where(a) {\n background-color: var(--color-fill-subtle);\n color: var(--color-text-default);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag:not(.tag--transparent):where(a):hover {\n color: var(--color-text-default);\n background-color: var(--color-fill-disabled);\n }\n }\n .tag:not(.tag--transparent):where(a):focus-visible {\n color: var(--color-text-default);\n background-color: var(--color-fill-subtle);\n outline: 2px solid var(--color-background-contrast) !important;\n }\n .tag:not(.tag--transparent):where(a):active, .tag:not(.tag--transparent):where(a).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n z-index: 2;\n }\n .tag:not(.tag--transparent):where(a) {\n z-index: 2;\n text-decoration: none;\n }\n .tag:not(.tag--transparent)[aria-disabled=true], .tag:not(.tag--transparent)[disabled] {\n color: var(--color-text-disabled);\n background-color: var(--color-fill-subtle);\n cursor: not-allowed;\n }\n .tag__wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n }\n .tag__wrapper .tag {\n padding-right: calc(2.375rem) !important;\n margin-right: 0.5rem;\n }\n .tag__wrapper .tag--large {\n padding-right: calc(2.5rem) !important;\n margin-right: 0.5rem;\n }\n .tag__action {\n display: inline-flex;\n vertical-align: baseline;\n border-radius: 9999px;\n box-decoration-break: clone;\n color: var(--color-text-default);\n background-color: var(--color-fill-moderate);\n cursor: pointer;\n outline-offset: 2px;\n }\n @media (hover: hover) {\n .tag__action:hover {\n color: var(--color-text-default);\n background-color: var(--color-fill-disabled);\n }\n }\n .tag__action:focus-visible {\n color: var(--color-text-default);\n background-color: var(--color-fill-subtle);\n outline: 2px solid var(--color-background-contrast) !important;\n }\n .tag__action:active, .tag__action.is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n z-index: 2;\n }\n .tag__action[aria-disabled=true], .tag__action[disabled] {\n color: var(--color-fill-subtle);\n background-color: var(--color-fill-moderate);\n cursor: not-allowed;\n }\n .tag__action {\n aspect-ratio: 1;\n display: flex;\n align-items: center;\n border-radius: 9999px;\n z-index: 2;\n }\n .background-secondary .tag__action {\n background-color: var(--color-border-strong);\n }\n .background-secondary .tag__action:not([disabled]):not([aria-disabled=true]):focus-visible, .background-secondary .tag__action:not([disabled]):not([aria-disabled=true]):hover {\n background-color: #999;\n }\n .background-secondary .tag__action:not([disabled]):not([aria-disabled=true]):active, .background-secondary .tag__action:not([disabled]):not([aria-disabled=true]).is-active {\n color: var(--color-text-inverse);\n background-color: var(--color-background-contrast);\n }\n .background-secondary .tag__action[aria-disabled=true], .background-secondary .tag__action[disabled] {\n background-color: var(--color-border-strong);\n }\n .tag__action {\n margin-left: calc(-2.375rem) !important;\n padding: 0.4375rem;\n }\n .tag__action--large {\n margin-left: calc(-2.5rem) !important;\n padding: 0.5rem;\n }\n}"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.tile{border:1px solid var(--color-border-
|
|
1
|
+
@layer components{.tile{background-color:var(--color-fill-primary);border:1px solid var(--color-border-subtle);border-radius:.3125rem;color:var(--color-text-default);display:flex;overflow:hidden;position:relative;width:100%;word-break:break-word}.tile__body{align-items:flex-start;display:flex;flex:1;flex-direction:column;gap:1.25rem;padding:1.25rem;z-index:1}.tile__body :last-child{margin-bottom:0}@media screen and (min-width:768px){.tile__body{flex-direction:column;padding:1.875rem}}.tile--compact .tile__body{text-wrap:nowrap;align-items:center;flex-direction:row;flex-shrink:0;gap:.3125rem;justify-content:flex-start;padding:.9375rem}@media screen and (min-width:768px){.tile--compact .tile__body{flex-direction:column;padding:1.25rem}}.tile--action{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-inverse)}.tile--action .tile__body{align-items:center;flex-direction:row;gap:.9375rem;justify-content:space-between;padding:1.875rem 1.25rem}@media screen and (min-width:480px){.tile--action .tile__body{gap:1.25rem;padding:1.875rem}}.tile--action .icon{flex-shrink:0;height:1.5rem;width:1.5rem}@media screen and (min-width:480px){.tile--action .icon{height:2rem;width:2rem}}}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,MAOE,0CAA2C,CAD3C,2CAA4C,CAD5C,sBAAwB,CAGxB,+BAAgC,CAPhC,YAAa,CAEb,eAAgB,CADhB,iBAAkB,CAElB,UAAW,CAKX,qBACF,CACA,YAIE,sBAAuB,CAFvB,YAAa,CADb,MAAO,CAEP,qBAAsB,CAEtB,WAAY,CACZ,eAAgB,CAChB,SACF,CACA,wBACE,eACF,CACA,oCACE,YACE,qBAAsB,CACtB,gBACF,CACF,CACA,2BAOE,gBAAiB,CALjB,kBAAmB,CADnB,kBAAmB,CAKnB,aAAc,CAFd,YAAc,CADd,0BAA2B,CAE3B,gBAGF,CACA,oCACE,2BACE,qBAAsB,CACtB,eACF,CACF,CACA,cACE,4BAA6B,CAE7B,uCAAwC,CADxC,+BAEF,CACA,0BAEE,kBAAmB,CADnB,kBAAmB,CAGnB,YAAc,CADd,6BAA8B,CAE9B,wBACF,CACA,oCACE,0BACE,WAAY,CACZ,gBACF,CACF,CACA,oBACE,aAAc,CAEd,aAAc,CADd,YAEF,CACA,oCACE,oBAEE,WAAY,CADZ,UAEF,CACF,CACF","file":"style.css","sourcesContent":["@layer components {\n .tile {\n display: flex;\n position: relative;\n overflow: hidden;\n width: 100%;\n border-radius: 0.3125rem;\n border: 1px solid var(--color-border-subtle);\n background-color: var(--color-fill-primary);\n color: var(--color-text-default);\n word-break: break-word;\n }\n .tile__body {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 1.25rem;\n padding: 1.25rem;\n z-index: 1;\n }\n .tile__body *:last-child {\n margin-bottom: 0;\n }\n @media screen and (min-width: 768px) {\n .tile__body {\n flex-direction: column;\n padding: 1.875rem;\n }\n }\n .tile--compact .tile__body {\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n gap: 0.3125rem;\n padding: 0.9375rem;\n flex-shrink: 0;\n text-wrap: nowrap;\n }\n @media screen and (min-width: 768px) {\n .tile--compact .tile__body {\n flex-direction: column;\n padding: 1.25rem;\n }\n }\n .tile--action {\n background-color: transparent;\n color: var(--color-text-inverse);\n border-color: var(--color-border-strong);\n }\n .tile--action .tile__body {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 0.9375rem;\n padding: 1.875rem 1.25rem;\n }\n @media screen and (min-width: 480px) {\n .tile--action .tile__body {\n gap: 1.25rem;\n padding: 1.875rem;\n }\n }\n .tile--action .icon {\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n }\n @media screen and (min-width: 480px) {\n .tile--action .icon {\n width: 2rem;\n height: 2rem;\n }\n }\n}"]}
|