livebook/assets/css/components.css
2022-08-18 10:34:27 -03:00

300 lines
6.9 KiB
CSS

@layer components {
/* Buttons */
.button-base {
@apply px-5 py-2 rounded-lg border border-transparent font-medium text-sm whitespace-nowrap;
}
.button-blue {
@apply border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:bg-blue-700;
}
.button-red {
@apply border-transparent bg-red-600 text-white hover:bg-red-700 focus:bg-red-700;
}
.button-gray {
@apply border-gray-200 bg-gray-100 text-gray-600 hover:bg-gray-200 focus:bg-gray-200;
}
.button-outlined-blue {
@apply bg-blue-50 border-blue-600 text-blue-600 hover:bg-blue-100 focus:bg-blue-100;
}
.button-outlined-red {
@apply bg-red-50 border-red-600 text-red-600 hover:bg-red-100 focus:bg-red-100;
}
.button-outlined-gray {
@apply bg-white border-gray-300 text-gray-600 hover:bg-gray-100 focus:bg-gray-100;
}
.button-base:disabled {
@apply cursor-default pointer-events-none border-transparent bg-gray-100 text-gray-400;
}
.button-small {
@apply px-2 py-1 bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100 focus:bg-gray-100;
}
.button-square-icon {
@apply p-2 flex items-center justify-center;
}
.button-square-icon i {
@apply text-xl leading-none;
}
.choice-button {
@apply px-5 py-2 rounded-lg border text-gray-700 bg-white border-gray-200;
}
.choice-button.active {
@apply bg-blue-100 border-blue-600;
}
.icon-button {
@apply p-1 flex items-center justify-center text-gray-500 hover:text-gray-900 rounded-full;
}
.icon-button:focus {
@apply bg-gray-100;
}
.icon-button:disabled,
.icon-button.disabled {
@apply cursor-default pointer-events-none text-gray-300;
}
.icon-button i {
line-height: 1;
}
.icon-outlined-button {
@apply rounded-full border-2;
}
/* Links */
.link {
@apply font-medium underline text-gray-900 hover:no-underline;
}
/* Form fields */
.input {
@apply w-full px-3 py-2 bg-gray-50 text-sm border border-gray-200 rounded-lg placeholder-gray-400 text-gray-600;
}
.input[type="color"] {
@apply py-0 w-16;
}
.input--error {
@apply bg-red-50 border-red-600 text-red-600;
}
.input-range {
height: 8px;
@apply appearance-none bg-gray-200 rounded-lg;
}
.input-range::-webkit-slider-thumb {
width: 20px;
height: 20px;
@apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl;
}
.input-range::-moz-range-thumb {
width: 20px;
height: 20px;
@apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl;
}
.input-select {
@apply w-60;
}
.input-label {
@apply mb-0.5 text-sm text-gray-800 font-medium;
}
.input-error {
@apply mt-2 text-red-600 italic text-xs;
}
.switch-button {
@apply relative inline-block w-14 h-7 mr-2 select-none;
}
.switch-button--disabled {
@apply pointer-events-none opacity-50;
}
.switch-button__checkbox {
@apply appearance-none absolute block w-7 h-7 rounded-full bg-gray-400 border-[5px] border-gray-100 cursor-pointer transition-all duration-300;
}
.switch-button__bg {
@apply block h-full w-full rounded-full bg-gray-100 cursor-pointer transition-all duration-300;
}
.switch-button__checkbox:checked {
@apply bg-white border-blue-600;
transform: translateX(100%);
}
.switch-button__checkbox:checked + .switch-button__bg {
@apply bg-blue-600;
}
.radio-base {
appearance: none;
width: 20px;
height: 20px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='9.5' stroke='%23CAD5E0' fill='white' /%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.radio-base:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='9.5' stroke='%233E64FF' fill='white' /%3e%3ccircle cx='10' cy='10' r='6' fill='%233E64FF' /%3e%3c/svg%3e");
}
.checkbox-base {
@apply h-5 w-5 appearance-none border border-gray-300 rounded text-blue-600 cursor-pointer;
}
.checkbox-base:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* Custom scrollbars */
.tiny-scrollbar::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
}
.tiny-scrollbar::-webkit-scrollbar-thumb {
border-radius: 0.25rem;
@apply bg-gray-400;
}
.tiny-scrollbar::-webkit-scrollbar-track {
@apply bg-gray-100;
}
/* Tabs */
.tabs {
@apply w-full flex;
}
.tabs .tab {
@apply flex items-center space-x-2 px-3 py-2 border-b-2 text-gray-400 border-gray-100;
}
.tabs .tab.active {
@apply text-blue-600 border-blue-600;
}
/* Toggleable menu */
.menu {
@apply relative;
}
.menu__content {
@apply absolute z-[100] rounded-lg bg-white flex flex-col py-2;
box-shadow: 0px 15px 99px rgba(13, 24, 41, 0.15);
}
.menu__content--top-right {
@apply top-0 right-0 transform -translate-y-full -mt-1;
}
.menu__content--top-left {
@apply top-0 left-0 transform -translate-y-full -mt-1;
}
.menu__content--bottom-right {
@apply bottom-0 right-0 transform translate-y-full -mb-1;
}
.menu__content--bottom-left {
@apply bottom-0 left-0 transform translate-y-full -mb-1;
}
.menu:not(.menu--open) > .menu__overlay,
.menu:not(.menu--open) > .menu__content {
@apply hidden;
}
.menu.menu--open > .menu__overlay {
@apply fixed z-[90] inset-0;
}
.menu-item {
@apply w-full flex space-x-3 px-5 py-2 items-center hover:bg-gray-100 focus:bg-gray-100 whitespace-nowrap;
}
.menu-item:disabled {
@apply pointer-events-none opacity-50;
}
.menu-item--disabled {
@apply pointer-events-none opacity-50;
}
.submenu {
@apply relative;
}
.submenu:not(:hover):not(:focus-within) .submenu__content {
@apply hidden;
}
.submenu__content {
@apply absolute -top-2 right-0 translate-x-full pl-2;
}
/* Boxes */
.error-box {
@apply rounded-lg px-4 py-2 bg-red-100 text-red-400 font-medium;
}
.info-box {
@apply p-4 bg-gray-100 text-sm text-gray-500 font-medium rounded-lg;
}
/* Cards */
.card-item {
@apply cursor-pointer;
}
.card-item:not(.selected) .card-item-logo {
@apply border-gray-100;
}
.card-item:not(.selected) .card-item-body {
@apply bg-gray-100;
}
.card-item.selected .card-item-logo {
@apply border-gray-200;
}
.card-item.selected .card-item-body {
@apply bg-gray-200;
}
}