90 lines
1.8 KiB
SCSS
90 lines
1.8 KiB
SCSS
@layer components {
|
|
.input {
|
|
@apply rounded-lg px-4 py-2 border focus:outline-none;
|
|
@apply shadow-sm focus:shadow-lg;
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
.input-primary {
|
|
@apply bg-primary-900;
|
|
@apply border-primary-600 hover:border-primary-500 active:border-primary-400;
|
|
@apply text-primary-400;
|
|
}
|
|
|
|
.checkbox {
|
|
-ms-transform: scale(1.5);
|
|
-moz-transform: scale(1.5);
|
|
-webkit-transform: scale(1.5);
|
|
-o-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
padding: 10px;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
.title {
|
|
@apply leading-5 tracking-wide;
|
|
}
|
|
|
|
.btn {
|
|
@apply focus:outline-none px-4 py-2 rounded-lg;
|
|
@apply shadow-sm focus:shadow-lg;
|
|
@apply border;
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-primary-900 focus:bg-primary-900 active:bg-primary-800;
|
|
@apply border-primary-600 hover:border-primary-500 active:border-primary-400;
|
|
@apply text-primary-400;
|
|
}
|
|
|
|
.btn-alert {
|
|
@apply bg-red-700 focus:bg-red-800 active:bg-red-900;
|
|
@apply border-red-700 focus:border-red-800 active:border-red-900;
|
|
@apply text-primary-300;
|
|
}
|
|
|
|
.hr {
|
|
@apply border border-primary-400 w-full max-w-2xl;
|
|
}
|
|
|
|
.hr-light {
|
|
@apply border border-primary-600 w-full max-w-2xl;
|
|
}
|
|
|
|
.link {
|
|
@apply hover:underline;
|
|
@apply transition-colors duration-500 ease-in-out;
|
|
}
|
|
|
|
.alert {
|
|
@apply bg-primary-900;
|
|
@apply border-primary-600 hover:border-primary-500 active:border-primary-400;
|
|
@apply text-primary-400;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.alert-info {
|
|
@apply text-primary-400;
|
|
}
|
|
|
|
.alert-warning {
|
|
color: #8a6d3b;
|
|
}
|
|
|
|
.alert-danger {
|
|
color: #a94442;
|
|
}
|
|
|
|
.alert p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.alert:empty {
|
|
@apply hidden;
|
|
}
|
|
}
|