Charles de Dreuille
348 lines
7.0 KiB
CSS
348 lines
7.0 KiB
CSS
.cn-button {
|
|
all: unset;
|
|
user-select: none;
|
|
font-family: var(--canon-font-regular);
|
|
font-weight: var(--canon-font-weight-bold);
|
|
font-size: var(--canon-font-size-body);
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
transition: all .15s;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.cn-button-primary {
|
|
background-color: var(--canon-accent);
|
|
color: var(--canon-text-primary-on-accent);
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 0 0 1px var(--canon-border-focus);
|
|
color: var(--canon-text-primary);
|
|
background-color: #0000;
|
|
}
|
|
}
|
|
|
|
.cn-button-secondary {
|
|
box-shadow: inset 0 0 0 1px var(--canon-border-base);
|
|
color: var(--canon-text-primary);
|
|
background-color: #0000;
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
|
}
|
|
}
|
|
|
|
.cn-button-tertiary {
|
|
color: var(--canon-text-primary);
|
|
background-color: #0000;
|
|
|
|
&:hover {
|
|
color: var(--canon-text-secondary);
|
|
}
|
|
}
|
|
|
|
.cn-button-small {
|
|
height: 32px;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.cn-button-medium {
|
|
height: 40px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.cn-button-content {
|
|
align-items: center;
|
|
gap: var(--canon-spacing-xs);
|
|
font-weight: var(--canon-font-weight-bold);
|
|
display: flex;
|
|
}
|
|
|
|
.cn-button-content-icon-both {
|
|
flex: 1;
|
|
}
|
|
|
|
.canon-stack {
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
|
|
.canon-inline {
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
}
|
|
|
|
.canon-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.canon-container {
|
|
max-width: var(--canon-container-max-width);
|
|
padding: 0 var(--canon-container-padding);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.icon-12 {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.icon-16 {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.icon-24 {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.checkbox-label {
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--canon-spacing-xs);
|
|
font-size: var(--canon-font-size-xs);
|
|
font-family: var(--canon-font-regular);
|
|
color: var(--canon-text-primary);
|
|
user-select: none;
|
|
flex-direction: row;
|
|
display: flex;
|
|
|
|
&:hover {
|
|
& .checkbox {
|
|
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
all: unset;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
box-shadow: inset 0 0 0 1px var(--canon-border-base);
|
|
cursor: pointer;
|
|
border-radius: 2px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all .2s ease-in-out;
|
|
display: flex;
|
|
|
|
&[data-checked] {
|
|
background-color: var(--canon-accent);
|
|
}
|
|
}
|
|
|
|
.checkbox-indicator {
|
|
color: var(--canon-text-primary-on-accent);
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.table {
|
|
background-color: var(--canon-surface-1);
|
|
border-radius: var(--canon-border-radius-xs);
|
|
width: 100%;
|
|
padding-bottom: var(--canon-spacing-5xs);
|
|
padding-top: var(--canon-spacing-5xs);
|
|
font-size: var(--canon-font-size-body);
|
|
position: relative;
|
|
overflow: auto;
|
|
|
|
& table {
|
|
caption-side: bottom;
|
|
width: 100%;
|
|
font-size: var(--canon-font-size-sm);
|
|
border-collapse: collapse;
|
|
}
|
|
}
|
|
|
|
.table-head {
|
|
text-align: left;
|
|
padding: var(--canon-spacing-xs);
|
|
}
|
|
|
|
.table-body {
|
|
& tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.table-row {
|
|
transition: color .2s ease-in-out;
|
|
|
|
&:hover td {
|
|
background-color: var(--canon-surface-3);
|
|
}
|
|
|
|
& .table-cell:first-child {
|
|
border-top-left-radius: var(--canon-border-radius-xs);
|
|
border-bottom-left-radius: var(--canon-border-radius-xs);
|
|
box-shadow: inset 4px 2px 0 0 var(--canon-surface-1), inset 4px -2px 0 0 var(--canon-surface-1);
|
|
padding-left: var(--canon-spacing-xs);
|
|
}
|
|
|
|
& .table-cell:last-child {
|
|
border-top-right-radius: var(--canon-border-radius-xs);
|
|
border-bottom-right-radius: var(--canon-border-radius-xs);
|
|
box-shadow: inset -4px 2px 0 0 var(--canon-surface-1), inset -4px -2px 0 0 var(--canon-surface-1);
|
|
padding-right: var(--canon-spacing-xs);
|
|
}
|
|
}
|
|
|
|
.table-cell {
|
|
padding: var(--canon-spacing-xs);
|
|
background-color: var(--canon-surface-2);
|
|
box-shadow: inset 0px 2px 0 0 var(--canon-surface-1), inset 0px -2px 0 0 var(--canon-surface-1);
|
|
}
|
|
|
|
.text {
|
|
font-family: var(--canon-font-regular);
|
|
color: var(--canon-text-primary);
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
&.text-body {
|
|
font-size: var(--canon-font-size-body);
|
|
line-height: 140%;
|
|
}
|
|
|
|
&.text-subtitle {
|
|
font-size: var(--canon-font-size-subtitle);
|
|
line-height: 140%;
|
|
}
|
|
|
|
&.text-caption {
|
|
font-size: var(--canon-font-size-caption);
|
|
line-height: 140%;
|
|
}
|
|
|
|
&.text-label {
|
|
font-size: var(--canon-font-size-label);
|
|
line-height: 140%;
|
|
}
|
|
|
|
&.text-regular {
|
|
font-weight: var(--canon-font-weight-regular);
|
|
}
|
|
|
|
&.text-bold {
|
|
font-weight: var(--canon-font-weight-bold);
|
|
}
|
|
}
|
|
|
|
.text {
|
|
font-family: var(--canon-font-regular);
|
|
color: var(--canon-text-primary);
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
&.text-display {
|
|
font-size: var(--canon-font-size-display);
|
|
line-height: 100%;
|
|
font-weight: var(--canon-font-weight-bold);
|
|
}
|
|
|
|
&.text-title1 {
|
|
font-size: var(--canon-font-size-title1);
|
|
line-height: 100%;
|
|
font-weight: var(--canon-font-weight-bold);
|
|
}
|
|
|
|
&.text-title2 {
|
|
font-size: var(--canon-font-size-title2);
|
|
line-height: 100%;
|
|
font-weight: var(--canon-font-weight-bold);
|
|
}
|
|
|
|
&.text-title3 {
|
|
font-size: var(--canon-font-size-title3);
|
|
line-height: 100%;
|
|
font-weight: var(--canon-font-weight-bold);
|
|
}
|
|
|
|
&.text-title4 {
|
|
font-size: var(--canon-font-size-title4);
|
|
line-height: 100%;
|
|
font-weight: var(--canon-font-weight-bold);
|
|
}
|
|
|
|
&.text-title5 {
|
|
font-size: var(--canon-font-size-title5);
|
|
line-height: 100%;
|
|
font-weight: var(--canon-font-weight-bold);
|
|
}
|
|
}
|
|
|
|
.canon-Input {
|
|
border-radius: var(--canon-border-radius-sm);
|
|
border: 1px solid var(--canon-border-base);
|
|
padding: var(--canon-spacing-sm);
|
|
background-color: var(--canon-surface-1);
|
|
font-size: var(--canon-font-size-body);
|
|
font-weight: var(--canon-font-weight-regular);
|
|
color: var(--canon-text-primary);
|
|
width: 100%;
|
|
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
|
|
}
|
|
|
|
.canon-Input::placeholder {
|
|
color: var(--canon-text-secondary);
|
|
}
|
|
|
|
.canon-Input:hover {
|
|
border-color: var(--canon-border-hover);
|
|
}
|
|
|
|
.canon-Input:focus-visible {
|
|
outline-color: var(--canon-border-selected);
|
|
border-color: var(--canon-border-selected);
|
|
outline-width: 0;
|
|
}
|
|
|
|
.canon-Input[data-invalid] {
|
|
border-color: var(--canon-error);
|
|
}
|
|
|
|
.canon-Input--size-sm {
|
|
height: 2rem;
|
|
}
|
|
|
|
.canon-Input--size-md {
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.canon-FieldRoot {
|
|
font-family: var(--canon-font-regular);
|
|
flex-direction: column;
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.canon-FieldLabel {
|
|
font-size: var(--canon-font-size-caption);
|
|
font-weight: var(--canon-font-weight-regular);
|
|
color: var(--canon-text-primary);
|
|
margin-bottom: var(--canon-spacing-3xs);
|
|
}
|
|
|
|
.canon-FieldDescription {
|
|
font-size: var(--canon-font-size-caption);
|
|
font-weight: var(--canon-font-weight-regular);
|
|
color: var(--canon-text-secondary);
|
|
padding-top: var(--canon-spacing-3xs);
|
|
margin: 0;
|
|
}
|
|
|
|
.canon-FieldError {
|
|
font-size: var(--canon-font-size-caption);
|
|
font-weight: var(--canon-font-weight-regular);
|
|
color: var(--canon-error);
|
|
padding-top: var(--canon-spacing-3xs);
|
|
margin: 0;
|
|
}
|