{"id":900,"date":"2024-03-26T13:10:23","date_gmt":"2024-03-26T13:10:23","guid":{"rendered":"https:\/\/kimaya.com.au\/?page_id=900"},"modified":"2024-03-26T13:11:50","modified_gmt":"2024-03-26T13:11:50","slug":"test","status":"publish","type":"page","link":"https:\/\/kimaya.com.au\/index.php\/test\/","title":{"rendered":"test"},"content":{"rendered":"<style>\n@import \"bourbon\";\n@import 'https:\/\/fonts.googleapis.com\/css?family=Montserrat:400,700|Raleway:300,400';\n\/* colors *\/\n$blue: #428BFF;\n$red: #FF4A53;\n$dark: #333;\n$accent: $blue;\n$accent-inactive: desaturate($accent, 85%);\n$secondary: $accent-inactive;\n\/* tab setting *\/\n$tab-count: 4;\n$indicator-width: 50px;\n$indicator-height: 4px;\n\/* breakpoints *\/\n$breakpoints: (\n  medium: #{$tab-count*250px},\n  small: #{$tab-count*150px}\n);\n\/* selectors relative to radio inputs *\/\n$label-selector: \"~ ul > li\";\n$slider-selector: \"~ .slider\";\n$content-selector: \"~ .content > section\";\n@mixin tabs(\n  $label-selector: $label-selector,\n  $slider-selector: $slider-selector,\n  $content-selector: $content-selector) {\n  @for $i from 1 through $tab-count {\n    &:nth-of-type(#{$i}):checked {\n      #{$label-selector}:nth-child(#{$i}) {\n        @content;\n      }\n      #{$slider-selector} {\n        transform: translateX(#{100% * ($i - 1)});\n      }\n      #{$content-selector}:nth-child(#{$i}) {\n        display: block;\n      }\n    }\n  }\n}\nhtml {\n  width: 100%;\n  height: 100%;\n}\nbody {\n  background: #efefef;\n  color: $dark;\n  font-family: \"Raleway\";\n  height: 100%;\n  h1 {\n    text-align: center;\n    color: $accent;\n    font-weight: 300;\n    padding: 40px 0 20px 0;\n    margin: 0;\n  }\n}\n.tabs {\n  left: 50%;\n  transform: translateX(-50%);\n  position: relative;\n  background: white;\n  padding: 50px;\n  padding-bottom: 80px;\n  width: 70%;\n  height: 250px;\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n  border-radius: 5px;\n  min-width: #{$tab-count * 60px};\n  input[name=\"tab-control\"] {\n    display: none;\n  }\n  .content section h2,\n  ul li label {\n    font-family: \"Montserrat\";\n    font-weight: bold;\n    font-size: 18px;\n    color: $accent;\n  }\n  ul {\n    list-style-type: none;\n    padding-left: 0;\n    display: flex;\n    flex-direction: row;\n    margin-bottom: 10px;\n    justify-content: space-between;\n    align-items: flex-end;\n    flex-wrap: wrap;\n    li {\n      box-sizing: border-box;\n      flex: 1;\n      width: #{100%\/$tab-count};\n      padding: 0 10px;\n      text-align: center;\n      label {\n        transition: all 0.3s ease-in-out;\n        color: $secondary;\n        padding: 5px auto;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: block;\n        cursor: pointer;\n        transition: all 0.2s ease-in-out;\n        white-space: nowrap;\n        -webkit-touch-callout: none;\n        @include user-select(none);\n        br {\n          display: none;\n        }\n        svg {\n          fill: $secondary;\n          height: 1.2em;\n          vertical-align: bottom;\n          margin-right: 0.2em;\n          transition: all 0.2s ease-in-out;\n        }\n        &:hover,\n        &:focus,\n        &:active {\n          outline: 0;\n          color: lighten($secondary, 15%);\n          svg {\n            fill: lighten($secondary, 15%);\n          }\n        }\n      }\n    }\n  }\n  .slider {\n    position: relative;\n    width: #{100%\/$tab-count};\n    transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);\n    .indicator {\n      position: relative;\n      width: $indicator-width;\n      max-width: 100%;\n      margin: 0 auto;\n      height: $indicator-height;\n      background: $accent;\n      border-radius: 1px;     \n    }\n  }\n  .content {\n    margin-top: 30px;\n    section {\n      display: none;\n      animation: {\n        name: content;\n        direction: normal;\n        duration: 0.3s;\n        timing-function: ease-in-out;\n        iteration-count: 1;\n      }\n      line-height: 1.4;\n      h2 {\n        color: $accent;\n        display: none;\n        &::after {\n          content: \"\";\n          position: relative;\n          display: block;\n          width: 30px;\n          height: 3px;\n          background: $accent;\n          margin-top: 5px;\n          left: 1px;\n        }\n      }\n    }\n  }\n  input[name=\"tab-control\"] {\n    @include tabs {\n      > label {\n        cursor: default;\n        color: $accent;\n        svg {\n          fill: $accent;\n        }\n        @media (max-width: map-get($breakpoints, small)) {\n          background: rgba(0, 0, 0, 0.08);\n        }\n      }\n    }\n  }\n  @keyframes content {\n    from {\n      opacity: 0;\n      transform: translateY(5%);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0%);\n    }\n  }\n  @media (max-width: map-get($breakpoints, medium)) {\n    ul li label {\n      white-space: initial;\n      br {\n        display: initial;\n      }\n      svg {\n        height: 1.5em;\n      }\n    }\n  }\n  @media (max-width: map-get($breakpoints, small)) {\n    ul li label {\n      padding: 5px;\n      border-radius: 5px;\n      span {\n        display: none;\n      }\n    }\n    .slider {\n      display: none;\n    }\n    .content {\n      margin-top: 20px; \n      section h2 {\n        display: block;\n      }\n    }\n  }\n}\n<\/style>\n<h1>Pure CSS Tabs With Indicator<\/h1>\n<p>  <input type=\"radio\" id=\"tab1\" name=\"tab-control\" checked><br \/>\n  <input type=\"radio\" id=\"tab2\" name=\"tab-control\"><br \/>\n  <input type=\"radio\" id=\"tab3\" name=\"tab-control\"><br \/>\n  <input type=\"radio\" id=\"tab4\" name=\"tab-control\"><\/p>\n<ul>\n<li title=\"Features\"><label for=\"tab1\" role=\"button\"><svg viewBox=\"0 0 24 24\"><path d=\"M14,2A8,8 0 0,0 6,10A8,8 0 0,0 14,18A8,8 0 0,0 22,10H20C20,13.32 17.32,16 14,16A6,6 0 0,1 8,10A6,6 0 0,1 14,4C14.43,4 14.86,4.05 15.27,4.14L16.88,2.54C15.96,2.18 15,2 14,2M20.59,3.58L14,10.17L11.62,7.79L10.21,9.21L14,13L22,5M4.93,5.82C3.08,7.34 2,9.61 2,12A8,8 0 0,0 10,20C10.64,20 11.27,19.92 11.88,19.77C10.12,19.38 8.5,18.5 7.17,17.29C5.22,16.25 4,14.21 4,12C4,11.7 4.03,11.41 4.07,11.11C4.03,10.74 4,10.37 4,10C4,8.56 4.32,7.13 4.93,5.82Z\"\/>\n<\/svg><br \/>Features<\/label><\/li>\n<li title=\"Delivery Contents\"><label for=\"tab2\" role=\"button\"><svg viewBox=\"0 0 24 24\"><path d=\"M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z\" \/>\n<\/svg><br \/>Delivery Contents<\/label><\/li>\n<li title=\"Shipping\"><label for=\"tab3\" role=\"button\"><svg viewBox=\"0 0 24 24\">\n    <path d=\"M3,4A2,2 0 0,0 1,6V17H3A3,3 0 0,0 6,20A3,3 0 0,0 9,17H15A3,3 0 0,0 18,20A3,3 0 0,0 21,17H23V12L20,8H17V4M10,6L14,10L10,14V11H4V9H10M17,9.5H19.5L21.47,12H17M6,15.5A1.5,1.5 0 0,1 7.5,17A1.5,1.5 0 0,1 6,18.5A1.5,1.5 0 0,1 4.5,17A1.5,1.5 0 0,1 6,15.5M18,15.5A1.5,1.5 0 0,1 19.5,17A1.5,1.5 0 0,1 18,18.5A1.5,1.5 0 0,1 16.5,17A1.5,1.5 0 0,1 18,15.5Z\" \/>\n<\/svg><br \/>Shipping<\/label><\/li>\n<li title=\"Returns\"><label for=\"tab4\" role=\"button\"><svg viewBox=\"0 0 24 24\">\n    <path d=\"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z\" \/>\n<\/svg><br \/>Returns<\/label><\/li>\n<\/ul>\n<section>\n<h2>Features<\/h2>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolorem sequi, quo tempore in eum obcaecati atque quibusdam officiis est dolorum minima deleniti ratione molestias numquam. Voluptas voluptates quibusdam cum?<\/section>\n<section>\n<h2>Delivery Contents<\/h2>\n<p>          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quas adipisci a accusantium eius ut voluptatibus ad impedit nulla, ipsa qui. Quasi temporibus eos commodi aliquid impedit amet, similique nulla.<\/section>\n<section>\n<h2>Shipping<\/h2>\n<p>          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nemo ducimus eius, magnam error quisquam sunt voluptate labore, excepturi numquam! Alias libero optio sed harum debitis! Veniam, quia in eum.<\/section>\n<section>\n<h2>Returns<\/h2>\n<p>          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta vero rerum? Eaque repudiandae architecto libero reprehenderit aliquam magnam ratione quidem? Nobis doloribus molestiae enim deserunt necessitatibus eaque quidem incidunt.<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Pure CSS Tabs With Indicator Features Delivery Contents Shipping Returns Features Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-900","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/pages\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":7,"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/pages\/900\/revisions"}],"predecessor-version":[{"id":907,"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/pages\/900\/revisions\/907"}],"wp:attachment":[{"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/media?parent=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}