@clikvn/otrip-ui-library
Version:
React library to display clik otrip ui library.
2 lines (1 loc) • 10.3 kB
CSS
.otrip-ui-input-search{position:relative;width:100%}.otrip-ui-input-search>input{background:#fff;border:1px solid #e4e4e7;border-radius:8px;box-sizing:border-box;color:#0000008c;font-size:14px;font-weight:400;height:40px;line-height:20px;padding:8px 8px 8px 12px;width:100%;padding-left:32px;transition:all 0.3s ease}.otrip-ui-input-search>input:focus-visible{outline:none}.otrip-ui-input-search__button{align-items:center;background-color:#f6475f;border-radius:100%;cursor:pointer;height:28px;justify-content:center;position:absolute;right:8px;top:6px;width:28px;transition:transform 0.3s ease;transform:translateX(0);display:none;z-index:2}.otrip-ui-input-search__button [class*="clik-font-icon-"]{color:#fff;font-size:16px}.otrip-ui-input-search__button-left{align-items:center;border-radius:100%;cursor:pointer;display:flex;height:16px;justify-content:center;left:12px;position:absolute;top:12px;width:16px;transition:all 0.3s ease}.otrip-ui-input-search__button-left [class*="clik-font-icon-"]{font-size:16px }.otrip-ui-input-search--focus .otrip-ui-input-search__button-left{display:none}.otrip-ui-input-search--focus .otrip-ui-input-search__button{display:flex}.otrip-ui-input-search--focus>input{padding-left:12px;padding-right:40px;animation:padding-from-right 0.3s ease forwards}@keyframes slide-from-right{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes padding-from-right{from{padding-right:8px;padding-left:32px}to{padding-right:40px;padding-left:12px}}.otrip-ui-tab{border-bottom:1px solid var(--zinc-200, #e4e4e7);display:grid;grid-auto-flow:column;overflow-x:auto;scroll-behavior:smooth}.otrip-ui-tab::-webkit-scrollbar{display:none}.otrip-ui-tab__item{border-bottom:2px solid transparent;box-sizing:border-box;color:rgba(0,0,0,0.55);cursor:pointer;display:flex;flex-direction:column;font-size:14px;font-style:normal;font-weight:600;line-height:20px;gap:4px;line-height:150%;padding:4px 12px;position:relative;text-align:center;white-space:nowrap;width:auto}.otrip-ui-tab__item>span{color:#71717a;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.otrip-ui-tab__item [class*=" clik-font-icon-"]{color:#71717a;font-size:16px}.otrip-ui-tab__item--disabled{cursor:not-allowed;opacity:0.6}.otrip-ui-tab__item--active{border-bottom:2px solid #f6475f}.otrip-ui-tab__item--active [class*="clik-font-icon-"]{color:#18181b }.otrip-ui-tab__item--active>span{color:#18181b}.otrip-ui-tab--block{grid-template-columns:repeat(auto-fit, minmax(64px, 1fr))}.otrip-ui-tab--block .otrip-ui-tab__item{flex-basis:content;flex-grow:1;flex-shrink:1}.otrip-ui-card{width:100%}.otrip-ui-card__gallery{border-radius:16px;padding-top:85%;position:relative;width:100%;overflow:hidden}.otrip-ui-card__gallery .ant-carousel{position:absolute;top:0;width:100%;height:100%;left:0}.otrip-ui-card__gallery-content{width:100%;height:100%}.otrip-ui-card__tag{backdrop-filter:blur(20px);background:linear-gradient(0deg, rgba(87,87,87,0.04) 0%, rgba(87,87,87,0.04) 100%),rgba(255,255,255,0.55);background-blend-mode:color-dodge, lighten;border-radius:100px;color:#0000008c;font-size:10px;font-weight:400;left:12px;line-height:18px;padding:0 8px;position:absolute;top:12px;z-index:2}.otrip-ui-card__subtitle{align-items:center;display:flex;gap:4px;margin-top:12px}.otrip-ui-card__subtitle>i{color:#00000073;font-size:16px}.otrip-ui-card__subtitle-name{color:var(--color-text-color-text-second, rgba(0,0,0,0.55));font-size:14px;font-weight:400;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.otrip-ui-card__title{-webkit-box-orient:vertical;color:#000000d9;font-size:16px;font-style:normal;font-weight:500;line-height:24px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}.otrip-ui-card__description{color:#0000008c;font-size:14px;font-weight:400;line-height:20px;margin-top:8px;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}.otrip-ui-gallery{height:100%;position:relative;z-index:1}.otrip-ui-gallery .slick-list,.otrip-ui-gallery .slick-track,.otrip-ui-gallery .slick-slide{height:100%}.otrip-ui-gallery .slick-list>div,.otrip-ui-gallery .slick-track>div,.otrip-ui-gallery .slick-slide>div{height:100%}.otrip-ui-gallery .slick-list>div>img,.otrip-ui-gallery .slick-track>div>img,.otrip-ui-gallery .slick-slide>div>img{border-radius:16px;height:100%;object-fit:cover;width:100%}.otrip-ui-gallery .slick-dots{margin:0}.otrip-ui-gallery .slick-dots li{width:fit-content}.otrip-ui-gallery .slick-dots li button{background:#b0b0b0;border-radius:4px;height:6px;opacity:1;width:6px}.otrip-ui-gallery .slick-dots li.slick-active{width:fit-content}.otrip-ui-gallery .slick-dots li.slick-active button{background:#f6475f;width:12px}.otrip-ui-mobile-layout{box-sizing:border-box;height:fit-content;position:relative;width:100%}.otrip-ui-mobile-layout__header{background:#fff;box-sizing:border-box;padding:8px 16px 0px 16px;width:100%}.otrip-ui-mobile-layout__header-title{color:var(--color-text-color-text-default, rgba(0,0,0,0.85));font-size:32px;font-weight:600;line-height:40px;text-align:center}.otrip-ui-mobile-layout__header-description{align-self:stretch;color:var(--color-text-color-text-second, rgba(0,0,0,0.55));font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:4px;text-align:center}.otrip-ui-mobile-layout__search-wrapper{width:100%;display:flex}.otrip-ui-mobile-layout__affix{background-color:#fff;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding-top:8px;position:sticky;top:var(--affix-offset-top);z-index:1000}.otrip-ui-mobile-layout__affix .otrip-ui-input-search{box-sizing:border-box;margin:0 16px}.otrip-ui-mobile-layout__affix .otrip-ui-tab{padding:0 16px}.otrip-ui-mobile-layout__content{padding:0 16px 16px 16px}.otrip-ui-gallery-fullscreen{height:100%;position:relative;width:100%;z-index:1}.otrip-ui-gallery-fullscreen__container{height:calc(100% - var(--gap-bottom-content));position:relative;width:100%}.otrip-ui-gallery-fullscreen__container .ant-carousel{height:100%}.otrip-ui-gallery-fullscreen__container .slick-slider{height:100%}.otrip-ui-gallery-fullscreen__container .slick-slider .slick-list,.otrip-ui-gallery-fullscreen__container .slick-slider .slick-track,.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide,.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div,.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div>div{height:100%}.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div>div{align-items:center;display:flex ;justify-content:center}.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div>div .react-transform-wrapper{height:100%;width:100%}.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div>div .react-transform-wrapper .react-transform-component{height:100%;width:100%}.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div>div .react-transform-wrapper .container-preview-img{height:100%;width:100%;object-fit:contain}.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div>div .react-transform-wrapper .container-preview-img--fade-in{animation:fadeIn 1s}.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div>div .container-preview-video{height:100%;width:100%}.otrip-ui-gallery-fullscreen__container .slick-slider .slick-slide>div>div .container-preview-video--fade-in{animation:fadeIn 1s}.otrip-ui-gallery-fullscreen__container-image{width:100%;height:100%}.otrip-ui-gallery-fullscreen__action-button{border-color:transparent ;border-radius:100%;box-shadow:0px 1px 8px rgba(0,0,0,0.24);height:42px ;position:absolute;top:50%;transform:translateY(-50%);width:42px }.otrip-ui-gallery-fullscreen__action-button>i{font-size:20px}.otrip-ui-gallery-fullscreen__action-button--right{right:0.25rem}.otrip-ui-gallery-fullscreen__action-button--left{left:0.25rem}.otrip-ui-gallery-fullscreen__thumbnail-action-button{align-items:center;cursor:pointer;display:flex;height:42px;justify-content:center;width:42px}.otrip-ui-gallery-fullscreen__thumbnail-action-button i{font-size:24px}.otrip-ui-gallery-fullscreen__thumbnail-action-button--disabled{opacity:0.5;pointer-events:none}.otrip-ui-gallery-fullscreen__thumbnail-action-button .icon::before{color:#fff}.otrip-ui-gallery-fullscreen__thumbnail-action{align-items:center;background-color:rgba(0,0,0,0.3);border-radius:100px;display:flex;left:50%;margin-bottom:14px;position:relative;transform:translateX(-50%);width:fit-content;z-index:1}.otrip-ui-gallery-fullscreen__thumbnail{bottom:0;box-sizing:border-box;left:0;padding:8px;position:absolute;width:100%}.test{width:100%;height:100%}.test .react-transform-wrapper{width:100%;height:100%}.test .react-transform-wrapper .react-transform-component{width:100%;height:100%}.test .react-transform-wrapper .react-transform-component img{width:100%;height:100%}.otrip-gallery-thumbnail{display:flex;flex-direction:column;gap:12px;height:fit-content;overflow:auto;transition:all 0.2s ease-in-out;width:100%}.otrip-gallery-thumbnail::-webkit-scrollbar{display:none}.otrip-gallery-thumbnail__thumb-wrapper{height:fit-content;overflow:hidden;position:relative;width:100%}.otrip-gallery-thumbnail__thumb-wrapper--mobile{overflow:auto}.otrip-gallery-thumbnail__thumb-content{display:flex;gap:var(--gap-thumbnail);height:fit-content;min-width:100%;width:fit-content}.otrip-gallery-thumbnail__thumb-content--centered{justify-content:center}.otrip-gallery-thumbnail__image{background:rgba(255,255,255,0.24);border-radius:12px;cursor:pointer;height:var(--size-thumbnail);object-fit:cover;opacity:0.7;overflow:hidden;position:relative;width:var(--size-thumbnail)}.otrip-gallery-thumbnail__image>img{height:100%;width:100%}.otrip-gallery-thumbnail__image--active{opacity:1}.otrip-gallery-thumbnail__image--active:after{border:4px solid #fff;border-radius:12px;bottom:0;box-sizing:border-box;content:"";height:100%;left:0;overflow:hidden;position:absolute;width:100%}.otrip-gallery-thumbnail__image-button-play{left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}