app.scss

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@tailwind preflight;

/**
 * Here you would import any custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities can still
 * override them.
 *
 * @import "my-components/foo";
 * @import "my-components/bar";
 */

@import "components/buttons";

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * @import "my-utilities/background-images";
 * @import "my-utilities/skew-transforms";
 */

// Vendor
$fa-font-path: "/assets/fonts";
@import "~font-awesome/scss/font-awesome.scss";

// Font Imports
@import url("//fonts.googleapis.com/css?family=Roboto|Zilla+Slab");

// Base element styles
html {
  overflow-y: scroll;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  @apply .font-sans .text-base .leading-normal .text-dark .m-0 .pb-8;
}

button, [role=button] {
  @apply .cursor-pointer;
}

img {
  vertical-align: middle;
}

button, input {
  @apply .font-sans;
}

a {
  @apply .text-grey-darkest .no-underline;
}

h1, h2, h3 {
  @apply .mb-2;
}

p {
  @apply .mb-2;
}

ul {
  list-style: disc;
  @apply .my-3 .pl-8;

  ul {
    @apply .m-0;
  }

  > li {
    @apply .mb-1;
  }
}

.list-style-none {
  @apply .list-reset;
}

label {
  @apply .text-grey-dark .text-sm;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  @apply .py-2 .px-3 .mb-2 .block .w-full .border .border-grey .rounded-sm;
}

select {
  @apply .block .p-2 .mb-2 .border .border-grey .rounded-sm;
}

textarea {
  @apply .py-3 .px-3 .w-full .resize-y .rounded-sm .border .border-grey;
}

div:empty {
  @apply .hidden;
}

.pagerfanta {
  a[rel="prev"],
  a[rel="next"] {
    @apply .btn-sm .btn-brand;
  }

  .disabled {
    @apply .btn-sm .btn-disabled;
  }

  a, span {
    @apply .px-2;
  }

  .current {
    @apply .font-bold;
  }
}

//
// Login / SignUp
//
@responsive {
  .opencfp-login,
  .opencfp-signup {
    @apply .text-white;
    @apply .w-1/6;
    min-width: 20rem;
  }
}