54cf4f23e4
- Paginates Crawl Workflows when there are more than 10 workflows - Refactors workflow search and crawl search to use the same component - Adds sort by first seed, workflow creation date, and workflow modified date - Separates "last run" date from "modified" date - Update column layout into Name & Schedule (or Manual Ru'ri=), Latest Crawl (<finish time> in <duration>), total size, and last modified (modified by and modified time)
145 lines
2.3 KiB
TypeScript
145 lines
2.3 KiB
TypeScript
/**
|
|
* Shared lit css classes and utilities
|
|
*/
|
|
import { css } from "lit";
|
|
|
|
// Base typography styles, from Figma Webrecorder Primitives
|
|
export const typography = css`
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: var(--sl-font-weight-semibold);
|
|
line-height: 150%;
|
|
margin-top: var(--sl-spacing-medium);
|
|
margin-bottom: var(--sl-spacing-medium);
|
|
}
|
|
|
|
h1:first-child,
|
|
h2:first-child,
|
|
h3:first-child,
|
|
h4:first-child,
|
|
h5:first-child,
|
|
h6:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--sl-font-size-x-large);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--sl-font-size-large);
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--sl-font-size-small);
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--sl-font-size-x-small);
|
|
}
|
|
|
|
p {
|
|
font-size: var(--sl-font-size-medium);
|
|
line-height: 143%;
|
|
}
|
|
|
|
strong,
|
|
b {
|
|
font-weight: var(--sl-font-weight-semibold);
|
|
}
|
|
`;
|
|
|
|
// From https://tailwindcss.com/docs/screen-readers#screen-reader-only-elements
|
|
export const srOnly = css`
|
|
.srOnly {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
`;
|
|
|
|
export const truncate = css`
|
|
.truncate {
|
|
overflow: clip visible;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
/* Fix for if flex item: */
|
|
min-width: 0;
|
|
}
|
|
`;
|
|
|
|
// From https://tailwindcss.com/docs/animation#pulse
|
|
export const animatePulse = css`
|
|
.animatePulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const dropdown = css`
|
|
.dropdown {
|
|
contain: content;
|
|
transform-origin: top left;
|
|
box-shadow: var(--sl-shadow-medium);
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.animateShow {
|
|
animation: dropdownShow 100ms ease forwards;
|
|
}
|
|
|
|
.animateHide {
|
|
animation: dropdownHide 100ms ease forwards;
|
|
}
|
|
|
|
@keyframes dropdownShow {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes dropdownHide {
|
|
from {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
`;
|