mirror of
https://github.com/penpot/penpot.git
synced 2026-02-16 00:22:55 +00:00
157 lines
2.9 KiB
CSS
157 lines
2.9 KiB
CSS
.text {
|
|
margin-block-start: var(--spacing-24);
|
|
}
|
|
|
|
.input-container {
|
|
background-color: var(--db-tertiary);
|
|
border-radius: var(--spacing-8);
|
|
color: #8a9ca2;
|
|
font-size: var(--font-size-s);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: var(--font-line-height-s);
|
|
margin-block-start: var(--spacing-8);
|
|
padding: var(--spacing-8) var(--spacing-24) var(--spacing-8) var(--spacing-24);
|
|
text-transform: uppercase;
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.inputfile {
|
|
block-size: 1px;
|
|
border: 0;
|
|
clip: rect(1px 1px 1px 1px);
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
clip-path: inset(50%);
|
|
inline-size: 1px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.inputfile + label {
|
|
display: block;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border-block-end: 2px solid var(--background-quaternary);
|
|
margin-block: var(--spacing-24);
|
|
}
|
|
|
|
.table-grid {
|
|
background-color: var(--db-tertiary);
|
|
display: grid;
|
|
grid-template-columns: repeat(8, auto);
|
|
grid-template-rows: repeat(6, auto);
|
|
border-radius: var(--spacing-8);
|
|
padding: 10px;
|
|
margin-block: var(--spacing-16) var(--spacing-20);
|
|
}
|
|
|
|
.cell {
|
|
align-items: center;
|
|
block-size: 26px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.square {
|
|
block-size: 22px;
|
|
border: 1px solid var(--df-secondary);
|
|
border-radius: var(--spacing-4);
|
|
display: block;
|
|
inline-size: 22px;
|
|
|
|
&.active {
|
|
background-color: var(--da-primary);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--da-tertiary);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.checkbox-container {
|
|
margin-block-end: var(--spacing-12);
|
|
}
|
|
|
|
.new-table {
|
|
align-items: center;
|
|
block-size: 22px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-block-end: var(--spacing-12);
|
|
|
|
& .text {
|
|
margin-block-start: 0;
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
border: 1px solid var(--accent-primary);
|
|
border-radius: var(--spacing-4);
|
|
color: var(--accent-primary);
|
|
font-size: var(--font-size-s);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: var(--font-line-height-s);
|
|
padding: var(--spacing-4);
|
|
}
|
|
|
|
.error {
|
|
align-items: center;
|
|
background-color: var(--error-950);
|
|
border: 1px solid var(--error-700);
|
|
border-radius: var(--spacing-8);
|
|
display: flex;
|
|
margin-block-start: var(--spacing-8);
|
|
padding: var(--spacing-8);
|
|
|
|
& .close-icon:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
& .message {
|
|
color: var(--lb-primary);
|
|
margin-inline-start: var(--spacing-8);
|
|
}
|
|
}
|
|
|
|
:host[data-theme='light'] {
|
|
& .input-container {
|
|
background-color: var(--la-primary);
|
|
color: var(--lb-primary);
|
|
}
|
|
|
|
& .table-grid {
|
|
background-color: var(--lb-quaternary);
|
|
}
|
|
|
|
& .square {
|
|
border: 1px solid var(--df-secondary);
|
|
|
|
&.active {
|
|
background-color: var(--la-tertiary);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--la-primary);
|
|
}
|
|
}
|
|
|
|
& .error {
|
|
background-color: var(--error-200);
|
|
border: 1px solid var(--error-500);
|
|
|
|
& .message {
|
|
color: var(--db-primary);
|
|
}
|
|
}
|
|
}
|