Skip to content

Instantly share code, notes, and snippets.

@1stevengrant

1stevengrant/forms.css

Forked from reinink/forms.css
Created May 4, 2018 10:00
Show Gist options
  • Save 1stevengrant/331a72c2c64138b18be5ee94e2cde76b to your computer and use it in GitHub Desktop.
Save 1stevengrant/331a72c2c64138b18be5ee94e2cde76b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @reinink reinink created this gist Nov 14, 2017.
    88 changes: 88 additions & 0 deletions forms.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    .form-label {
    @apply .mb-2 .block .text-sm .text-dark;
    }

    .form-input,
    .form-textarea,
    .form-select {
    @apply .p-2 .leading-normal .block .w-full .border .text-dark .bg-light .text-sm .font-sans .rounded .text-left .appearance-none;

    &:focus {
    @apply .border-amber-600;
    box-shadow: 0 0 0 1px config('colors.amber-600');
    }

    &::placeholder {
    @apply .text-xs .text-dark-softer;
    }
    }

    .form-select {
    @apply .pr-6;

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg==');
    background-size: 0.7rem;
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    }

    .form-checkbox,
    .form-radio {
    @apply .inline-block .relative .w-4 .h-4;
    }

    .form-checkbox-input,
    .form-radio-input {
    @apply .absolute .pin .z-10 .appearance-none .opacity-0 .cursor-auto;
    }

    .form-checkbox-square {
    @apply .block .w-4 .h-4 .p-px .border .bg-light .rounded-sm .text-red-600;
    }

    .form-checkbox-icon {
    @apply .hidden .w-full .h-full;
    }

    .form-checkbox-input:checked ~ .form-checkbox-square {
    @apply .border-2 .border-red-600;

    & .checkbox-icon {
    @apply .block;
    }
    }

    .form-radio-circle {
    @apply .block .w-4 .h-4 .p-px .border .bg-light .rounded-pill .text-red-600 .relative .flex .items-center .justify-center;

    &:after {
    @apply .hidden .bg-red-600 .rounded-pill .w-2 .h-2;
    content: '';
    }
    }
    .form-radio-input:checked ~ .form-radio-circle {
    @apply .border-2 .border-red-600;
    &:after {
    @apply .block;
    }
    }
    .form-fieldset {
    @apply .p-2 .leading-none .w-full .border .text-dark .bg-light .text-sm .font-sans .rounded;
    }
    .form-error {
    @apply .text-red-600 .mt-2 .text-sm .font-medium;
    }
    .form-input.error,
    .form-textarea.error,
    .form-select.error {
    @apply .border-red-600 .bg-red-100;
    &:focus {
    box-shadow: 0 0 0 1px config('colors.red-600');
    }
    }