Files
landscape-template/src/index.css
2022-01-16 20:51:24 +02:00

97 lines
2.0 KiB
CSS

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply text-gray-900 py-12 px-42 bg-gray-25 hover:bg-gray-50 font-sans rounded-lg font-regular border border-gray-300;
}
.btn-primary {
@apply bg-primary-500 border-0 shadow-sm hover:bg-primary-400 text-white;
}
.btn-gray {
@apply bg-gray-100 hover:bg-gray-200 text-gray-900;
}
.input-wrapper {
@apply w-full relative border border-gray-300 rounded-lg shadow-xs flex h-42 focus-within:outline-primary;
}
.input-field {
@apply flex-grow appearance-none w-full py-2 px-3 bg-transparent text-primary-500 leading-tight focus:outline-none;
}
.input-icon {
@apply h-full text-primary-500 flex-shrink-0 w-42 px-12;
}
.chip {
@apply bg-gray-100 text-body4 px-16 py-8 rounded-24 font-regular;
}
.chip-small {
@apply bg-gray-100 text-body5 px-12 py-8 rounded-16 font-regular;
}
.modal-card {
@apply rounded-[40px] bg-gray-50 overflow-hidden w-full shadow-2xl z-10;
}
}
body {
overflow-x: hidden;
}
svg {
display: inline-block;
}
/* width */
::-webkit-scrollbar {
width: 4px;
}
@media screen and (min-width: 668px) {
/* width */
::-webkit-scrollbar {
width: 12px;
}
}
/* Track */
::-webkit-scrollbar-track {
background: #ddd;
}
/* Handle */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #aaa;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: #999;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.no-scrollbar {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.no-scrollbar ::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}