@iamproperty/components 5.1.0-beta7 → 5.1.0-beta8
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/assets/css/components/accordion.global.css.map +1 -1
- package/assets/css/components/card.css +1 -1
- package/assets/css/components/card.css.map +1 -1
- package/assets/css/components/carousel.css +1 -1
- package/assets/css/components/carousel.css.map +1 -1
- package/assets/css/components/component.native.css +1 -1
- package/assets/css/components/component.native.css.map +1 -1
- package/assets/css/components/component.reset.css +1 -1
- package/assets/css/components/component.reset.css.map +1 -1
- package/assets/css/components/fileupload.css +1 -1
- package/assets/css/components/fileupload.css.map +1 -1
- package/assets/css/components/header.css +1 -1
- package/assets/css/components/header.css.map +1 -1
- package/assets/css/components/marketing.css +1 -0
- package/assets/css/components/marketing.css.map +1 -0
- package/assets/css/components/nav.css +1 -1
- package/assets/css/components/nav.css.map +1 -1
- package/assets/css/components/nav.global.css +1 -1
- package/assets/css/components/nav.global.css.map +1 -1
- package/assets/css/components/slider.css.map +1 -1
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.min.css.map +1 -1
- package/assets/css/style.min.css +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/img/signin-bg.png +0 -0
- package/assets/js/components/accordion/accordion.component.min.js +1 -1
- package/assets/js/components/actionbar/actionbar.component.min.js +1 -1
- package/assets/js/components/address-lookup/address-lookup.component.min.js +1 -1
- package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
- package/assets/js/components/card/card.component.js +2 -1
- package/assets/js/components/card/card.component.min.js +4 -3
- package/assets/js/components/card/card.component.min.js.map +1 -1
- package/assets/js/components/carousel/carousel.component.js +61 -0
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js +1 -1
- package/assets/js/components/fileupload/fileupload.component.min.js +2 -2
- package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
- package/assets/js/components/header/header.component.js +6 -12
- package/assets/js/components/header/header.component.min.js +8 -14
- package/assets/js/components/header/header.component.min.js.map +1 -1
- package/assets/js/components/marketing/marketing.component.js +37 -0
- package/assets/js/components/nav/nav.component.min.js +3 -3
- package/assets/js/components/notification/notification.component.min.js +1 -1
- package/assets/js/components/pagination/pagination.component.min.js +1 -1
- package/assets/js/components/search/search.component.min.js +1 -1
- package/assets/js/components/table/table.component.min.js +1 -1
- package/assets/js/components/tabs/tabs.component.min.js +1 -1
- package/assets/js/dynamic.js +1 -1
- package/assets/js/dynamic.min.js +3 -3
- package/assets/js/dynamic.min.js.map +1 -1
- package/assets/js/modules/carousel.js +15 -23
- package/assets/js/scripts.bundle.js +11 -16
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +2 -2
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/sass/_corefiles.scss +1 -0
- package/assets/sass/_elements.scss +1 -1
- package/assets/sass/_functions/mixins.scss +16 -0
- package/assets/sass/_functions/utilities.scss +0 -17
- package/assets/sass/_functions/variables.scss +1 -0
- package/assets/sass/components/card.scss +23 -3
- package/assets/sass/components/carousel.scss +86 -159
- package/assets/sass/components/component.native.scss +86 -3
- package/assets/sass/components/fileupload.scss +1 -1
- package/assets/sass/components/header.scss +53 -55
- package/assets/sass/components/marketing.scss +64 -0
- package/assets/sass/components/nav.global.scss +1 -0
- package/assets/sass/components/nav.scss +7 -1
- package/assets/sass/elements/admin-panel.scss +9 -7
- package/assets/sass/elements/badge.scss +29 -0
- package/assets/sass/elements/forms.scss +3 -3
- package/assets/sass/elements/links.scss +2 -1
- package/assets/sass/foundations/reboot.scss +12 -13
- package/assets/sass/foundations/root.scss +11 -3
- package/assets/sass/helpers/max-height.scss +78 -4
- package/assets/sass/templates/auth.scss +112 -0
- package/assets/ts/components/card/card.component.ts +2 -1
- package/assets/ts/components/carousel/README.md +39 -0
- package/assets/ts/components/carousel/carousel.component.ts +75 -0
- package/assets/ts/components/header/header.component.ts +6 -12
- package/assets/ts/components/marketing/marketing.component.ts +49 -0
- package/assets/ts/dynamic.ts +1 -1
- package/assets/ts/modules/carousel.ts +21 -33
- package/dist/components.es.js +459 -663
- package/dist/components.umd.js +95 -83
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/Carousel/Carousel.vue +18 -103
- package/src/components/Header/Header.vue +1 -3
- package/src/components/Marketing/Marketing.vue +39 -0
- package/src/components/Marketing/README.md +20 -0
- package/src/components/Carousel/Carousel.spec.js +0 -45
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.carousel{padding-bottom:3rem}.carousel .carousel__wrapper{position:relative}.carousel .carousel__inner{--gutter-x: 1rem;overflow:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--gutter-x) * -.5);margin-left:calc(var(--gutter-x) * -.5)}.carousel .carousel__inner>.row{flex-wrap:nowrap;margin:0}.carousel .carousel__inner>.row>.col{padding-top:2.25rem;padding-bottom:1.5rem;scroll-snap-align:start;scroll-padding:calc(var(--gutter-x) * -1)}.carousel .carousel__item>*:last-child{margin-bottom:0;padding-bottom:0}body.js-enabled .carousel__inner{scrollbar-width:none;-ms-overflow-style:none}body.js-enabled .carousel__inner::-webkit-scrollbar{display:none}.btn-next,.btn-prev{--marker-bg: var(--colour-secondary);text-indent:100%;white-space:nowrap;background:var(--marker-bg);border-radius:100%;width:2.25rem;height:2.25rem;text-indent:-300rem;overflow:hidden;border:none;position:relative;margin:0 .5rem;padding:0}@media screen and (min-width: 62em){.btn-next,.btn-prev{width:3rem;height:3rem}}.btn-next:disabled,.btn-prev:disabled{opacity:.8;pointer-events:none}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0)}.btn-next:hover,.btn-next:focus,.btn-prev:hover,.btn-prev:focus{background:var(--colour-warning);color:var(--colour-hover);border-radius:100%}.btn-next:active,.btn-prev:active{border-radius:100%}.btn-prev:after{transform:rotate(180deg)}.carousel:not(.hide-controls){padding-bottom:4.5rem!important}.carousel.hide-controls .carousel__controls{display:none}.carousel .carousel__controls{position:absolute;text-align:center;width:auto;left:0;width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;bottom:-3rem}.carousel .carousel__controls a{width:1rem;height:1rem;min-height:1rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:currentColor;padding:0;margin:0 .5rem .5rem}.carousel .carousel__controls a:before{display:none}.carousel .carousel__controls a:first-child:last-child{display:none}.carousel .carousel__controls>a:nth-child(10)~a{display:none}.carousel.hide-btns .carousel__wrapper>.btn{display:none}.carousel:not(.hide-btns) .carousel__inner{margin-left:1.75rem;margin-right:1.75rem}.carousel .carousel__wrapper>.btn{position:absolute;top:50%;left:-1.25rem;transform:translateY(-50%)}.carousel .carousel__wrapper>.btn.btn-next{left:auto;right:-1.25rem}@media screen and (min-width: 62em){.carousel .carousel__wrapper>.btn{margin-left:-1rem;margin-right:-1rem}}.carousel .carousel__inner>.row>.col:first-child{margin-left:0!important}@media screen and (min-width: 36em){.carousel .carousel__controls>a:nth-child(10)~a{display:inline-block}.carousel .carousel__inner>.row[class*=row-cols-sm-]>.col{scroll-snap-align:unset}.carousel .carousel__inner>.row-cols-sm-2>.col:nth-child(odd),.carousel .carousel__inner>.row-cols-sm-3>.col:nth-child(3n+1),.carousel .carousel__inner>.row-cols-sm-4>.col:nth-child(4n+1),.carousel .carousel__inner>.row-cols-sm-5>.col:nth-child(5n+1),.carousel .carousel__inner>.row-cols-sm-6>.col:nth-child(6n+1){scroll-snap-align:start}body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-2>.col:nth-child(odd),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-3>.col:nth-child(3n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-4>.col:nth-child(4n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-5>.col:nth-child(5n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-6>.col:nth-child(6n+1){margin-left:4rem}.carousel .carousel__controls.cols-sm-2>a:not(:nth-child(odd)),.carousel .carousel__controls.cols-sm-3>a:not(:nth-child(3n+1)),.carousel .carousel__controls.cols-sm-4>a:not(:nth-child(4n+1)),.carousel .carousel__controls.cols-sm-5>a:not(:nth-child(5n+1)),.carousel .carousel__controls.cols-sm-6>a:not(:nth-child(6n+1)){display:none}.carousel .carousel__controls.cols-sm-2>a:first-child:nth-last-child(2),.carousel .carousel__controls.cols-sm-3>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3)),.carousel .carousel__controls.cols-sm-4>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4)),.carousel .carousel__controls.cols-sm-5>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),.carousel .carousel__controls.cols-sm-6>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)){display:none}.carousel.hide-sm-btns .carousel__wrapper>.btn{display:none}.carousel.hide-sm-btns .carousel__inner{margin-left:0;margin-right:0}}@media screen and (min-width: 62em){.carousel .carousel__inner>.row[class*=row-cols-md-]>.col{scroll-snap-align:unset;margin-left:0}.carousel .carousel__inner>.row-cols-md-2>.col:nth-child(odd),.carousel .carousel__inner>.row-cols-md-3>.col:nth-child(3n+1),.carousel .carousel__inner>.row-cols-md-4>.col:nth-child(4n+1),.carousel .carousel__inner>.row-cols-md-5>.col:nth-child(5n+1),.carousel .carousel__inner>.row-cols-md-6>.col:nth-child(6n+1){scroll-snap-align:start}body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-2>.col:nth-child(odd),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-3>.col:nth-child(3n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-4>.col:nth-child(4n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-5>.col:nth-child(5n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-6>.col:nth-child(6n+1){margin-left:50vw}.carousel .carousel__controls.cols-md-2>a:not(:nth-child(odd)),.carousel .carousel__controls.cols-md-3>a:not(:nth-child(3n+1)),.carousel .carousel__controls.cols-md-4>a:not(:nth-child(4n+1)),.carousel .carousel__controls.cols-md-5>a:not(:nth-child(5n+1)),.carousel .carousel__controls.cols-md-6>a:not(:nth-child(6n+1)){display:none}.carousel .carousel__controls.cols-md-2>a:first-child:nth-last-child(2),.carousel .carousel__controls.cols-md-3>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3)),.carousel .carousel__controls.cols-md-4>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4)),.carousel .carousel__controls.cols-md-5>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),.carousel .carousel__controls.cols-md-6>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)){display:none}.carousel.hide-md-btns .carousel__wrapper>.btn{display:none}.carousel.hide-md-btns .carousel__inner{margin-left:0;margin-right:0}}.testimonial{--testimonial-padding: 1rem;--testimonial-spacing: 1rem}@media screen and (min-width: 62em){.testimonial{--testimonial-padding: 4rem;--testimonial-spacing: 2rem}}.testimonial>div:first-child{position:relative;overflow:hidden}.testimonial .circle{color:currentColor;position:absolute;top:-18rem;right:-8rem;font-size:28rem;border-width:4px}.testimonial__images{overflow:auto;scroll-snap-type:x mandatory;display:flex;user-select:none;touch-action:pan-x;height:14.375rem}@media screen and (min-width: 36em){.testimonial__images{height:21.25rem}}@media screen and (min-width: 62em){.testimonial__images{min-height:100%;scroll-snap-type:y mandatory;flex-direction:column;touch-action:pan-y}}.testimonial__images img{scroll-snap-align:start;user-select:none;pointer-events:none;flex-shrink:0}.testimonial .testimonial__controls{display:none}.testimonial.testimonial--multi .testimonial__controls{display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}@media screen and (min-width: 62em){.testimonial.testimonial--multi .testimonial__controls{left:auto;bottom:auto;right:0;top:50%;transform:rotate(90deg) translateY(-120%);transform-origin:center}}.testimonial h2{padding:2rem var(--testimonial-padding) 0 var(--testimonial-padding)}@media screen and (min-width: 36em){.testimonial h2{padding-top:3rem}}@media screen and (min-width: 62em){.testimonial h2{padding-top:9rem}}.testimonial__content{--display-none: none;margin:0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);position:relative}@media screen and (min-width: 62em){.testimonial__content{--display-none: block}.testimonial__content blockquote:not(.largest){position:absolute;top:0}}.testimonial[data-show="1"] blockquote:not(:nth-child(1)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="2"] blockquote:not(:nth-child(2)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="3"] blockquote:not(:nth-child(3)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="4"] blockquote:not(:nth-child(4)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="5"] blockquote:not(:nth-child(5)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="6"] blockquote:not(:nth-child(6)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="7"] blockquote:not(:nth-child(7)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="8"] blockquote:not(:nth-child(8)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="9"] blockquote:not(:nth-child(9)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="10"] blockquote:not(:nth-child(10)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial__after{padding:1rem var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding)}.testimonial__images::-webkit-scrollbar{display:none}.testimonial__images{-ms-overflow-style:none;scrollbar-width:none}.timeline{--breakpoint:(100% - 62rem);--pl: clamp(0rem, var(--breakpoint) * -1000, 4rem);--line-pos: clamp(1rem, var(--breakpoint) * 1000, 50%);--circle-pos: 1rem;--line-length: 100%;--img-order: 1;position:relative;padding-top:.25rem;padding-left:var(--pl);padding-bottom:1rem;width:100%;display:flex;justify-content:space-between;flex-direction:row;flex-wrap:wrap;align-items:flex-start}.timeline__container:not(.timeline--simple) .timeline{align-items:center}@media screen and (min-width: 62em){.timeline__container:not(.timeline--simple) .timeline{--img-order: 0;--circle-pos: 50%;--line-length: 50%}}.timeline:before{content:" ";display:block;background:black;width:4px;height:100%;position:absolute;top:0;left:var(--line-pos)}.timeline:after{content:" ";display:block;background:white;width:2rem;height:2rem;margin-top:-1rem;position:absolute;top:var(--circle-pos);left:var(--line-pos);margin-left:calc(-1rem + 2px);border:4px solid black;border-radius:50%}.timeline>*{max-width:28.75rem;order:1}.timeline>img{max-width:min(100%,28.75rem);margin-bottom:2rem}.timeline:nth-child(even)>img{order:var(--img-order)}.timeline:first-child:before{top:var(--circle-pos);height:var(--line-length)}.timeline:last-child{padding-bottom:0;margin-bottom:2rem}.timeline:last-child:before{height:var(--line-length)}.timeline:last-child>img{margin-bottom:0}.property-searchbar fieldset{position:relative}@media screen and (min-width: 62em){.property-searchbar fieldset{position:relative;padding-right:1.5rem}.property-searchbar fieldset:after{content:"";position:absolute;top:0;right:.5rem;display:block;height:100%;width:1px;background-color:var(--colour-muted);opacity:.25}}.property-searchbar .form-control__wrapper{margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar .form-control__wrapper{margin-bottom:0}}.property-searchbar .form-label,.property-searchbar label{font-size:.875rem;text-transform:uppercase}@media screen and (min-width: 62em){.property-searchbar .row .row .form-label{display:none}.property-searchbar .form-control,.property-searchbar .form-select{padding:.5rem 1.5rem .5rem .5rem}.property-searchbar .form-select{background-position:right .5rem center}}.property-searchbar .input--locations{padding-right:5.5rem}.property-searchbar .select--miles{position:absolute;bottom:0rem;right:.5rem;width:5rem}@media screen and (min-width: 62em){.property-searchbar .select--miles{right:1.5rem}}.property-searchbar .select--miles label{display:none}.property-searchbar .select--miles select{background-color:transparent;border-color:transparent}@media screen and (min-width: 62em){.property-searchbar .property-searchbar__btn{align-items:flex-end}}.property-searchbar button{margin-top:1rem;margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar button{margin:0;padding-left:3.5rem;padding-right:3.5rem}}.property-searchbar--hero .property-searchbar{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light);padding:1rem;background-color:#fff;width:100%;border-radius:.625rem;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.24);box-shadow:0 2px 4px #0000003d;position:relative}.property-searchbar--hero .property-searchbar .text-primary{color:var(--colour-primary)!important}@media screen and (min-width: 62em){.property-searchbar--hero .property-searchbar{border-radius:3rem;padding:1.5rem 2.5rem}.property-searchbar--hero .property-searchbar .form-label,.property-searchbar--hero .property-searchbar label{margin-bottom:0}.property-searchbar--hero .property-searchbar .form-control,.property-searchbar--hero .property-searchbar .form-select{margin-left:-.5rem;border:none;padding-top:.25rem;padding-bottom:.25rem}.property-searchbar--hero .property-searchbar .form-select{background-position:right 0rem center;padding-right:1rem}.property-searchbar--hero .property-searchbar .property-searchbar__btn{align-items:center}}.stepper{background:#f0f0f0;display:flex;flex-wrap:wrap;margin-bottom:2rem;border:1px solid var(--colour-canvas);overflow:hidden}@media screen and (min-width: 62em){.stepper{flex-wrap:nowrap;overflow-x:auto}}.stepper ol{margin:0;z-index:1;background:var(--colour-canvas);counter-reset:section;width:100%;overflow:auto}@media screen and (min-width: 36em){.stepper ol{display:flex;flex-grow:1;padding-right:calc(2rem + 1px);margin-top:-1px;margin-bottom:-1px;margin-right:calc(-2rem - 2px);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol{overflow:initial}}.stepper ol li{width:100%;max-width:100%;background:var(--colour-canvas);padding:1px}@media screen and (min-width: 36em){.stepper ol li:first-child a{padding-left:1rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol li:first-child a{padding-left:2rem}}.stepper ol li a{display:block;padding:1rem;text-decoration:none;background:var(--colour-muted);line-height:1;position:relative;color:var(--colour-primary)}@media screen and (min-width: 36em){.stepper ol li a{margin-right:-2rem;padding:2rem 3rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%,2rem 50%);display:flex;height:100%;vertical-align:baseline;justify-content:center;align-items:center}}.stepper ol li a span{position:relative;display:inline;padding-left:2.25rem}.stepper ol li a span:before{counter-increment:section;content:counter(section);display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);margin-right:.5rem;font-size:.75em;border-radius:50%;border:2px solid currentColor;height:1.5rem;line-height:1.3rem;width:1.5rem;font-family:var(--font-heading);text-align:center}.stepper ol li a.bg-warning span:before,.stepper ol li a.bg-danger span:before{content:"!"}.stepper ol li a.bg-success span:before{content:"\2713";text-indent:-.1em}.stepper ol li a[aria-current=step]{background:var(--colour-primary);color:#fff;pointer-events:none}.stepper ol li a:not([href]){pointer-events:none}.stepper ol li a[href]:hover{opacity:.6}.stepper ol li a[href]:active{opacity:.8}.stepper>span{width:100%;display:flex;padding:1rem;flex-shrink:0;margin:0;position:relative;z-index:0;align-items:center}.stepper>span.stepper__end{display:none}@media screen and (min-width: 62em){.stepper>span{width:max-content;padding:2rem}.stepper>span.stepper__end{padding-left:3.5rem;display:flex}}.snapshot>.row{padding-bottom:1rem}.snapshot>.row>.col{margin-bottom:1rem;min-width:9.375rem;position:relative}@media screen and (min-width: 36em){.snapshot>.row>.col:nth-child(8)~.col{max-width:25%}}@media screen and (min-width: 62em){.snapshot>.row>.col:nth-child(8)~.col{max-width:12.5%}}.snapshot__item{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:1rem}.snapshot__item:not([class*=bg-]){border:1px solid var(--colour-border)}.snapshot a{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;z-index:1}.snapshot a:hover+.snapshot__item{opacity:.8}.snapshot__title{padding-bottom:1rem}.snapshot__title:after{content:":"}.snapshot .stat{text-decoration:none;margin-bottom:0}.tabs:not(.admin-panel){position:relative}.tabs:not(.admin-panel) .tabs__links__wrapper{position:relative;margin:0 auto 2rem}.tabs:not(.admin-panel) .tabs__links__wrapper:before{content:"";display:block;position:absolute;left:auto;right:-2.5rem;top:0;bottom:1px;width:2.5rem;background:linear-gradient(90deg,rgba(255,255,255,0),rgb(255,255,255));z-index:1000;pointer-events:none}.tabs:not(.admin-panel) .tabs__links__wrapper:after{content:"";left:50%;position:relative;height:1px;width:100vw;background-color:var(--colour-border);transform:translate(-50%);display:block;clear:both}@media screen and (prefers-color-scheme: dark){.tabs:not(.admin-panel) .tabs__links__wrapper:before{background:linear-gradient(90deg,rgba(38,38,38,0),rgb(38,38,38))}}.tabs.admin-panel .tabs__links__wrapper:after{display:none}.tabs__links{padding-bottom:3px;position:relative;display:flex;flex-wrap:nowrap;width:auto;margin:0 -1.5rem;overflow-y:hidden;overflow-x:auto}.tabs__links::-webkit-scrollbar{display:none}.tabs__links .link{white-space:nowrap}.tabs__links .link:not(.text-decoration-none):not(.btn){--is-current: 0;font-weight:700;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:0;padding:1.5rem 1.5rem .5rem;display:inline-block}.tabs__links .link:not(.text-decoration-none):not(.btn).disabled{cursor:not-allowed;opacity:.4}.tabs__links .link:not(.text-decoration-none):not(.btn):last-child{margin-inline-end:0}.tabs__links .link:not(.text-decoration-none):not(.btn):after{position:absolute;content:"";bottom:0;left:50%;height:3px;width:100%;transform:translate(-50%) scale(0);background:var(--colour-info);transition:transform .4s}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):hover:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):focus:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled).focus:after{transform:translate(-50%) scaleX(.6)}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):is([aria-pressed=true],:active,.current):after{transform:translate(-50%) scale(1)}.tabs__links .link:not(.text-decoration-none):not(.btn):is([aria-pressed=true],.current){pointer-events:none;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary-theme)!important}@media (min-width: 576px){.tabs__links .link:not(.text-decoration-none):not(.btn){padding:2rem 2rem .5rem}.tabs__links__wrapper{margin:0 auto 2.5rem}}.admin-panel :is(.admin-panel__links,.tabs__links){padding:0;margin:calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;flex-direction:column;border-bottom:1px solid var(--colour-border);overflow:hidden;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}.admin-panel :is(.admin-panel__links,.tabs__links):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links){flex-direction:row}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0;padding:1rem var(--padding-x);width:100%;position:relative;text-align:left;flex-grow:1;--gradient-direction: -90deg;background-color:var(--colour-success)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not([class*=bg-]){background-image:linear-gradient(var(--gradient-direction),var(--colour-info) 0,transparent 100%)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):is(.current,[aria-pressed=true]){color:var(--colour-primary-theme)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(.current,[aria-pressed=true]){background:var(--colour-canvas-2)!important}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(:first-child){border-left:1px solid var(--colour-border)!important}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:is(.current,[aria-pressed=true]){pointer-events:none}
|
|
1
|
+
@charset "UTF-8";.testimonial{--testimonial-padding: 1rem;--testimonial-spacing: 1rem}@media screen and (min-width: 62em){.testimonial{--testimonial-padding: 4rem;--testimonial-spacing: 2rem}}.testimonial>div:first-child{position:relative;overflow:hidden}.testimonial .circle{color:currentColor;position:absolute;top:-18rem;right:-8rem;font-size:28rem;border-width:4px}.testimonial__images{overflow:auto;scroll-snap-type:x mandatory;display:flex;user-select:none;touch-action:pan-x;height:14.375rem}@media screen and (min-width: 36em){.testimonial__images{height:21.25rem}}@media screen and (min-width: 62em){.testimonial__images{min-height:100%;scroll-snap-type:y mandatory;flex-direction:column;touch-action:pan-y}}.testimonial__images img{scroll-snap-align:start;user-select:none;pointer-events:none;flex-shrink:0}.testimonial .testimonial__controls{display:none}.testimonial.testimonial--multi .testimonial__controls{display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}@media screen and (min-width: 62em){.testimonial.testimonial--multi .testimonial__controls{left:auto;bottom:auto;right:0;top:50%;transform:rotate(90deg) translateY(-120%);transform-origin:center}}.testimonial h2{padding:2rem var(--testimonial-padding) 0 var(--testimonial-padding)}@media screen and (min-width: 36em){.testimonial h2{padding-top:3rem}}@media screen and (min-width: 62em){.testimonial h2{padding-top:9rem}}.testimonial__content{--display-none: none;margin:0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);position:relative}@media screen and (min-width: 62em){.testimonial__content{--display-none: block}.testimonial__content blockquote:not(.largest){position:absolute;top:0}}.testimonial[data-show="1"] blockquote:not(:nth-child(1)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="2"] blockquote:not(:nth-child(2)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="3"] blockquote:not(:nth-child(3)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="4"] blockquote:not(:nth-child(4)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="5"] blockquote:not(:nth-child(5)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="6"] blockquote:not(:nth-child(6)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="7"] blockquote:not(:nth-child(7)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="8"] blockquote:not(:nth-child(8)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="9"] blockquote:not(:nth-child(9)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="10"] blockquote:not(:nth-child(10)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial__after{padding:1rem var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding)}.testimonial__images::-webkit-scrollbar{display:none}.testimonial__images{-ms-overflow-style:none;scrollbar-width:none}.timeline{--breakpoint:(100% - 62rem);--pl: clamp(0rem, var(--breakpoint) * -1000, 4rem);--line-pos: clamp(1rem, var(--breakpoint) * 1000, 50%);--circle-pos: 1rem;--line-length: 100%;--img-order: 1;position:relative;padding-top:.25rem;padding-left:var(--pl);padding-bottom:1rem;width:100%;display:flex;justify-content:space-between;flex-direction:row;flex-wrap:wrap;align-items:flex-start}.timeline__container:not(.timeline--simple) .timeline{align-items:center}@media screen and (min-width: 62em){.timeline__container:not(.timeline--simple) .timeline{--img-order: 0;--circle-pos: 50%;--line-length: 50%}}.timeline:before{content:" ";display:block;background:black;width:4px;height:100%;position:absolute;top:0;left:var(--line-pos)}.timeline:after{content:" ";display:block;background:white;width:2rem;height:2rem;margin-top:-1rem;position:absolute;top:var(--circle-pos);left:var(--line-pos);margin-left:calc(-1rem + 2px);border:4px solid black;border-radius:50%}.timeline>*{max-width:28.75rem;order:1}.timeline>img{max-width:min(100%,28.75rem);margin-bottom:2rem}.timeline:nth-child(even)>img{order:var(--img-order)}.timeline:first-child:before{top:var(--circle-pos);height:var(--line-length)}.timeline:last-child{padding-bottom:0;margin-bottom:2rem}.timeline:last-child:before{height:var(--line-length)}.timeline:last-child>img{margin-bottom:0}.property-searchbar fieldset{position:relative}@media screen and (min-width: 62em){.property-searchbar fieldset{position:relative;padding-right:1.5rem}.property-searchbar fieldset:after{content:"";position:absolute;top:0;right:.5rem;display:block;height:100%;width:1px;background-color:var(--colour-muted);opacity:.25}}.property-searchbar .form-control__wrapper{margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar .form-control__wrapper{margin-bottom:0}}.property-searchbar .form-label,.property-searchbar label{font-size:.875rem;text-transform:uppercase}@media screen and (min-width: 62em){.property-searchbar .row .row .form-label{display:none}.property-searchbar .form-control,.property-searchbar .form-select{padding:.5rem 1.5rem .5rem .5rem}.property-searchbar .form-select{background-position:right .5rem center}}.property-searchbar .input--locations{padding-right:5.5rem}.property-searchbar .select--miles{position:absolute;bottom:0rem;right:.5rem;width:5rem}@media screen and (min-width: 62em){.property-searchbar .select--miles{right:1.5rem}}.property-searchbar .select--miles label{display:none}.property-searchbar .select--miles select{background-color:transparent;border-color:transparent}@media screen and (min-width: 62em){.property-searchbar .property-searchbar__btn{align-items:flex-end}}.property-searchbar button{margin-top:1rem;margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar button{margin:0;padding-left:3.5rem;padding-right:3.5rem}}.property-searchbar--hero .property-searchbar{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light);padding:1rem;background-color:#fff;width:100%;border-radius:.625rem;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.24);box-shadow:0 2px 4px #0000003d;position:relative}.property-searchbar--hero .property-searchbar .text-primary{color:var(--colour-primary)!important}@media screen and (min-width: 62em){.property-searchbar--hero .property-searchbar{border-radius:3rem;padding:1.5rem 2.5rem}.property-searchbar--hero .property-searchbar .form-label,.property-searchbar--hero .property-searchbar label{margin-bottom:0}.property-searchbar--hero .property-searchbar .form-control,.property-searchbar--hero .property-searchbar .form-select{margin-left:-.5rem;border:none;padding-top:.25rem;padding-bottom:.25rem}.property-searchbar--hero .property-searchbar .form-select{background-position:right 0rem center;padding-right:1rem}.property-searchbar--hero .property-searchbar .property-searchbar__btn{align-items:center}}.stepper{background:#f0f0f0;display:flex;flex-wrap:wrap;margin-bottom:2rem;border:1px solid var(--colour-canvas);overflow:hidden}@media screen and (min-width: 62em){.stepper{flex-wrap:nowrap;overflow-x:auto}}.stepper ol{margin:0;z-index:1;background:var(--colour-canvas);counter-reset:section;width:100%;overflow:auto}@media screen and (min-width: 36em){.stepper ol{display:flex;flex-grow:1;padding-right:calc(2rem + 1px);margin-top:-1px;margin-bottom:-1px;margin-right:calc(-2rem - 2px);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol{overflow:initial}}.stepper ol li{width:100%;max-width:100%;background:var(--colour-canvas);padding:1px}@media screen and (min-width: 36em){.stepper ol li:first-child a{padding-left:1rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol li:first-child a{padding-left:2rem}}.stepper ol li a{display:block;padding:1rem;text-decoration:none;background:var(--colour-muted);line-height:1;position:relative;color:var(--colour-primary)}@media screen and (min-width: 36em){.stepper ol li a{margin-right:-2rem;padding:2rem 3rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%,2rem 50%);display:flex;height:100%;vertical-align:baseline;justify-content:center;align-items:center}}.stepper ol li a span{position:relative;display:inline;padding-left:2.25rem}.stepper ol li a span:before{counter-increment:section;content:counter(section);display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);margin-right:.5rem;font-size:.75em;border-radius:50%;border:2px solid currentColor;height:1.5rem;line-height:1.3rem;width:1.5rem;font-family:var(--font-heading);text-align:center}.stepper ol li a.bg-warning span:before,.stepper ol li a.bg-danger span:before{content:"!"}.stepper ol li a.bg-success span:before{content:"\2713";text-indent:-.1em}.stepper ol li a[aria-current=step]{background:var(--colour-primary);color:#fff;pointer-events:none}.stepper ol li a:not([href]){pointer-events:none}.stepper ol li a[href]:hover{opacity:.6}.stepper ol li a[href]:active{opacity:.8}.stepper>span{width:100%;display:flex;padding:1rem;flex-shrink:0;margin:0;position:relative;z-index:0;align-items:center}.stepper>span.stepper__end{display:none}@media screen and (min-width: 62em){.stepper>span{width:max-content;padding:2rem}.stepper>span.stepper__end{padding-left:3.5rem;display:flex}}.snapshot>.row{padding-bottom:1rem}.snapshot>.row>.col{margin-bottom:1rem;min-width:9.375rem;position:relative}@media screen and (min-width: 36em){.snapshot>.row>.col:nth-child(8)~.col{max-width:25%}}@media screen and (min-width: 62em){.snapshot>.row>.col:nth-child(8)~.col{max-width:12.5%}}.snapshot__item{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:1rem}.snapshot__item:not([class*=bg-]){border:1px solid var(--colour-border)}.snapshot a{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;z-index:1}.snapshot a:hover+.snapshot__item{opacity:.8}.snapshot__title{padding-bottom:1rem}.snapshot__title:after{content:":"}.snapshot .stat{text-decoration:none;margin-bottom:0}.tabs:not(.admin-panel){position:relative}.tabs:not(.admin-panel) .tabs__links__wrapper{position:relative;margin:0 auto 2rem}.tabs:not(.admin-panel) .tabs__links__wrapper:before{content:"";display:block;position:absolute;left:auto;right:-2.5rem;top:0;bottom:1px;width:2.5rem;background:linear-gradient(90deg,rgba(255,255,255,0),rgb(255,255,255));z-index:1000;pointer-events:none}.tabs:not(.admin-panel) .tabs__links__wrapper:after{content:"";left:50%;position:relative;height:1px;width:100vw;background-color:var(--colour-border);transform:translate(-50%);display:block;clear:both}@media screen and (prefers-color-scheme: dark){.tabs:not(.admin-panel) .tabs__links__wrapper:before{background:linear-gradient(90deg,rgba(38,38,38,0),rgb(38,38,38))}}.tabs.admin-panel .tabs__links__wrapper:after{display:none}.tabs__links{padding-bottom:3px;position:relative;display:flex;flex-wrap:nowrap;width:auto;margin:0 -1.5rem;overflow-y:hidden;overflow-x:auto}.tabs__links::-webkit-scrollbar{display:none}.tabs__links .link{white-space:nowrap}.tabs__links .link:not(.text-decoration-none):not(.btn){--is-current: 0;font-weight:700;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:0;padding:1.5rem 1.5rem .5rem;display:inline-block}.tabs__links .link:not(.text-decoration-none):not(.btn).disabled{cursor:not-allowed;opacity:.4}.tabs__links .link:not(.text-decoration-none):not(.btn):last-child{margin-inline-end:0}.tabs__links .link:not(.text-decoration-none):not(.btn):after{position:absolute;content:"";bottom:0;left:50%;height:3px;width:100%;transform:translate(-50%) scale(0);background:var(--colour-info);transition:transform .4s}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):hover:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):focus:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled).focus:after{transform:translate(-50%) scaleX(.6)}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):is([aria-pressed=true],:active,.current):after{transform:translate(-50%) scale(1)}.tabs__links .link:not(.text-decoration-none):not(.btn):is([aria-pressed=true],.current){pointer-events:none;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary-theme)!important}@media (min-width: 576px){.tabs__links .link:not(.text-decoration-none):not(.btn){padding:2rem 2rem .5rem}.tabs__links__wrapper{margin:0 auto 2.5rem}}.admin-panel :is(.admin-panel__links,.tabs__links){padding:0;margin:calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;flex-direction:column;border-bottom:1px solid var(--colour-border);overflow:hidden;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}.admin-panel :is(.admin-panel__links,.tabs__links):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links){flex-direction:row}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0;padding:1rem var(--padding-x);width:100%;position:relative;text-align:left;flex-grow:1;--gradient-direction: -90deg;background-color:var(--colour-success)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not([class*=bg-]){background-image:linear-gradient(var(--gradient-direction),var(--colour-info) 0,transparent 100%)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):is(.current,[aria-pressed=true]){color:var(--colour-primary-theme)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(.current,[aria-pressed=true]){background:var(--colour-canvas-2)!important}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(:first-child){border-left:1px solid var(--colour-border)!important}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:is(.current,[aria-pressed=true]){pointer-events:none}
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"name": "iamproperty"
|
|
6
6
|
},
|
|
7
7
|
"private": false,
|
|
8
|
-
"version": "5.1.0-
|
|
8
|
+
"version": "5.1.0-beta8",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"bootstrap": "copyfiles -u 2 node_modules/bootstrap/**/* assets/bootstrap",
|
|
11
11
|
"dev": "npm run copy && node local_modules/delete-assets.js && vite --host",
|
|
@@ -1,123 +1,38 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<div v-if="type == 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
|
|
8
|
-
<div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" :id="'carousel'+id+'slide'+(index+1)">
|
|
9
|
-
<Card v-bind="value" :class="cardclass" :type="cardtype" :btnyype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
|
|
10
|
-
</div>
|
|
11
|
-
</div>
|
|
12
|
-
<div v-if="type != 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
|
|
13
|
-
<div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" v-html="content(value)" :id="'carousel'+id+'slide'+(index+1)"></div>
|
|
14
|
-
</div>
|
|
15
|
-
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
<div :class="`carousel__controls cols-${cols} cols-sm-${smcols} cols-md-${mdcols}`">
|
|
19
|
-
<a v-for="(value,index) in items" :key="index" :href="'\#carousel'+id+'slide'+(index+1)" :class="`control-${index+1}`">Slide {{index+1}}</a>
|
|
20
|
-
</div>
|
|
21
|
-
<button class="btn btn-prev" data-go="0" disabled>Prev</button>
|
|
22
|
-
<button class="btn btn-next" data-go="2">Next</button>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
2
|
+
<!-- Custom element -->
|
|
3
|
+
<iam-carousel>
|
|
4
|
+
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</iam-carousel>
|
|
25
7
|
</template>
|
|
26
8
|
|
|
27
|
-
|
|
28
|
-
<style lang="scss">
|
|
29
|
-
@import "../../../assets/sass/components/carousel.scss";
|
|
30
|
-
</style>
|
|
31
|
-
|
|
32
|
-
|
|
33
9
|
<script>
|
|
34
|
-
|
|
35
|
-
import carousel from '../../../assets/ts/modules/carousel'
|
|
36
|
-
|
|
10
|
+
// Load web components
|
|
37
11
|
|
|
38
12
|
export default {
|
|
39
|
-
|
|
40
|
-
Card
|
|
41
|
-
},
|
|
42
|
-
name: 'Carousel',
|
|
43
|
-
data () {
|
|
44
|
-
return {
|
|
45
|
-
id: null
|
|
46
|
-
}
|
|
47
|
-
},
|
|
13
|
+
name: 'Header',
|
|
48
14
|
props: {
|
|
49
|
-
|
|
50
|
-
type: Array,
|
|
51
|
-
required: false
|
|
52
|
-
},
|
|
53
|
-
cols: {
|
|
54
|
-
type: Number,
|
|
55
|
-
required: false,
|
|
56
|
-
default: 1
|
|
57
|
-
},
|
|
58
|
-
smcols: {
|
|
59
|
-
type: Number,
|
|
60
|
-
required: false,
|
|
61
|
-
default: 1
|
|
62
|
-
},
|
|
63
|
-
mdcols: {
|
|
64
|
-
type: Number,
|
|
65
|
-
required: false,
|
|
66
|
-
default: 3
|
|
67
|
-
},
|
|
68
|
-
gap: {
|
|
69
|
-
type: Number,
|
|
70
|
-
required: false,
|
|
71
|
-
default: 4
|
|
72
|
-
},
|
|
73
|
-
cardtype: {
|
|
15
|
+
title: {
|
|
74
16
|
type: String,
|
|
75
|
-
required:
|
|
76
|
-
},
|
|
77
|
-
cardclass: {
|
|
78
|
-
type: String,
|
|
79
|
-
required: false
|
|
17
|
+
required: true
|
|
80
18
|
},
|
|
81
|
-
|
|
82
|
-
type: String,
|
|
83
|
-
required: false
|
|
84
|
-
},
|
|
85
|
-
titleclass: {
|
|
86
|
-
type: String,
|
|
87
|
-
required: false
|
|
88
|
-
},
|
|
89
|
-
ctatext: {
|
|
90
|
-
type: String,
|
|
91
|
-
required: false
|
|
92
|
-
},
|
|
93
|
-
hidectatext: {
|
|
94
|
-
type: Boolean,
|
|
95
|
-
required: false,
|
|
96
|
-
default: false
|
|
97
|
-
},
|
|
98
|
-
colclass: {
|
|
99
|
-
type: String,
|
|
100
|
-
required: false
|
|
101
|
-
},
|
|
102
|
-
type: {
|
|
19
|
+
image: {
|
|
103
20
|
type: String,
|
|
104
21
|
required: false
|
|
105
22
|
}
|
|
106
23
|
},
|
|
107
|
-
computed: {
|
|
108
|
-
content (){
|
|
109
|
-
return (value) => {
|
|
110
|
-
return `${value.image ? `<img src="${value.image}" alt="" />` : ''}${value.content?value.content:''}`;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
},
|
|
114
24
|
mounted(){
|
|
115
25
|
|
|
116
|
-
this.id = this._uid
|
|
117
|
-
|
|
118
26
|
this.$nextTick(function () {
|
|
119
27
|
|
|
120
|
-
carousel
|
|
28
|
+
import(`../../../assets/js/components/carousel/carousel.component${import.meta.env.DEV == "development" ? '.min' : ''}.js`).then(module => {
|
|
29
|
+
|
|
30
|
+
if (!window.customElements.get(`iam-carousel`))
|
|
31
|
+
window.customElements.define(`iam-carousel`, module.default);
|
|
32
|
+
|
|
33
|
+
}).catch((err) => {
|
|
34
|
+
console.log(err.message);
|
|
35
|
+
});
|
|
121
36
|
})
|
|
122
37
|
}
|
|
123
38
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- Custom element -->
|
|
3
|
-
<iam-header
|
|
3
|
+
<iam-header :image="image">
|
|
4
4
|
<slot name="breadcrumb"></slot>
|
|
5
5
|
<h1 v-if="title" v-html="title"></h1>
|
|
6
6
|
<slot></slot>
|
|
@@ -9,8 +9,6 @@
|
|
|
9
9
|
|
|
10
10
|
<script>
|
|
11
11
|
// Load web components
|
|
12
|
-
import iamHeader from '../../../assets/js/components/header/header.component.min.js'
|
|
13
|
-
|
|
14
12
|
|
|
15
13
|
export default {
|
|
16
14
|
name: 'Header',
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- Custom element -->
|
|
3
|
+
<iam-marketing>
|
|
4
|
+
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</iam-marketing>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
// Load web components
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
name: 'Marketing',
|
|
14
|
+
props: {
|
|
15
|
+
title: {
|
|
16
|
+
type: String,
|
|
17
|
+
required: true
|
|
18
|
+
},
|
|
19
|
+
image: {
|
|
20
|
+
type: String,
|
|
21
|
+
required: false
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
mounted(){
|
|
25
|
+
|
|
26
|
+
this.$nextTick(function () {
|
|
27
|
+
|
|
28
|
+
import(`../../../assets/js/components/marketing/marketing.component${import.meta.env.DEV == "development" ? '.min' : ''}.js`).then(module => {
|
|
29
|
+
|
|
30
|
+
if (!window.customElements.get(`iam-marketing`))
|
|
31
|
+
window.customElements.define(`iam-marketing`, module.default);
|
|
32
|
+
|
|
33
|
+
}).catch((err) => {
|
|
34
|
+
console.log(err.message);
|
|
35
|
+
});
|
|
36
|
+
})
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
</script>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
### Usage
|
|
2
|
+
|
|
3
|
+
```
|
|
4
|
+
<Carousel :items="items" type="card"></Carousel>
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
### Properties
|
|
8
|
+
|
|
9
|
+
**The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
|
|
10
|
+
|
|
11
|
+
| Option | Type | Default Value | Description |
|
|
12
|
+
| ------ | ---- | ------------- | ----------- |
|
|
13
|
+
| type | String | - | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card' |
|
|
14
|
+
| colclass | String | - | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
|
|
15
|
+
|
|
16
|
+
### Slots
|
|
17
|
+
|
|
18
|
+
| Option | Default Value | Description |
|
|
19
|
+
| ------ | ------------- | ----------- |
|
|
20
|
+
| default | - | Will display before the carousel |
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { mount } from '@vue/test-utils'
|
|
2
|
-
import Carousel from './Carousel.vue'
|
|
3
|
-
|
|
4
|
-
describe('Carousel component', () => {
|
|
5
|
-
|
|
6
|
-
const test = mount(Carousel, {
|
|
7
|
-
propsData: {
|
|
8
|
-
items: [
|
|
9
|
-
{
|
|
10
|
-
link: '/components/card-deck',
|
|
11
|
-
title: 'Card 1',
|
|
12
|
-
content: `<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages..</p>`
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
link: '/components/card-deck',
|
|
16
|
-
title: 'Card 2',
|
|
17
|
-
content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p>`
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
link: '/components/card-deck',
|
|
21
|
-
title: 'Card 3',
|
|
22
|
-
content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur.</p>`
|
|
23
|
-
}
|
|
24
|
-
]
|
|
25
|
-
},
|
|
26
|
-
slots: {
|
|
27
|
-
default: '<p>Hello</p>'
|
|
28
|
-
}
|
|
29
|
-
})
|
|
30
|
-
|
|
31
|
-
it('renders the content before the carousel', () => {
|
|
32
|
-
expect(test.html()).toContain('<p>Hello</p>')
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
it('renders the correct number of columns', () => {
|
|
37
|
-
|
|
38
|
-
expect(test.findAll('.col').length).toBe(3)
|
|
39
|
-
})
|
|
40
|
-
|
|
41
|
-
it('renders the correct number of pips', () => {
|
|
42
|
-
|
|
43
|
-
expect(test.findAll('.carousel__controls a').length).toBe(3)
|
|
44
|
-
})
|
|
45
|
-
})
|