@clubmed/trident-ui/styles/globals.css

Shared ClubMed React UI components

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Newsreader:opsz,wght@6..72,700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* BRAND */
    --color-black: 0deg 0% 0%;
    --color-black-active: 0deg 0% 20%;
    --color-ultramarine: 227deg 38% 19%;
    --color-ultramarine-active: 227deg 38% 29%;
    --color-lavender: 229deg 80% 79%;
    --color-lavender-active: 229deg 80% 74%;
    --color-verdigris: 163deg 12% 71%;
    --color-verdigris-active: 163deg 12% 66%;
    --color-sand: 35deg 18% 80%;
    --color-sand-active: 35deg 18% 75%;
    --color-lightSand: 32deg 45% 94%;
    --color-lightSand-active: 40deg 36% 85%;
    --color-saffron: 45deg 100% 50%;
    --color-saffron-active: 45deg 100% 45%;
    --color-sienna: 13deg 48% 39%;
    --color-sienna-active: 13deg 48% 44%;
    --color-wave: 180 100% 25%;
    --color-wave-active: 180 100% 22%;
    --color-white: 0deg 0% 100%;
    --color-white-active: 0deg 0% 80%;

    /* LAYOUT */
    --color-darkGrey: 0deg 0% 20%;
    --color-middleGrey: 0deg 0% 40%;
    --color-grey: 0deg 0% 60%;
    --color-lightGrey: 0deg 0% 80%;
    --color-pearl: 0deg 0% 97%;
    --color-green: 131deg 89% 29%;
    --color-red: 9deg 79% 42%;
    --color-orange: 25deg 100% 39%;

    /* TRANSITION */
    --transition-fn-boop: cubic-bezier(0.47, 1.64, 0.41, 0.8);
    --transition-duration-boop: 0.4s;
  }
}

@layer components {
  html {
    --xDirCoefficient: 1;
    scroll-behavior: smooth;
  }

  html[dir='rtl'] {
    --xDirCoefficient: -1;
  }

  /* LINKS */
  .link-underline {
    @apply transition-bg-size;
    @apply duration-1000;

    background-image: linear-gradient(transparent calc(100% - 1px), currentcolor 1px);
    background-repeat: no-repeat;
    background-size: calc(100% - 0px) 100%;
  }

  .link-underline.has-icon {
    background-size: calc(100% - 32px) 100%;
  }

  .link-container:hover .link-underline.hoverable,
  .link-container:focus .link-underline.hoverable {
    background-size: calc(0% - 0px) 100%;
  }

  .group:hover .link-underline.hoverable,
  .group:focus .link-underline.hoverable {
    background-size: calc(0% - 0px) 100%;
  }

  /* INPUTS */
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  input[type='password']::-ms-reveal {
    display: none;
  }

  select:invalid {
    @apply text-middleGrey;
  }

  .date-field {
    @apply appearance-none;
  }

  .date-field::-webkit-calendar-picker-indicator {
    @apply hidden;
  }

  .date-field::-webkit-datetime-edit {
    @apply w-full;
  }

  .date-field::-webkit-datetime-edit-fields-wrapper {
    @apply w-full;
    @apply flex;
    @apply justify-between;
    @apply uppercase;
  }

  /* SCROLLS */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}