SMK_Kelulusan/resources/sass/main.scss

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

@page {
    size: 8.5in 14.0in;
    margin: 0;
}

html, body {
    @apply bg-gray-300 text-teal-800 tracking-wide leading-snug;
	font-family: 'Source Sans Pro', sans-serif;
    font-size: calc(.75rem + 1vmin);
}

span.error {
    @apply text-red-600;
}

.header {
    h1 {
        @apply text-3xl font-bold mb-6 mt-4;
    }
}

.container {
    @apply bg-white mx-auto h-full p-12;
}

.letter {
    @apply mx-auto p-1 text-black w-full;
    font-size: calc(.5rem + 1vmin);

    .mobile-info {
        @apply italic text-gray-600;
        display: initial;
    }

    .print-button {
        @apply text-xs text-white bg-indigo-400 px-2 py-1 rounded hidden;

        &:hover {
            @apply bg-indigo-500;
        }

        &:focus {
            @apply outline-none bg-indigo-600
        }
    }

    p {
        line-height: 1.1;
    }

    .letter__header {
        @apply text-center mt-4;

        img {
            @apply w-full;
        }
    }

    .letter__body-header {
        @apply text-center;
    }

    ol {
        @apply list-decimal list-inside;
    }

    table {
        @apply w-full;

        td {
            @apply align-top pr-2;
        }

        .strong {
            @apply font-bold;
        }

        .special {
            @apply font-bold tracking-widest text-lg italic;
        }
    }

    table.signature {
        @apply w-auto ml-auto mt-4;

        .letter__sign {
            width: 80%;
            height: 4rem;
            background-image: url('/img/letter-sign.jpg');
            background-size: contain;
            background-repeat: no-repeat;
        }
    }
}

.form {
    @apply w-full mt-6;

    .form-grid {
        @apply flex flex-wrap justify-center -mx-3 mb-6;

        .form-group {
            @apply w-full px-3 mb-6;

            .form-label {
                @apply block uppercase tracking-wide text-sm font-bold mb-2;
            }

            .form-input {
                @apply appearance-none block w-full bg-gray-200 border rounded py-3 px-4 leading-tight;

                &:focus {
                    @apply outline-none bg-white border-gray-500;
                }
            }

            .input-helper {
                @apply text-gray-600 text-sm italic;
            }
        }

        .form-submit {
            @apply bg-gray-400 border rounded py-3 px-4 leading-tight uppercase self-center;

            &:hover {
                @apply border-gray-500 bg-white;
            }

            &:focus {
                @apply outline-none;
            }
        }
    }
}

@screen md {
    .header {
        h1 {
            @apply text-5xl;
        }
    }

    .container {
        @apply w-3/4 mt-8;
    }

    .letter {
        .mobile-info {
            @apply hidden;
        }

        .print-button {
            display: initial;
        }
    }
}

@screen print {
    html,body {
        @apply bg-white;
    }

    body {
        margin: 1cm;
    }

    .container > .header, .container > .form, .letter .print-button, .letter .mobile-info {
        @apply hidden;
    }

    .container {
        @apply w-full max-w-full m-0 p-0;
    }

    .letter {
        font-family: 'Calibri', 'Source Sans Pro', sans-serif;
        font-size: 12px;

        .letter__body-header {
            font-size: 14px;
        }
    }
}