{"version":3,"sources":["_documentation.scss","_variables.scss","fancy-tab.css","_fancy-tab.scss"],"names":[],"mappings":"AAAA;EAAO,yBCAU;ACEjB;;AFDA;EAAW,oCAAmC;AEK9C;;AFJA;EAAU,yBCAY;ACQtB;;AFPA;EAAoC,gCAAsC;AEW1E;;ACdA;;gDDkBgD;ACfhD;EACE;IACE,UAAU;IACV,wCAAgC;IAAhC,gCAAgC;EDiBlC;ECfA;IACE,UAAU;IACV,gCAAwB;IAAxB,wBAAwB;EDiB1B;AACF;ACzBA;EACE;IACE,UAAU;IACV,wCAAgC;IAAhC,gCAAgC;EDiBlC;ECfA;IACE,UAAU;IACV,gCAAwB;IAAxB,wBAAwB;EDiB1B;AACF;;ACdA;EACE;IACE,UAAU;IACV,gCAAwB;IAAxB,wBAAwB;EDiB1B;ECfA;IACE,UAAU;IACV,uCAA+B;IAA/B,+BAA+B;EDiBjC;AACF;;ACzBA;EACE;IACE,UAAU;IACV,gCAAwB;IAAxB,wBAAwB;EDiB1B;ECfA;IACE,UAAU;IACV,uCAA+B;IAA/B,+BAA+B;EDiBjC;AACF;;ACuBA;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;EAAtB,0BAAsB;EAAtB,sBAAsB;ADpBxB;;ACjBE;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,uBAA2B;EAA3B,oBAA2B;EAA3B,2BAA2B;EAC3B,kBAAkB;EAClB,8BAAmB;EAAnB,6BAAmB;EAAnB,uBAAmB;EAAnB,mBAAmB;EACnB,gCF1B4B;EE2B5B,WAAW;ADoBf;;AClBI;EACE,WAAW;EACX,kBAAkB;EAClB,cAAc;EACd,iBAAiB;EACjB,gBAAgB;EAChB,yBFlC0B;EEmC1B,iEAAyD;EAAzD,4DAAyD;EAAzD,yDAAyD;ADqB/D;;ACpBM;EAAsB,iEAAyD;EAAzD,4DAAyD;EAAzD,yDAAyD;ADwBrF;;ACrBI;EACE,cFpCwB;EEqCxB,iBAAgB;EAChB,eFrCoB;EEsCpB,iBFtCoB;EEuCpB,qBAAqB;EACrB,gBF3CqB;EE4CrB,gBAAgB;EAChB,kBAAkB;EAClB,eAAe;EACf,6BAAiD;ADwBvD;;ACvBM;EAAU,cFlDgB;AC6EhC;;ACtBA;EAOI,oBAAoB;EACpB,kBAAkB;ADmBtB;;AC3BA;EAWM,mCAA2B;EAA3B,2BAA2B;ADoBjC;;AC/BA;EAcQ,kBAAkB;EAClB,OAAO;EACP,MAAM;EACN,oBAAoB;EACpB,UAAU;EACV,kDAA0C;EAA1C,0CAA0C;ADqBlD;;ACxCA;EAsBgB,+CAAuC;EAAvC,uCAAuC;ADsBvD","file":"fancy-tab.css","sourcesContent":["body { background-color: $bg-body; }\n.bg-light {background-color: $light !important;}\n.border { border: 1px solid $border-color; }\n.card, .card-header, .card-footer { border-color: $border-color !important; }","$bg-body: #edf2f9;\n$light: #f9fafd;\n$border-color: #d8e2ef;\n\n\n$fancy-tab-border-width: 1px;\n$fancy-tab-border-color: #f9fafd;\n$fancy-tab-active-color: #2c7be5;\n$fancy-bar-font-size: 1rem;\n$fancy-bar-font-weight: 700;\n$spacers: 8px;\n$fancy-bar-item-color: #4d5969;\n$fancy-bar-font-size: 1rem;","body {\n  background-color: #edf2f9;\n}\n\n.bg-light {\n  background-color: #f9fafd !important;\n}\n\n.border {\n  border: 1px solid #d8e2ef;\n}\n\n.card, .card-header, .card-footer {\n  border-color: #d8e2ef !important;\n}\n\n/*-----------------------------------------------\n|   Fancy Tab\n-----------------------------------------------*/\n@keyframes fadeInLeft {\n  0% {\n    opacity: 0;\n    transform: translateX(-3.125rem);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes fadeOutRight {\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(3.125rem);\n  }\n}\n\n.fancy-tab {\n  display: flex;\n  flex-direction: column;\n}\n\n.fancy-tab .fancy-bar {\n  display: flex;\n  justify-content: flex-start;\n  position: relative;\n  flex-flow: row wrap;\n  border-bottom: 2px solid #f9fafd;\n  width: 100%;\n}\n\n.fancy-tab .fancy-bar .tab-indicator {\n  content: '';\n  position: absolute;\n  display: block;\n  bottom: -0.125rem;\n  height: 0.125rem;\n  background-color: #2c7be5;\n  transition: left 0.4s ease-in-out, right 0.2s ease-in-out;\n}\n\n.fancy-tab .fancy-bar .tab-indicator.transition-reverse {\n  transition: left 0.2s ease-in-out, right 0.4s ease-in-out;\n}\n\n.fancy-tab .fancy-bar .fancy-bar-item {\n  color: #4d5969;\n  padding: 8px 16px;\n  font-size: 1rem;\n  line-height: 1rem;\n  display: inline-block;\n  font-weight: 700;\n  margin-bottom: 0;\n  text-align: center;\n  cursor: pointer;\n  border: 1px solid transparent;\n}\n\n.fancy-tab .fancy-bar .fancy-bar-item.active {\n  color: #2c7be5;\n}\n\n.fancy-tab .fancy-tab-contents {\n  margin-top: 1.875rem;\n  position: relative;\n}\n\n.fancy-tab .fancy-tab-contents .fancy-tab-content {\n  backface-visibility: hidden;\n}\n\n.fancy-tab .fancy-tab-contents .fancy-tab-content:not(.active) {\n  position: absolute;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  opacity: 1;\n  animation: fadeOutRight .25s ease forwards;\n}\n\n.fancy-tab .fancy-tab-contents .fancy-tab-content.active {\n  animation: fadeInLeft .5s ease forwards;\n}\n","/*-----------------------------------------------\n|   Fancy Tab\n-----------------------------------------------*/\n@keyframes fadeInLeft{\n  0%{\n    opacity: 0;\n    transform: translateX(-3.125rem);\n  }\n  100%{\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes fadeOutRight{\n  0%{\n    opacity: 1;\n    transform: translateX(0);\n  }\n  100%{\n    opacity: 0;\n    transform: translateX(3.125rem);\n  }\n}\n\n\n@mixin navigation-bar(){\n  .fancy-bar{\n    display: flex;\n    justify-content: flex-start;\n    position: relative;\n    flex-flow: row wrap;\n    border-bottom: ($fancy-tab-border-width * 2) solid $fancy-tab-border-color;\n    width: 100%;\n\n    .tab-indicator{\n      content: '';\n      position: absolute;\n      display: block;\n      bottom: -0.125rem;\n      height: 0.125rem;\n      background-color: $fancy-tab-active-color;\n      transition: left 0.4s ease-in-out, right 0.2s ease-in-out;\n      &.transition-reverse{ transition: left 0.2s ease-in-out, right 0.4s ease-in-out; }\n    }\n\n    .fancy-bar-item{\n      color: $fancy-bar-item-color;\n      padding:8px 16px;\n      font-size: $fancy-bar-font-size;\n      line-height: $fancy-bar-font-size;\n      display: inline-block;\n      font-weight: $fancy-bar-font-weight;\n      margin-bottom: 0;\n      text-align: center;\n      cursor: pointer;\n      border: $fancy-tab-border-width solid transparent;\n      &.active{ color: $fancy-tab-active-color; }\n    }\n  }\n}\n\n.fancy-tab{\n  display: flex;\n  flex-direction: column;\n\n  @include navigation-bar();\n\n  .fancy-tab-contents{\n    margin-top: 1.875rem;\n    position: relative;\n\n    .fancy-tab-content{\n      backface-visibility: hidden;\n\n      &:not(.active){\n        position: absolute;\n        left: 0;\n        top: 0;\n        pointer-events: none;\n        opacity: 1;\n        animation: fadeOutRight .25s ease forwards;\n      }\n\n      &.active{ animation: fadeInLeft .5s ease forwards; }\n    }\n  }\n}\n"]}