memEx/assets/css/components.scss

90 lines
1.8 KiB
SCSS
Raw Normal View History

2021-03-11 21:12:55 -05:00
@layer components {
.input {
2022-02-25 21:39:22 -05:00
@apply rounded-lg px-4 py-2 border focus:outline-none;
2021-09-02 23:32:52 -04:00
@apply shadow-sm focus:shadow-lg;
@apply transition-all duration-300 ease-in-out;
}
2022-02-25 21:39:22 -05:00
2021-09-02 23:32:52 -04:00
.input-primary {
2022-07-25 22:04:10 -04:00
@apply bg-primary-900;
@apply border-primary-600 hover:border-primary-500 active:border-primary-400;
@apply text-primary-400;
2021-09-02 23:32:52 -04:00
}
2022-02-25 21:39:22 -05:00
2021-09-02 23:32:52 -04:00
.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;
2022-02-25 21:39:22 -05:00
margin: 1em auto;
2021-09-02 23:32:52 -04:00
}
2022-02-25 21:39:22 -05:00
2021-09-02 23:32:52 -04:00
.title {
@apply leading-5 tracking-wide;
}
2022-02-25 21:39:22 -05:00
2021-09-02 23:32:52 -04:00
.btn {
@apply focus:outline-none px-4 py-2 rounded-lg;
@apply shadow-sm focus:shadow-lg;
2022-07-25 22:04:10 -04:00
@apply border;
2021-09-02 23:32:52 -04:00
@apply transition-all duration-300 ease-in-out;
}
2022-02-25 21:39:22 -05:00
2021-09-02 23:32:52 -04:00
.btn-primary {
2022-07-25 22:04:10 -04:00
@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;
2022-02-25 21:39:22 -05:00
}
.btn-alert {
@apply bg-red-600 focus:bg-red-700 active:bg-red-800;
@apply border-red-600 focus:border-red-700 active:border-red-800;
2022-07-25 22:04:10 -04:00
@apply text-primary-400;
2021-09-02 23:32:52 -04:00
}
2022-02-25 21:39:22 -05:00
2021-09-02 23:32:52 -04:00
.hr {
2022-07-25 22:04:10 -04:00
@apply border border-primary-400 w-full max-w-2xl;
2022-02-25 21:39:22 -05:00
}
.hr-light {
2022-07-25 22:04:10 -04:00
@apply border border-primary-600 w-full max-w-2xl;
2022-02-25 21:39:22 -05:00
}
.link {
@apply hover:underline;
@apply transition-colors duration-500 ease-in-out;
2021-03-11 21:12:55 -05:00
}
2022-07-25 22:04:10 -04:00
.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;
}
2022-02-25 21:39:22 -05:00
}