@orangesk/orange-design-system 2.0.0 → 2.1.0
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/README.md +4 -2
- package/build/components/Card/style.css +1 -1
- package/build/components/Card/style.css.map +1 -1
- package/build/components/FeatureAccordion/style.css +1 -1
- package/build/components/FeatureAccordion/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 +234 -234
- package/build/components/types/src/components/AnchorNavigation/AnchorNavigation.d.ts +1 -1
- package/build/components/types/src/components/BodyBanner/BodyBanner.d.ts +1 -1
- package/build/components/types/src/components/Button/index.d.ts +3 -3
- package/build/components/types/src/components/Card/CardSection.d.ts +2 -2
- package/build/components/types/src/components/FeatureAccordion/FeatureAccordion.d.ts +1 -1
- package/build/components/types/src/components/Footer/PlanObnovy.d.ts +1 -1
- package/build/components/types/src/components/Forms/Select/index.d.ts +1 -1
- package/build/components/types/src/components/Grid/GridCol.d.ts +1 -1
- package/build/components/types/src/components/Icon/IconSearch.d.ts +2 -2
- package/build/components/types/src/components/Icon/IconSearchWrapper.d.ts +1 -1
- package/build/components/types/src/components/Icon/PictogramSearch.d.ts +2 -2
- package/build/components/types/src/components/Icon/PictogramSearchWrapper.d.ts +1 -1
- package/build/components/types/src/components/Megamenu/Megamenu.d.ts +2 -1
- package/build/components/types/src/components/Megamenu/MegamenuBlog.d.ts +1 -1
- package/build/components/types/src/components/Megamenu/MegamenuSearchContent.d.ts +1 -1
- package/build/components/types/src/components/Megamenu/MyOrangeMobilePanel.d.ts +1 -1
- package/build/components/types/src/components/Pagination/Separator.d.ts +1 -1
- package/build/components/types/src/components/Preview/Preview.d.ts +1 -1
- package/build/components/types/src/components/Preview/index.d.ts +1 -1
- package/build/components/types/src/components/PromoBanner/PromoBanner.d.ts +1 -1
- package/build/components/types/src/components/Table/Row.d.ts +2 -1
- package/build/components/types/src/components/Tooltip/tests/BaseWrapper.d.ts +1 -1
- package/build/components/types/src/docs/utils/SpacePreview.d.ts +1 -1
- 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/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/search-index.json +2 -2
- package/package.json +23 -23
- package/src/components/Button/IconButton.tsx +3 -1
- package/src/components/Button/tests/IconButton.unit.test.jsx +6 -2
- package/src/components/Card/CardSection.tsx +3 -2
- package/src/components/Card/styles/style.scss +7 -0
- package/src/components/Card/tests/CardSection.unit.test.jsx +12 -0
- package/src/components/Carousel/Carousel.static.ts +2 -2
- package/src/components/Carousel/tests/Carousel.static.test.jsx +7 -4
- package/src/components/FeatureAccordion/styles/mixins.scss +3 -3
- package/src/components/Forms/Autocomplete/Autocomplete.tsx +8 -0
- package/src/components/Forms/Autocomplete/styles/style.scss +3 -0
- package/src/components/Forms/Autocomplete/tests/Autocomplete.unit.test.jsx +48 -0
- package/src/components/Forms/DatePicker/styles/style.scss +2 -0
- package/src/components/Forms/File/styles/style.scss +3 -0
- package/src/components/Forms/InputStepper/styles/style.scss +1 -0
- package/src/components/PromoBanner/PromoBanner.tsx +2 -1
- package/src/components/Tile/styles/mixins.scss +1 -0
- package/src/styles/base/globals-forms.scss +31 -0
- package/src/components/Card/CHANGELOG.md +0 -19
package/README.md
CHANGED
|
@@ -135,7 +135,7 @@ ODS components work perfectly without React:
|
|
|
135
135
|
<head>
|
|
136
136
|
<link
|
|
137
137
|
rel="stylesheet"
|
|
138
|
-
href="node_modules/@orangesk/orange-design-system/build/lib/
|
|
138
|
+
href="node_modules/@orangesk/orange-design-system/build/lib/style.css"
|
|
139
139
|
/>
|
|
140
140
|
</head>
|
|
141
141
|
<body>
|
|
@@ -172,9 +172,11 @@ Many components are CSS-only and don't require JavaScript:
|
|
|
172
172
|
```html
|
|
173
173
|
<link
|
|
174
174
|
rel="stylesheet"
|
|
175
|
-
href="node_modules/@orangesk/orange-design-system/build/lib/
|
|
175
|
+
href="node_modules/@orangesk/orange-design-system/build/lib/style.css"
|
|
176
176
|
/>
|
|
177
177
|
|
|
178
|
+
`components.css` contains component layer only. For standalone HTML usage, load `style.css` so required base tokens and CSS variables are present.
|
|
179
|
+
|
|
178
180
|
<!-- Button -->
|
|
179
181
|
<button class="button button--primary">Click Me</button>
|
|
180
182
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.card{display:flex;flex-direction:column;position:relative}.card>:not([class*=mb-]){flex-shrink:0;margin-bottom:0}.card .divider{padding:0}.card{background-color:var(--color-surface-primary);border:1px solid var(--color-border-subtle);border-radius:.625rem;margin-bottom:1.875rem;overflow:hidden}.card__section{flex:0 1 auto;padding:1.25rem}@media screen and (min-width:768px){.card__section{padding:1.875rem}}.card__section>.btn,.card__section>button{width:100%}.card__section>.btn:not(:last-child),.card__section>button:not(:last-child){margin-bottom:.625rem}.card__section>:last-child{margin-bottom:0}.card__section--space-small{flex:0 1 auto;padding:1.25rem}.card__section--space-small>.btn,.card__section--space-small>button{width:100%}.card__section--space-small>.btn:not(:last-child),.card__section--space-small>button:not(:last-child){margin-bottom:.625rem}.card__section--space-small>:last-child{margin-bottom:0}.card__section--fill{flex-grow:1}.card__product-header{display:flex;justify-content:space-between}.card__product-header>img{max-width:7.8125rem;object-fit:cover;object-position:left}.card__product-content{flex:0 1 auto;padding:1.25rem}@media screen and (min-width:768px){.card__product-content{padding:1.875rem}}.card__product-header--space-small .card__product-content{flex:0 1 auto;padding:1.25rem}.card--no-border{border:none}}
|
|
1
|
+
@layer components{.card{display:flex;flex-direction:column;position:relative}.card>:not([class*=mb-]){flex-shrink:0;margin-bottom:0}.card .divider{padding:0}.card{background-color:var(--color-surface-primary);border:1px solid var(--color-border-subtle);border-radius:.625rem;margin-bottom:1.875rem;overflow:hidden}.card__section{flex:0 1 auto;padding:1.25rem}@media screen and (min-width:768px){.card__section{padding:1.875rem}}.card__section>.btn,.card__section>button{width:100%}.card__section>.btn:not(:last-child),.card__section>button:not(:last-child){margin-bottom:.625rem}.card__section>:last-child{margin-bottom:0}.card__section--space-small{flex:0 1 auto;padding:1.25rem}.card__section--space-small>.btn,.card__section--space-small>button{width:100%}.card__section--space-small>.btn:not(:last-child),.card__section--space-small>button:not(:last-child){margin-bottom:.625rem}.card__section--space-small>:last-child{margin-bottom:0}@media screen and (min-width:992px){.card__section--space-large{padding:3.75rem}}.card__section--fill{flex-grow:1}.card__product-header{display:flex;justify-content:space-between}.card__product-header>img{max-width:7.8125rem;object-fit:cover;object-position:left}.card__product-content{flex:0 1 auto;padding:1.25rem}@media screen and (min-width:768px){.card__product-content{padding:1.875rem}}.card__product-header--space-small .card__product-content{flex:0 1 auto;padding:1.25rem}.card--no-border{border:none}}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,MAEE,YAAa,CACb,qBAAsB,CAFtB,iBAGF,CACA,yBAEE,aAAc,CADd,eAEF,CACA,eACE,SACF,CACA,MACE,6CAA8C,CAG9C,2CAA4C,CAD5C,qBAAuB,CADvB,sBAAuB,CAGvB,eACF,CACA,eACE,aAAc,CACd,eACF,CACA,oCACE,eACE,gBACF,CACF,CACA,0CAEE,UACF,CACA,4EAEE,qBACF,CACA,2BACE,eACF,CACA,4BACE,aAAc,CACd,eACF,CACA,oEAEE,UACF,CACA,sGAEE,qBACF,CACA,wCACE,eACF,CACA,qBACE,WACF,CACA,sBACE,YAAa,CACb,6BACF,CACA,0BAGE,mBAAoB,CAFpB,gBAAiB,CACjB,oBAEF,CACA,uBACE,aAAc,CACd,eACF,CACA,oCACE,uBACE,gBACF,CACF,CACA,0DACE,aAAc,CACd,eACF,CACA,iBACE,WACF,CACF","file":"style.css","sourcesContent":["@layer components {\n .card {\n position: relative;\n display: flex;\n flex-direction: column;\n }\n .card > *:not([class*=mb-]) {\n margin-bottom: 0;\n flex-shrink: 0;\n }\n .card .divider {\n padding: 0;\n }\n .card {\n background-color: var(--color-surface-primary);\n margin-bottom: 1.875rem;\n border-radius: 0.625rem;\n border: 1px solid var(--color-border-subtle);\n overflow: hidden;\n }\n .card__section {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n @media screen and (min-width: 768px) {\n .card__section {\n padding: 1.875rem;\n }\n }\n .card__section > .btn,\n .card__section > button {\n width: 100%;\n }\n .card__section > .btn:not(:last-child),\n .card__section > button:not(:last-child) {\n margin-bottom: 0.625rem;\n }\n .card__section > *:last-child {\n margin-bottom: 0;\n }\n .card__section--space-small {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n .card__section--space-small > .btn,\n .card__section--space-small > button {\n width: 100%;\n }\n .card__section--space-small > .btn:not(:last-child),\n .card__section--space-small > button:not(:last-child) {\n margin-bottom: 0.625rem;\n }\n .card__section--space-small > *:last-child {\n margin-bottom: 0;\n }\n .card__section--fill {\n flex-grow: 1;\n }\n .card__product-header {\n display: flex;\n justify-content: space-between;\n }\n .card__product-header > img {\n object-fit: cover;\n object-position: left;\n max-width: 7.8125rem;\n }\n .card__product-content {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n @media screen and (min-width: 768px) {\n .card__product-content {\n padding: 1.875rem;\n }\n }\n .card__product-header--space-small .card__product-content {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n .card--no-border {\n border: none;\n }\n}"]}
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,MAEE,YAAa,CACb,qBAAsB,CAFtB,iBAGF,CACA,yBAEE,aAAc,CADd,eAEF,CACA,eACE,SACF,CACA,MACE,6CAA8C,CAG9C,2CAA4C,CAD5C,qBAAuB,CADvB,sBAAuB,CAGvB,eACF,CACA,eACE,aAAc,CACd,eACF,CACA,oCACE,eACE,gBACF,CACF,CACA,0CAEE,UACF,CACA,4EAEE,qBACF,CACA,2BACE,eACF,CACA,4BACE,aAAc,CACd,eACF,CACA,oEAEE,UACF,CACA,sGAEE,qBACF,CACA,wCACE,eACF,CACA,oCACE,4BACE,eACF,CACF,CACA,qBACE,WACF,CACA,sBACE,YAAa,CACb,6BACF,CACA,0BAGE,mBAAoB,CAFpB,gBAAiB,CACjB,oBAEF,CACA,uBACE,aAAc,CACd,eACF,CACA,oCACE,uBACE,gBACF,CACF,CACA,0DACE,aAAc,CACd,eACF,CACA,iBACE,WACF,CACF","file":"style.css","sourcesContent":["@layer components {\n .card {\n position: relative;\n display: flex;\n flex-direction: column;\n }\n .card > *:not([class*=mb-]) {\n margin-bottom: 0;\n flex-shrink: 0;\n }\n .card .divider {\n padding: 0;\n }\n .card {\n background-color: var(--color-surface-primary);\n margin-bottom: 1.875rem;\n border-radius: 0.625rem;\n border: 1px solid var(--color-border-subtle);\n overflow: hidden;\n }\n .card__section {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n @media screen and (min-width: 768px) {\n .card__section {\n padding: 1.875rem;\n }\n }\n .card__section > .btn,\n .card__section > button {\n width: 100%;\n }\n .card__section > .btn:not(:last-child),\n .card__section > button:not(:last-child) {\n margin-bottom: 0.625rem;\n }\n .card__section > *:last-child {\n margin-bottom: 0;\n }\n .card__section--space-small {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n .card__section--space-small > .btn,\n .card__section--space-small > button {\n width: 100%;\n }\n .card__section--space-small > .btn:not(:last-child),\n .card__section--space-small > button:not(:last-child) {\n margin-bottom: 0.625rem;\n }\n .card__section--space-small > *:last-child {\n margin-bottom: 0;\n }\n @media screen and (min-width: 992px) {\n .card__section--space-large {\n padding: 3.75rem;\n }\n }\n .card__section--fill {\n flex-grow: 1;\n }\n .card__product-header {\n display: flex;\n justify-content: space-between;\n }\n .card__product-header > img {\n object-fit: cover;\n object-position: left;\n max-width: 7.8125rem;\n }\n .card__product-content {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n @media screen and (min-width: 768px) {\n .card__product-content {\n padding: 1.875rem;\n }\n }\n .card__product-header--space-small .card__product-content {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n .card--no-border {\n border: none;\n }\n}"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.feature-accordion{background-color:var(--color-
|
|
1
|
+
@layer components{.feature-accordion{background-color:var(--color-background-secondary);color:var(--color-text-default);margin-left:0!important;margin-right:0!important}.feature-accordion__accordion{padding-left:0!important;padding-right:0!important}.feature-accordion__accordion .accordion{margin:5.4375rem 3.75rem}@media screen and (max-width:991.98px){.feature-accordion__accordion .accordion{margin:3.75rem 1.875rem}}@media screen and (max-width:767.98px){.feature-accordion__accordion .accordion{margin:0}}.feature-accordion__item{border-bottom:none;border-top:1px solid var(--color-border-strong)}.feature-accordion__item:first-child{border-top:none}.feature-accordion__item:last-child{border-bottom:none}.feature-accordion__item.is-active{border-top:4px solid var(--color-border-accent)}.feature-accordion__item .accordion__body{margin-bottom:0}@media screen and (max-width:767.98px){.feature-accordion__item .accordion__header,.feature-accordion__item .feature-accordion__content{padding-left:.9375rem;padding-right:.9375rem}}.feature-accordion__content{margin-bottom:1.875rem}.feature-accordion__content :last-child{margin-bottom:0}.feature-accordion__preview{display:flex;padding:0!important}.feature-accordion__preview .img{margin-bottom:0;width:100%}.feature-accordion__preview img{height:100%;margin:0!important;object-fit:cover;object-position:left center;width:100%}}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,mBAEE,
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,mBAEE,kDAAmD,CADnD,+BAAgC,CAEhC,uBAAyB,CACzB,wBACF,CACA,8BACE,wBAA0B,CAC1B,yBACF,CACA,yCACE,wBACF,CACA,uCACE,yCACE,uBACF,CACF,CACA,uCACE,yCACE,QACF,CACF,CACA,yBACE,kBAAmB,CACnB,+CACF,CACA,qCACE,eACF,CACA,oCACE,kBACF,CACA,mCACE,+CACF,CACA,0CACE,eACF,CACA,uCACE,iGAEE,qBAAuB,CACvB,sBACF,CACF,CACA,4BACE,sBACF,CACA,wCACE,eACF,CACA,4BACE,YAAa,CACb,mBACF,CACA,iCACE,eAAkB,CAClB,UACF,CACA,gCAEE,WAAY,CAGZ,kBAAsB,CAFtB,gBAAiB,CACjB,2BAA4B,CAH5B,UAKF,CACF","file":"style.css","sourcesContent":["@layer components {\n .feature-accordion {\n color: var(--color-text-default);\n background-color: var(--color-background-secondary);\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n .feature-accordion__accordion {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n .feature-accordion__accordion .accordion {\n margin: 5.4375rem 3.75rem;\n }\n @media screen and (max-width: 991.98px) {\n .feature-accordion__accordion .accordion {\n margin: 3.75rem 1.875rem;\n }\n }\n @media screen and (max-width: 767.98px) {\n .feature-accordion__accordion .accordion {\n margin: 0;\n }\n }\n .feature-accordion__item {\n border-bottom: none;\n border-top: 1px solid var(--color-border-strong);\n }\n .feature-accordion__item:first-child {\n border-top: none;\n }\n .feature-accordion__item:last-child {\n border-bottom: none;\n }\n .feature-accordion__item.is-active {\n border-top: 4px solid var(--color-border-accent);\n }\n .feature-accordion__item .accordion__body {\n margin-bottom: 0;\n }\n @media screen and (max-width: 767.98px) {\n .feature-accordion__item .accordion__header,\n .feature-accordion__item .feature-accordion__content {\n padding-left: 0.9375rem;\n padding-right: 0.9375rem;\n }\n }\n .feature-accordion__content {\n margin-bottom: 1.875rem;\n }\n .feature-accordion__content *:last-child {\n margin-bottom: 0;\n }\n .feature-accordion__preview {\n display: flex;\n padding: 0px !important;\n }\n .feature-accordion__preview .img {\n margin-bottom: 0px;\n width: 100%;\n }\n .feature-accordion__preview img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: left center;\n margin: 0px !important;\n }\n}"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
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}.tile__body>.icon,.tile__body>svg{height:1.5rem;width:1.5rem}@media screen and (min-width:768px){.tile__body{flex-direction:column;padding:1.875rem}.tile__body>.icon,.tile__body>svg{height:2rem;width:2rem}}.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}}}
|
|
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}.tile__body>.icon,.tile__body>svg{height:1.5rem;width:1.5rem}@media screen and (min-width:768px){.tile__body{flex-direction:column;padding:1.875rem}.tile__body>.icon,.tile__body>svg{height:2rem;width:2rem}}.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;word-break:normal}@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,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,kCAGE,aAAc,CADd,YAEF,CACA,oCACE,YACE,qBAAsB,CACtB,gBACF,CACA,kCAGE,WAAY,CADZ,UAEF,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,
|
|
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,kCAGE,aAAc,CADd,YAEF,CACA,oCACE,YACE,qBAAsB,CACtB,gBACF,CACA,kCAGE,WAAY,CADZ,UAEF,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,wBAAyB,CACzB,iBACF,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 .tile__body > .icon,\n .tile__body > svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n @media screen and (min-width: 768px) {\n .tile__body {\n flex-direction: column;\n padding: 1.875rem;\n }\n .tile__body > .icon,\n .tile__body > svg {\n width: 2rem;\n height: 2rem;\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 word-break: normal;\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}"]}
|