@orangesk/orange-design-system 3.6.0 → 3.6.1
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/BodyBanner/style.css +1 -1
- package/build/components/BodyBanner/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/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/package.json +14 -13
- package/src/components/BodyBanner/styles/mixins.scss +15 -1
- package/src/components/BodyBanner/tests/BodyBanner.conformance.test.jsx +7 -4
- package/src/components/Tile/styles/mixins.scss +2 -4
- package/src/components/Tile/styles/style.scss +9 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.body-banner{background-color:var(--color-background-primary);color:var(--color-text-default);display:flex}.body-banner:not([class*=background-],[class*=surface-],[class*=fill-],[style*="--color-background"],[style*="--color-fill"],[style*="--color-surface"]){border:1px solid var(--color-border-strong)}.body-banner.background-accent{border:1px solid var(--color-border-accent)}.body-banner.grid{margin-left:0!important;margin-right:0!important}.body-banner__content{align-items:center;display:flex;padding:0!important;width:100%}@media screen and (max-width:767.98px){.body-banner__content{align-items:flex-start;flex-direction:column}}.body-banner__content-inner{display:flex;gap:3.75rem;padding:1.875rem;width:100%}.body-banner__content-inner>div:not(.body-banner__button){flex:1;min-width:0}.body-banner__content-inner>div:not(.body-banner__button)>:last-child{margin-bottom:0}@media screen and (max-width:1239.98px){.body-banner__content-inner{display:flex;flex-direction:column;gap:1.875rem}}@media screen and (max-width:767.98px){.body-banner__content-inner{padding:.9375rem}}.body-banner__image{flex-shrink:0;padding:0!important}.body-banner__image img,.body-banner__image svg{margin:1.875rem 0 1.875rem 1.875rem!important;max-height:7.5rem;object-fit:cover}@media screen and (max-width:767.98px){.body-banner__image img,.body-banner__image svg{margin:.9375rem
|
|
1
|
+
@layer components{.body-banner{background-color:var(--color-background-primary);color:var(--color-text-default);display:flex}.body-banner:not([class*=background-],[class*=surface-],[class*=fill-],[style*="--color-background"],[style*="--color-fill"],[style*="--color-surface"]){border:1px solid var(--color-border-strong)}.body-banner.background-accent{border:1px solid var(--color-border-accent)}.body-banner.grid{margin-left:0!important;margin-right:0!important}@media screen and (max-width:767.98px){.body-banner:not(.body-banner--large) .body-banner__button .btn{width:100%}}.body-banner__content{align-items:center;display:flex;padding:0!important;width:100%}@media screen and (max-width:767.98px){.body-banner__content{align-items:flex-start;flex-direction:column}}.body-banner__content-inner{display:flex;gap:3.75rem;padding:1.875rem;width:100%}.body-banner__content-inner>div:not(.body-banner__button){flex:1;min-width:0}.body-banner__content-inner>div:not(.body-banner__button)>:last-child{margin-bottom:0}@media screen and (max-width:1239.98px){.body-banner__content-inner{display:flex;flex-direction:column;gap:1.875rem}}@media screen and (max-width:767.98px){.body-banner__content-inner{padding:.9375rem}}.body-banner__image{flex-shrink:0;padding:0!important}@media screen and (max-width:767.98px){.body-banner__image{width:100%}}.body-banner__image img,.body-banner__image svg{margin:1.875rem 0 1.875rem 1.875rem!important;max-height:7.5rem;object-fit:cover}@media screen and (max-width:767.98px){.body-banner__image img,.body-banner__image svg{margin:.9375rem!important;max-height:none;width:calc(100% - 1.875rem)}}.body-banner__button{align-items:center;display:flex;margin:0!important}.body-banner--large .body-banner__content-inner{display:flex;flex-direction:column;padding:3.75rem}@media screen and (max-width:1239.98px){.body-banner--large .body-banner__content-inner{padding:1.875rem}}.body-banner--large .body-banner__image>*{height:100%;max-width:100%;width:fit-content}.body-banner--large .body-banner__image img{display:block;height:100%;margin:0!important;max-height:none;object-fit:cover;object-position:center;width:100%}}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,aAGE,gDAAiD,CADjD,+BAAgC,CADhC,YAGF,CACA,yJAME,2CACF,CACA,+BACE,2CACF,CACA,kBACE,uBAAyB,CACzB,wBACF,CACA,sBAGE,kBAAmB,CADnB,YAAa,CADb,mBAAqB,CAGrB,UACF,CACA,uCACE,sBAEE,sBAAuB,CADvB,qBAEF,CACF,CACA,4BAEE,YAAa,CAEb,WAAY,CADZ,gBAAiB,CAFjB,UAIF,CACA,0DACE,MAAO,CACP,WACF,CACA,sEACE,eACF,CACA,wCACE,4BACE,YAAa,CACb,qBAAsB,CACtB,YACF,CACF,CACA,uCACE,4BACE,gBACF,CACF,CACA,oBAEE,aAAc,CADd,mBAEF,CACA,gDAIE,6CAA+C,CAF/C,iBAAkB,CAClB,gBAEF,CACA,uCACE,
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,aAGE,gDAAiD,CADjD,+BAAgC,CADhC,YAGF,CACA,yJAME,2CACF,CACA,+BACE,2CACF,CACA,kBACE,uBAAyB,CACzB,wBACF,CACA,uCACE,gEACE,UACF,CACF,CACA,sBAGE,kBAAmB,CADnB,YAAa,CADb,mBAAqB,CAGrB,UACF,CACA,uCACE,sBAEE,sBAAuB,CADvB,qBAEF,CACF,CACA,4BAEE,YAAa,CAEb,WAAY,CADZ,gBAAiB,CAFjB,UAIF,CACA,0DACE,MAAO,CACP,WACF,CACA,sEACE,eACF,CACA,wCACE,4BACE,YAAa,CACb,qBAAsB,CACtB,YACF,CACF,CACA,uCACE,4BACE,gBACF,CACF,CACA,oBAEE,aAAc,CADd,mBAEF,CACA,uCACE,oBACE,UACF,CACF,CACA,gDAIE,6CAA+C,CAF/C,iBAAkB,CAClB,gBAEF,CACA,uCACE,gDAIE,yBAA4B,CAD5B,eAAgB,CADhB,2BAGF,CACF,CACA,qBAEE,kBAAmB,CADnB,YAAa,CAEb,kBACF,CACA,gDACE,YAAa,CACb,qBAAsB,CACtB,eACF,CACA,wCACE,gDACE,gBACF,CACF,CACA,0CAGE,WAAY,CADZ,cAAe,CADf,iBAGF,CACA,4CAOE,aAAc,CALd,WAAY,CAIZ,kBAAoB,CAHpB,eAAgB,CAChB,gBAAiB,CACjB,sBAAuB,CAJvB,UAOF,CACF","file":"style.css","sourcesContent":["@layer components {\n .body-banner {\n display: flex;\n color: var(--color-text-default);\n background-color: var(--color-background-primary);\n }\n .body-banner:not([class*=background-],\n [class*=surface-],\n [class*=fill-],\n [style*=\"--color-background\"],\n [style*=\"--color-fill\"],\n [style*=\"--color-surface\"]) {\n border: 1px solid var(--color-border-strong);\n }\n .body-banner.background-accent {\n border: 1px solid var(--color-border-accent);\n }\n .body-banner.grid {\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n @media screen and (max-width: 767.98px) {\n .body-banner:not(.body-banner--large) .body-banner__button .btn {\n width: 100%;\n }\n }\n .body-banner__content {\n padding: 0 !important;\n display: flex;\n align-items: center;\n width: 100%;\n }\n @media screen and (max-width: 767.98px) {\n .body-banner__content {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n .body-banner__content-inner {\n width: 100%;\n display: flex;\n padding: 1.875rem;\n gap: 3.75rem;\n }\n .body-banner__content-inner > div:not(.body-banner__button) {\n flex: 1;\n min-width: 0;\n }\n .body-banner__content-inner > div:not(.body-banner__button) > *:last-child {\n margin-bottom: 0;\n }\n @media screen and (max-width: 1239.98px) {\n .body-banner__content-inner {\n display: flex;\n flex-direction: column;\n gap: 1.875rem;\n }\n }\n @media screen and (max-width: 767.98px) {\n .body-banner__content-inner {\n padding: 0.9375rem;\n }\n }\n .body-banner__image {\n padding: 0 !important;\n flex-shrink: 0;\n }\n @media screen and (max-width: 767.98px) {\n .body-banner__image {\n width: 100%;\n }\n }\n .body-banner__image img,\n .body-banner__image svg {\n max-height: 7.5rem;\n object-fit: cover;\n margin: 1.875rem 0 1.875rem 1.875rem !important;\n }\n @media screen and (max-width: 767.98px) {\n .body-banner__image img,\n .body-banner__image svg {\n width: calc(100% - 1.875rem);\n max-height: none;\n margin: 0.9375rem !important;\n }\n }\n .body-banner__button {\n display: flex;\n align-items: center;\n margin: 0 !important;\n }\n .body-banner--large .body-banner__content-inner {\n display: flex;\n flex-direction: column;\n padding: 3.75rem;\n }\n @media screen and (max-width: 1239.98px) {\n .body-banner--large .body-banner__content-inner {\n padding: 1.875rem;\n }\n }\n .body-banner--large .body-banner__image > * {\n width: fit-content;\n max-width: 100%;\n height: 100%;\n }\n .body-banner--large .body-banner__image img {\n width: 100%;\n height: 100%;\n max-height: none;\n object-fit: cover;\n object-position: center;\n margin: 0 !important;\n display: block;\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;justify-content:space-between;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:not(.tile--action) .tile__body>.icon:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge),.tile:not(.tile--action) .tile__body>svg:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge){height:1.5rem;width:1.5rem}@media screen and (min-width:768px){.tile:not(.tile--action) .tile__body>.icon:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge),.tile:not(.tile--action) .tile__body>svg:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge){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 .tile__body>.icon:last-child{
|
|
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;justify-content:space-between;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:not(.tile--action) .tile__body>.icon:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge),.tile:not(.tile--action) .tile__body>svg:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge){height:1.5rem;width:1.5rem}@media screen and (min-width:768px){.tile:not(.tile--action) .tile__body>.icon:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge),.tile:not(.tile--action) .tile__body>svg:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge){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 .tile__body>.icon:last-child:not(.icon--small,.icon--medium,.icon--large,.icon--xlarge,.icon--xxlarge,.icon--huge){--icon-size:1.5rem;flex-shrink:0}@media screen and (min-width:480px){.tile--action .tile__body>.icon:last-child:not(.icon--small,.icon--medium,.icon--large,.icon--xlarge,.icon--xxlarge,.icon--huge){--icon-size: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,CAGtB,WAAY,CADZ,6BAA8B,CAE9B,eAAgB,CAChB,SACF,CACA,wBACE,eACF,CACA,oCACE,YACE,qBAAsB,CACtB,gBACF,CACF,CACA,kTAEE,aAAc,CADd,YAEF,CACA,oCACE,kTAEE,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,
|
|
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,CAGtB,WAAY,CADZ,6BAA8B,CAE9B,eAAgB,CAChB,SACF,CACA,wBACE,eACF,CACA,oCACE,YACE,qBAAsB,CACtB,gBACF,CACF,CACA,kTAEE,aAAc,CADd,YAEF,CACA,oCACE,kTAEE,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,iIAOE,kBAAmB,CADnB,aAEF,CACA,oCACE,iIAME,gBACF,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 justify-content: space-between;\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:not(.tile--action) .tile__body > .icon:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge), .tile:not(.tile--action) .tile__body > svg:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge) {\n width: 1.5rem;\n height: 1.5rem;\n }\n @media screen and (min-width: 768px) {\n .tile:not(.tile--action) .tile__body > .icon:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge), .tile:not(.tile--action) .tile__body > svg:not(.icon--small):not(.icon--medium):not(.icon--large):not(.icon--xlarge):not(.icon--xxlarge):not(.icon--huge) {\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 .tile__body > .icon:last-child:not(.icon--small,\n .icon--medium,\n .icon--large,\n .icon--xlarge,\n .icon--xxlarge,\n .icon--huge) {\n flex-shrink: 0;\n --icon-size: 1.5rem;\n }\n @media screen and (min-width: 480px) {\n .tile--action .tile__body > .icon:last-child:not(.icon--small,\n .icon--medium,\n .icon--large,\n .icon--xlarge,\n .icon--xxlarge,\n .icon--huge) {\n --icon-size: 2rem;\n }\n }\n}"]}
|