cashbac-component/public/css/tab/tab.css

Front End depedencies for CB Merchant Webapp

@font-face {
  font-family: "Poppins";
  src: url("../../assets/fonts/Poppins/Poppins.woff2") format("woff2"), url("../../assets/fonts/Poppins/Poppins.woff") format("woff"); }

* {
  -webkit-text-size-adjust: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; }

:not(input):not(textarea):not(button) {
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

html,
body {
  font-family: Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  position: relative;
  line-height: 20px;
  background-color: #f1f3f4;
  -webkit-overflow-scrolling: touch; }

.font-color--primary {
  color: #26ADE4; }

.bg--primary {
  background-color: #26ADE4; }

.border--primary {
  border-color: #26ADE4; }

.font-color--primary-ext-1 {
  color: #5A5A5A; }

.bg--primary-ext-1 {
  background-color: #5A5A5A; }

.border--primary-ext-1 {
  border-color: #5A5A5A; }

.font-color--secondary {
  color: #ffffff; }

.bg--secondary {
  background-color: #ffffff; }

.border--secondary {
  border-color: #ffffff; }

.font-color--secondary-ext-1 {
  color: #f1f1f1; }

.bg--secondary-ext-1 {
  background-color: #f1f1f1; }

.border--secondary-ext-1 {
  border-color: #f1f1f1; }

.font-color--tertiary {
  color: #C1C1C1; }

.bg--tertiary {
  background-color: #C1C1C1; }

.border--tertiary {
  border-color: #C1C1C1; }

.font-color--tertiary-ext-1 {
  color: #D1D1D1; }

.bg--tertiary-ext-1 {
  background-color: #D1D1D1; }

.border--tertiary-ext-1 {
  border-color: #D1D1D1; }

.font-color--tertiary-ext-2 {
  color: #ededed; }

.bg--tertiary-ext-2 {
  background-color: #ededed; }

.border--tertiary-ext-2 {
  border-color: #ededed; }

.font-color--tertiary-ext-4 {
  color: #202d3d; }

.bg--tertiary-ext-4 {
  background-color: #202d3d; }

.border--tertiary-ext-4 {
  border-color: #202d3d; }

.font-color--almond {
  color: #EFDECD; }

.bg--almond {
  background-color: #EFDECD; }

.border--almond {
  border-color: #EFDECD; }

.font-color--bronze {
  color: #804A00; }

.bg--bronze {
  background-color: #804A00; }

.border--bronze {
  border-color: #804A00; }

.font-color--cream {
  color: #FFFDD0; }

.bg--cream {
  background-color: #FFFDD0; }

.border--cream {
  border-color: #FFFDD0; }

.font-color--grey {
  color: #8C92AC; }

.bg--grey {
  background-color: #8C92AC; }

.border--grey {
  border-color: #8C92AC; }

.font-color--mint {
  color: #F5FFFA; }

.bg--mint {
  background-color: #F5FFFA; }

.border--mint {
  border-color: #F5FFFA; }

.font-color--olive {
  color: #808000; }

.bg--olive {
  background-color: #808000; }

.border--olive {
  border-color: #808000; }

.font-color--pink {
  color: #FF1493; }

.bg--pink {
  background-color: #FF1493; }

.border--pink {
  border-color: #FF1493; }

.font-color--tan {
  color: #D2B48C; }

.bg--tan {
  background-color: #D2B48C; }

.border--tan {
  border-color: #D2B48C; }

.font-color--yellow {
  color: #FFE135; }

.bg--yellow {
  background-color: #FFE135; }

.border--yellow {
  border-color: #FFE135; }

.font-color--beige {
  color: #F5F5DC; }

.bg--beige {
  background-color: #F5F5DC; }

.border--beige {
  border-color: #F5F5DC; }

.font-color--brown {
  color: #993300; }

.bg--brown {
  background-color: #993300; }

.border--brown {
  border-color: #993300; }

.font-color--fuchsia {
  color: #FF00FF; }

.bg--fuchsia {
  background-color: #FF00FF; }

.border--fuchsia {
  border-color: #FF00FF; }

.font-color--khaki {
  color: #BDB76B; }

.bg--khaki {
  background-color: #BDB76B; }

.border--khaki {
  border-color: #BDB76B; }

.font-color--orange {
  color: #F57C00; }

.bg--orange {
  background-color: #F57C00; }

.border--orange {
  border-color: #F57C00; }

.font-color--torquise {
  color: #00CED1; }

.bg--torquise {
  background-color: #00CED1; }

.border--torquise {
  border-color: #00CED1; }

.font-color--black {
  color: #000000; }

.bg--black {
  background-color: #000000; }

.border--black {
  border-color: #000000; }

.font-color--camel {
  color: #C19A6B; }

.bg--camel {
  background-color: #C19A6B; }

.border--camel {
  border-color: #C19A6B; }

.font-color--gold {
  color: #CC9900; }

.bg--gold {
  background-color: #CC9900; }

.border--gold {
  border-color: #CC9900; }

.font-color--magenta {
  color: #8B008B; }

.bg--magenta {
  background-color: #8B008B; }

.border--magenta {
  border-color: #8B008B; }

.font-color--navy {
  color: #000080; }

.bg--navy {
  background-color: #000080; }

.border--navy {
  border-color: #000080; }

.font-color--red {
  color: #FF0000; }

.bg--red {
  background-color: #FF0000; }

.border--red {
  border-color: #FF0000; }

.font-color--tosca {
  color: #2ED1A2; }

.bg--tosca {
  background-color: #2ED1A2; }

.border--tosca {
  border-color: #2ED1A2; }

.font-color--blue {
  color: #0000FF; }

.bg--blue {
  background-color: #0000FF; }

.border--blue {
  border-color: #0000FF; }

.font-color--coffee {
  color: #6F4E37; }

.bg--coffee {
  background-color: #6F4E37; }

.border--coffee {
  border-color: #6F4E37; }

.font-color--green {
  color: #006400; }

.bg--green {
  background-color: #006400; }

.border--green {
  border-color: #006400; }

.font-color--maroon {
  color: #C32148; }

.bg--maroon {
  background-color: #C32148; }

.border--maroon {
  border-color: #C32148; }

.font-color--peach {
  color: #FFCBA4; }

.bg--peach {
  background-color: #FFCBA4; }

.border--peach {
  border-color: #FFCBA4; }

.font-color--silver {
  color: #C0C0C0; }

.bg--silver {
  background-color: #C0C0C0; }

.border--silver {
  border-color: #C0C0C0; }

.font-color--white {
  color: #FFFFFF; }

.bg--white {
  background-color: #FFFFFF; }

.border--white {
  border-color: #FFFFFF; }

.font--helvetica-normal {
  font-family: Helvetica-Roman, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.font--helvetica-medium {
  font-family: Helvetica-Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.font--helvetica-bold {
  font-family: Helvetica-Bold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.font--lato-light {
  font-family: Lato-Light, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.font--lato-normal {
  font-family: Lato-Regular, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.font--lato-semibold {
  font-family: Lato-Semi-Bold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.font--lato-bold {
  font-family: Lato-Bold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

img {
  display: block;
  max-width: 100%;
  align-self: center; }

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow-y: scroll; }

.--disable-flex {
  display: block;
  flex: none; }

a {
  color: #3c5a98;
  text-decoration: none;
  font-family: 'Lato-Regular'; }

p {
  font-size: 13px;
  text-decoration: none;
  font-family: 'Lato-Regular';
  color: #191919;
  line-height: 1.4; }

.can-copy {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: auto; }
  .can-copy * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: auto; }

button {
  -webkit-appearance: none;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: none; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.text-uppercase {
  text-transform: uppercase; }

.text-lowercase {
  text-transform: lowercase; }

.text-left {
  text-align: left; }

.text-no-wrap {
  white-space: nowrap; }

.pull-left {
  float: left; }

.pull-right {
  float: right; }

.d-none {
  display: none; }

.d-block {
  display: block; }

.d-inline-block {
  display: inline-block; }

.d-flex {
  display: flex; }

.text-elipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-elipsis-two-line {
  overflow: hidden;
  height: 30px; }

.full-height {
  height: 100%; }

.margin--small {
  margin: 5px; }

.margin--small-v {
  margin-top: 5px;
  margin-bottom: 5px; }

.margin--small-h {
  margin-left: 5px;
  margin-right: 5px; }

.margin--small-t {
  margin-top: 5px; }

.margin--small-b {
  margin-bottom: 5px; }

.margin--small-l {
  margin-left: 5px; }

.margin--small-r {
  margin-right: 5px; }

.margin--normal {
  margin: 10px; }

.margin--normal-v {
  margin-top: 10px;
  margin-bottom: 10px; }

.margin--normal-h {
  margin-left: 10px;
  margin-right: 10px; }

.margin--normal-t {
  margin-top: 10px; }

.margin--normal-b {
  margin-bottom: 10px; }

.margin--normal-l {
  margin-left: 10px; }

.margin--normal-r {
  margin-right: 10px; }

.margin--medium {
  margin: 15px; }

.margin--medium-v {
  margin-top: 15px;
  margin-bottom: 15px; }

.margin--medium-h {
  margin-left: 15px;
  margin-right: 15px; }

.margin--medium-t {
  margin-top: 15px; }

.margin--medium-b {
  margin-bottom: 15px; }

.margin--medium-l {
  margin-left: 15px; }

.margin--medium-r {
  margin-right: 15px; }

.margin--large {
  margin: 30px; }

.margin--large-v {
  margin-top: 30px;
  margin-bottom: 30px; }

.margin--large-h {
  margin-left: 30px;
  margin-right: 30px; }

.margin--large-t {
  margin-top: 30px; }

.margin--large-b {
  margin-bottom: 30px; }

.margin--large-l {
  margin-left: 30px; }

.margin--large-r {
  margin-right: 30px; }

.margin--none {
  margin: 0px; }

.margin--none-v {
  margin-top: 0px;
  margin-bottom: 0px; }

.margin--none-h {
  margin-left: 0px;
  margin-right: 0px; }

.margin--none-t {
  margin-top: 0px; }

.margin--none-b {
  margin-bottom: 0px; }

.margin--none-l {
  margin-left: 0px; }

.margin--none-r {
  margin-right: 0px; }

.no-margin-v {
  margin-top: 0;
  margin-bottom: 0; }

.no-margin-h {
  margin-left: 0;
  margin-right: 0; }

.no-margin-l {
  margin-left: 0; }

.no-margin-r {
  margin-right: 0; }

.no-margin-t {
  margin-top: 0; }

.no-margin-b {
  margin-bottom: 0; }

.padding--small {
  padding: 5px; }

.padding--small-v {
  padding-top: 5px;
  padding-bottom: 5px; }

.padding--small-h {
  padding-left: 5px;
  padding-right: 5px; }

.padding--small-t {
  padding-top: 5px; }

.padding--small-b {
  padding-bottom: 5px; }

.padding--small-l {
  padding-left: 5px; }

.padding--small-r {
  padding-right: 5px; }

.padding--normal {
  padding: 10px; }

.padding--normal-v {
  padding-top: 10px;
  padding-bottom: 10px; }

.padding--normal-h {
  padding-left: 10px;
  padding-right: 10px; }

.padding--normal-t {
  padding-top: 10px; }

.padding--normal-b {
  padding-bottom: 10px; }

.padding--normal-l {
  padding-left: 10px; }

.padding--normal-r {
  padding-right: 10px; }

.padding--medium {
  padding: 15px; }

.padding--medium-v {
  padding-top: 15px;
  padding-bottom: 15px; }

.padding--medium-h {
  padding-left: 15px;
  padding-right: 15px; }

.padding--medium-t {
  padding-top: 15px; }

.padding--medium-b {
  padding-bottom: 15px; }

.padding--medium-l {
  padding-left: 15px; }

.padding--medium-r {
  padding-right: 15px; }

.padding--large {
  padding: 30px; }

.padding--large-v {
  padding-top: 30px;
  padding-bottom: 30px; }

.padding--large-h {
  padding-left: 30px;
  padding-right: 30px; }

.padding--large-t {
  padding-top: 30px; }

.padding--large-b {
  padding-bottom: 30px; }

.padding--large-l {
  padding-left: 30px; }

.padding--large-r {
  padding-right: 30px; }

.padding--none {
  padding: 0px; }

.padding--none-v {
  padding-top: 0px;
  padding-bottom: 0px; }

.padding--none-h {
  padding-left: 0px;
  padding-right: 0px; }

.padding--none-t {
  padding-top: 0px; }

.padding--none-b {
  padding-bottom: 0px; }

.padding--none-l {
  padding-left: 0px; }

.padding--none-r {
  padding-right: 0px; }

.no-padding-v {
  padding-top: 0;
  padding-bottom: 0; }

.no-padding-h {
  padding-left: 0;
  padding-right: 0; }

.no-padding-l {
  padding-left: 0; }

.no-padding-r {
  padding-right: 0; }

.no-padding-t {
  padding-top: 0; }

.no-padding-b {
  padding-bottom: 0; }

.flex-column {
  flex-direction: column; }

.flex-row {
  flex-direction: row; }

.flex-wrap {
  flex-wrap: wrap; }

.flex-middle {
  align-items: center; }

.flex-spaceBetween {
  justify-content: space-between; }

.flex-center {
  justify-content: center; }

.text-line-through {
  text-decoration: line-through; }

.flex-shrink-unset {
  flex-shrink: unset; }

hr {
  border: none;
  height: 1px;
  background: #d8d8d8; }

.thumbnail-small {
  display: flex !important;
  justify-content: center;
  align-items: center; }
  .thumbnail-small img {
    max-height: 140px;
    width: auto !important; }

.horizontal-scroll {
  flex-wrap: nowrap;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }

@keyframes fadeEffect {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.tab--around {
  justify-content: space-around; }

.tab--between {
  justify-content: space-between; }

.tab {
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #f1f1f1;
  display: flex;
  border-radius: 4px; }

.tab--pill--vertical {
  display: flex;
  flex-direction: column; }
  .tab--pill--vertical div {
    cursor: pointer;
    background-color: #ffffff;
    color: #26ADE4;
    margin-right: -4px;
    flex-grow: 1;
    flex-shrink: 1;
    padding-left: 10px;
    transition: all ease-in-out .2s; }
    .tab--pill--vertical div.active {
      background-color: #26ADE4;
      color: #ffffff; }
    .tab--pill--vertical div:hover {
      background: #26ADE4;
      color: #ffffff; }

.tab--small div {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px; }

.tab--medium div {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px; }

.tab--large div {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px; }

.pill--small div {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px; }

.pill--medium div {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px; }

.pill--large div {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 16px; }

.tab--pill--horizontal {
  display: flex;
  flex-direction: row; }
  .tab--pill--horizontal div {
    cursor: pointer;
    background-color: #ffffff;
    color: #26ADE4;
    transition: all ease-in-out .5s;
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center; }
    .tab--pill--horizontal div:not(:first-child), .tab--pill--horizontal div:not(:last-child) {
      border-style: solid;
      border-top-color: #26ADE4;
      border-bottom-color: #26ADE4;
      border-right-color: #26ADE4;
      border-left: none;
      border-width: 1px; }
    .tab--pill--horizontal div.active {
      background-color: #26ADE4;
      color: #ffffff; }
    .tab--pill--horizontal div:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-style: solid;
      border-left-color: #26ADE4;
      border-width: 1px; }
    .tab--pill--horizontal div:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-style: solid;
      border-top-color: #26ADE4;
      border-bottom-color: #26ADE4;
      border-right-color: #26ADE4;
      border-left: none;
      border-width: 1px; }
    .tab--pill--horizontal div:hover {
      background: #26ADE4;
      color: #ffffff; }

.tab div {
  cursor: pointer;
  transition: border-bottom ease-in-out .1s;
  color: #D1D1D1;
  padding-left: 30px;
  padding-top: 20px;
  border-bottom: 4px solid transparent;
  font-size: 12px; }
  .tab div:hover, .tab div.active {
    border-bottom: 4px solid #26ADE4; }

.tabcontent {
  display: none;
  padding: 10px 15px;
  border-top: none;
  animation: fadeEffect 1s; }