@ilo-org/styles 1.0.0 → 1.0.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/css/components/accordion.css +1 -1
- package/css/components/hero.css +1 -1
- package/css/components/tabs.css +1 -1
- package/css/global.css.map +1 -1
- package/css/index.css +8 -8
- package/css/index.css.map +1 -1
- package/css/monorepo.css +8 -8
- package/css/monorepo.css.map +1 -1
- package/package.json +1 -1
- package/scss/_mixins.scss +1 -1
- package/scss/components/_accordion.scss +3 -3
- package/scss/components/_hero.scss +214 -209
- package/scss/components/_tabs.scss +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ilo--accordion{margin-right:.2143622722rem}.ilo--accordion--button{display:flex;align-items:center;flex-direction:row;justify-content:space-between;text-align:start;width:100%;margin:0;padding:.857449089rem 0;padding-inline-end
|
|
1
|
+
@charset "UTF-8";.ilo--accordion{margin-right:.2143622722rem}.ilo--accordion--button{display:flex;align-items:center;flex-direction:row;justify-content:space-between;text-align:start;width:100%;margin:0;padding:.857449089rem 0;padding-inline-end:2.3579849946rem;background-color:#fff;background-position:calc(100% - .3215434084rem) 50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border:none;border-top:2px solid #edf0f2;fill:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;color:#230050;font-weight:500;font-size:16px;letter-spacing:-.02em;line-height:21.6px;transition:all .5s ease-in-out;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button--large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:1.0718113612rem 0;padding-inline-end:2.3579849946rem}.ilo--accordion--button:focus,.ilo--accordion--button:hover{background-color:#ebf5fd;border-top-color:#1e2dbe;color:#1e2dbe;cursor:pointer;fill:#1e2dbe}.ilo--accordion--button:focus[aria-expanded=true],.ilo--accordion--button:hover[aria-expanded=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button:focus[aria-expanded=false],.ilo--accordion--button:hover[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}@media screen and (min-width:610px){.ilo--accordion--button{font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--accordion--button--large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:1.0718113612rem 0;padding-inline-end:2.3579849946rem}}.ilo--accordion--button[aria-expanded=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--accordion--button{background-position:calc(0% + .3215434084rem) 50%}.ilo--accordion--panel{max-height:0;transition:all .5s cubic-bezier(0,1,0,1);overflow:hidden}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:1.9292604502rem;padding-top:.4287245445rem}.ilo--accordion--panel--open{max-height:100vh;transition:all .5s ease-in-out}.ilo--accordion--panel--open.ilo--accordion--panel__scroll{max-height:300px;overflow-y:auto;padding-right:1.7148981779rem}
|
package/css/components/hero.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.hero{--added-offset:0px;--base-offset:calc(((100vw - 1300px) / 2));--breadcrumb-padding:max(var(--base-offset),0.857449089rem);--card-padding-start:71px;--corner-cut-height:40px;width:100%;display:grid;position:relative;grid-template-columns:1fr;overflow:hidden;grid-template-rows:minmax(1rem,1fr) 27px 40px auto
|
|
1
|
+
.hero{--added-offset:0px;--base-offset:calc(((100vw - 1300px) / 2));--breadcrumb-padding:max(var(--base-offset),0.857449089rem);--card-padding-start:71px;--corner-cut-height:40px;width:100%;display:grid;position:relative;grid-template-columns:1fr;overflow:hidden;grid-template-rows:minmax(1rem,1fr) 27px 40px auto}.hero--image{display:grid;grid-template-rows:minmax(216px,1fr) 27px 40px auto}.hero__gap__transparent{background:0 0}.hero__gap__white{background-color:#fff}.hero__gap__light{background-color:#ebf5fd}.hero__gap__dark{background-color:#230050}.hero--background{display:grid;background-color:#ebf5fd;position:relative;grid-area:1/1/4/2}.hero--background img{position:absolute;object-fit:cover;width:100%;height:100%}.hero--breadcrumbs{grid-area:1/1/2/5;z-index:1;display:flex;flex-flow:row nowrap}.hero--breadcrumbs--wrapper{width:100%}.hero--card{grid-area:3/1/5/2}.hero--caption{grid-area:2/1/3/2}.hero--caption--wrapper{background:#2d2d2d;height:27px;width:30px;display:flex;justify-content:center;align-items:center;position:relative}.hero--caption--wrapper:after{content:"";position:absolute;top:0;width:0;height:0;border-top:27px solid transparent;left:100%;border-right:none;border-left:23px solid #2d2d2d}@media screen and (min-width:1024px){.hero{--card-width:625px;--corner-cut-height:64px;--breadcrumbs-height:48px;--image-gap:240px;--row-1-lg:var(--breadcrumbs-height);--row-2-lg:calc(var(--image-gap) - var(--breadcrumbs-height));--row-3-lg:auto;--row-4-lg:27px;--row-5-lg:72px;--col-1-lg:0;--col-2-lg:var(--card-width);--col-3-lg:30px;--col-4-lg:1fr;grid-template-rows:var(--row-1-lg) var(--row-2-lg) var(--row-3-lg) var(--row-4-lg);grid-template-columns:var(--col-1-lg) var(--col-2-lg) var(--col-3-lg) var(--col-4-lg)}.hero__poster-size__small{--image-gap:112px}.hero__poster-size__medium{--image-gap:176px}.hero__poster-size__large{--image-gap:240px}.hero__poster-size__xlarge{--image-gap:527px}.hero__card-size__small{--card-width:625px}.hero__card-size__medium{--card-width:721px}.hero__card-size__large{--card-width:856px}.hero__card-size__xlarge{--card-width:920px}.hero__card-size__xxlarge{--card-width:998px}.hero__card-justify__offset,.hero__card-justify__start{--card-padding-start:max(16px,min(var(--base-offset) + var(--added-offset),71px));--col-1-lg:calc(var(--base-offset) - 71px + var(--added-offset))}.hero__card-justify__offset{--added-offset:109px}.hero__card-justify__center{--col-1-lg:calc((100% - var(--card-width)) / 2);--col-4-lg:calc(((100% - var(--card-width)) / 2) - 30px)}.hero__card-align__center{--row-4-lg:45px;--row-5-lg:27px}.hero__card-align__bottom{--row-3-lg:0;--row-4-lg:var(--corner-cut-height);--row-5-lg:auto}.hero__card-background__transparent .hero--card-offset{background-color:transparent!important;box-shadow:none!important}.hero__card-theme__dark .hero--card-offset{background-color:#230050;position:relative;box-shadow:.3px 0 0 0 #230050}.hero__card-theme__dark[class*=semi-transparent] .hero--card-offset{background:rgba(35,0,80,.6);box-shadow:.3px 0 0 0 rgba(35,0,80,.6)}.hero__card-theme__light .hero--card-offset{background:#fff;box-shadow:.3px 0 0 0 #fff}.hero__card-theme__light[class*=semi-transparent] .hero--card-offset{background:hsla(0,0%,100%,.6);box-shadow:.3px 0 0 0 hsla(0,0%,100%,.6)}.hero--background{grid-area:1/1/5/5}.hero__card-align__center .hero--background{grid-area:1/1/6/5}.hero__card-align__bottom .hero--background{grid-area:1/1/5/5}.hero--card-offset{grid-area:3/1/6/2;z-index:0;position:relative}.hero__card-justify__center .hero--card-offset,.hero__card-justify__offset .hero--card-offset{background:0 0!important}.hero__card-align__center .hero--card-offset{grid-area:3/1/4/2}.hero__card-align__bottom .hero--card-offset{grid-area:4/1/6/2}.hero--card{grid-area:3/2/6/3}.hero__card-align__center .hero--card{grid-area:3/2/4/3}.hero__card-align__bottom .hero--card{grid-area:4/2/6/3}.hero--caption{grid-area:4/3/5/4;position:relative}.hero__card-align__center .hero--caption{grid-area:5/1/6/3}.hero__card-align__bottom .hero--caption{grid-area:4/1/5/2}.hero__card-align__bottom .hero--caption--wrapper,.hero__card-align__center .hero--caption--wrapper{position:absolute;left:0;bottom:0}.hero__card-align__bottom.hero__card-justify__start .hero--caption{grid-area:1/1/3/3}.hero__card-align__bottom.hero__card-justify__offset .hero--caption{grid-area:1/2/3/3}.hero__card-align__bottom.hero__card-justify__offset .hero--caption .hero--caption--wrapper,.hero__card-align__bottom.hero__card-justify__start .hero--caption .hero--caption--wrapper{background:#2d2d2d;height:27px;width:30px;display:flex;justify-content:center;align-items:center;position:relative;position:absolute;left:0;right:auto;bottom:0}.hero__card-align__bottom.hero__card-justify__offset .hero--caption .hero--caption--wrapper:after,.hero__card-align__bottom.hero__card-justify__start .hero--caption .hero--caption--wrapper:after{content:"";position:absolute;top:0;width:0;height:0;border-top:27px solid transparent;left:100%;border-right:none;border-left:23px solid #2d2d2d}.hero--caption--wrapper{left:2px}}[dir=rtl] .hero--caption--wrapper{background:#2d2d2d;height:27px;width:30px;display:flex;justify-content:center;align-items:center;position:relative;right:0;position:absolute}[dir=rtl] .hero--caption--wrapper:after{content:"";position:absolute;top:0;width:0;height:0;border-top:27px solid transparent;left:auto;right:100%;border-left:none;border-right:23px solid #2d2d2d}@media screen and (min-width:1024px){[dir=rtl] .hero__card-align__bottom.hero__card-justify__offset .hero--caption--wrapper,[dir=rtl] .hero__card-align__bottom.hero__card-justify__start .hero--caption--wrapper{background:#2d2d2d;height:27px;width:30px;display:flex;justify-content:center;align-items:center;position:relative;position:absolute;left:auto;right:0;bottom:0}[dir=rtl] .hero__card-align__bottom.hero__card-justify__offset .hero--caption--wrapper:after,[dir=rtl] .hero__card-align__bottom.hero__card-justify__start .hero--caption--wrapper:after{content:"";position:absolute;top:0;width:0;height:0;border-top:27px solid transparent;left:auto;right:100%;border-left:none;border-right:23px solid #2d2d2d}}
|
package/css/components/tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ilo--tabs{border-bottom:.1607717042rem solid #edf0f2;border-left:.1607717042rem solid #edf0f2;border-right:.1607717042rem solid #edf0f2}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection{margin-bottom:1.2861736334rem}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button{background:transparent;border-bottom:1.5px solid #1e2dbe;color:#230050;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:none;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button:visited{background:transparent;border-bottom:1.5px solid #960a55;color:#960a55}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button:hover{background:#fff;border-bottom:3px solid #1e2dbe;color:#1e2dbe;text-decoration:none;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button:active,.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button:focus{background:transparent;border-bottom:1.5px solid #1e2dbe;color:#230050;outline:0}.ilo--tabs.tabs--js .ilo--tabs--selection{--tabscount:1;display:block}.ilo--tabs.tabs--js .ilo--tabs--selection--button{align-items:center;background-color:#edf0f2;border-bottom:.1607717042rem solid #fff;color:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:600;display:flex;height:3.2154340836rem;justify-content:flex-start;padding-left:.4287245445rem;padding-right:1.2861736334rem;text-decoration:none;font-size:16px;letter-spacing:-.02em;line-height:21.6px;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs.tabs--js .ilo--tabs--selection--button[aria-selected=true]{background-color:#fff;border-top:.1607717042rem solid #230050;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs.tabs--js .ilo--tabs--selection--button.icon .ilo--icon{height:.857449089rem;margin-right:.2679528403rem;order:1;width:.857449089rem}.ilo--tabs.tabs--js .ilo--tabs--selection--button.icon .ilo--tabs--selection--label{order:2}.ilo--tabs.tabs--js .ilo--tabs--selection--button:hover,.ilo--tabs.tabs--js .ilo--tabs--selection--button[aria-selected=true]:hover{background-color:#ebf5fd;color:#1e2dbe;outline:0;border-top:.1607717042rem solid #1e2dbe;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs.tabs--js .ilo--tabs--selection--button:hover.has--tooltip .ilo--tooltip--wrapper,.ilo--tabs.tabs--js .ilo--tabs--selection--button[aria-selected=true]:hover.has--tooltip .ilo--tooltip--wrapper{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%231E2DBE' d='M8 0C6.4 0 4.9.5 3.6 1.3c-1.4.9-2.4 2.2-3 3.6C0 6.4-.2 8 .2 9.6c.3 1.6 1.1 3 2.2 4.1 1.1 1.1 2.5 1.9 4.1 2.2s3.2.2 4.6-.5c1.5-.6 2.7-1.6 3.6-2.9.8-1.4 1.3-2.9 1.3-4.5 0-2.1-.8-4.2-2.3-5.7C12.2.8 10.1 0 8 0zm0 14c-1.2 0-2.3-.4-3.3-1-1-.7-1.8-1.6-2.2-2.7C2 9.2 1.9 8 2.1 6.8c.2-1.2.8-2.2 1.6-3.1.8-.8 1.9-1.4 3.1-1.6 1.2-.2 2.4-.1 3.5.4s2 1.2 2.7 2.2c.7 1 1 2.1 1 3.3 0 1.6-.6 3.1-1.8 4.2C11.1 13.4 9.6 14 8 14z'/%3E%3Cpath fill='%231E2DBE' d='M9 7H7v5h2V7zM8 6c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E")}.ilo--tabs.tabs--js .ilo--tabs--selection--label{
|
|
1
|
+
@charset "UTF-8";.ilo--tabs{border-bottom:.1607717042rem solid #edf0f2;border-left:.1607717042rem solid #edf0f2;border-right:.1607717042rem solid #edf0f2}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection{margin-bottom:1.2861736334rem}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button{background:transparent;border-bottom:1.5px solid #1e2dbe;color:#230050;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:none;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button:visited{background:transparent;border-bottom:1.5px solid #960a55;color:#960a55}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button:hover{background:#fff;border-bottom:3px solid #1e2dbe;color:#1e2dbe;text-decoration:none;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button:active,.ilo--tabs:not(.tabs--js) .ilo--tabs--selection--button:focus{background:transparent;border-bottom:1.5px solid #1e2dbe;color:#230050;outline:0}.ilo--tabs.tabs--js .ilo--tabs--selection{--tabscount:1;display:block}.ilo--tabs.tabs--js .ilo--tabs--selection--button{align-items:center;background-color:#edf0f2;border-bottom:.1607717042rem solid #fff;color:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:600;display:flex;height:3.2154340836rem;justify-content:flex-start;padding-left:.4287245445rem;padding-right:1.2861736334rem;text-decoration:none;font-size:16px;letter-spacing:-.02em;line-height:21.6px;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs.tabs--js .ilo--tabs--selection--button[aria-selected=true]{background-color:#fff;border-top:.1607717042rem solid #230050;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs.tabs--js .ilo--tabs--selection--button.icon .ilo--icon{height:.857449089rem;margin-right:.2679528403rem;order:1;width:.857449089rem}.ilo--tabs.tabs--js .ilo--tabs--selection--button.icon .ilo--tabs--selection--label{order:2}.ilo--tabs.tabs--js .ilo--tabs--selection--button:hover,.ilo--tabs.tabs--js .ilo--tabs--selection--button[aria-selected=true]:hover{background-color:#ebf5fd;color:#1e2dbe;outline:0;border-top:.1607717042rem solid #1e2dbe;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tabs.tabs--js .ilo--tabs--selection--button:hover.has--tooltip .ilo--tooltip--wrapper,.ilo--tabs.tabs--js .ilo--tabs--selection--button[aria-selected=true]:hover.has--tooltip .ilo--tooltip--wrapper{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%231E2DBE' d='M8 0C6.4 0 4.9.5 3.6 1.3c-1.4.9-2.4 2.2-3 3.6C0 6.4-.2 8 .2 9.6c.3 1.6 1.1 3 2.2 4.1 1.1 1.1 2.5 1.9 4.1 2.2s3.2.2 4.6-.5c1.5-.6 2.7-1.6 3.6-2.9.8-1.4 1.3-2.9 1.3-4.5 0-2.1-.8-4.2-2.3-5.7C12.2.8 10.1 0 8 0zm0 14c-1.2 0-2.3-.4-3.3-1-1-.7-1.8-1.6-2.2-2.7C2 9.2 1.9 8 2.1 6.8c.2-1.2.8-2.2 1.6-3.1.8-.8 1.9-1.4 3.1-1.6 1.2-.2 2.4-.1 3.5.4s2 1.2 2.7 2.2c.7 1 1 2.1 1 3.3 0 1.6-.6 3.1-1.8 4.2C11.1 13.4 9.6 14 8 14z'/%3E%3Cpath fill='%231E2DBE' d='M9 7H7v5h2V7zM8 6c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E")}.ilo--tabs.tabs--js .ilo--tabs--selection--label{display:-webkit-box;-webkit-line-clamp:1;overflow:hidden;padding-top:.2143622722rem}.ilo--tabs.tabs--js .ilo--tabs--selection--item{display:block;width:100%}.ilo--tabs.tabs--js .ilo--tabs--selection--item:last-of-type .ilo--tabs--selection--button{border-bottom:none;border-right:none}.ilo--tabs.tabs--js .ilo--tabs--content{background-color:#fff;padding:2.1436227224rem 1.2861736334rem 3.0010718114rem}.ilo--tabs.tabs--js .ilo--tabs--content [aria-expanded=false]{display:none}.ilo--tabs.tabs--js .ilo--tabs--content [aria-expanded=true]{display:block}@media screen and (min-width:610px){.ilo--tabs.tabs--js .ilo--tabs--content{padding:2.1436227224rem 3.4297963558rem 3.4297963558rem}.ilo--tabs.tabs--js .ilo--tabs--selection{display:flex;max-width:100%;overflow-x:hidden;overflow-y:hidden}.ilo--tabs.tabs--js .ilo--tabs--selection--button{border-bottom:none;border-right:.2679528403rem solid #fff}.ilo--tabs.tabs--js .ilo--tabs--selection--item{width:min(var(--tabscount)/1 * 100%,100%)}}@media screen and (min-width:1024px){.ilo--tabs.tabs--js .ilo--tabs--selection--item{width:min(var(--tabscount)/1 * 100%,100%)}}
|