Migrate site controls to Nebula design system
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
This commit is contained in:
parent
e3d0925eb1
commit
817e21567b
127 changed files with 5380 additions and 2363 deletions
|
|
@ -1,24 +1,13 @@
|
|||
// Rôle : stylise le mini-calendrier de sélection de dates mensuelles.
|
||||
@use "../../design-system/controls";
|
||||
|
||||
.calendar-month-date-dropdown {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger {
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) 14px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: rgba(15, 23, 42, 0.64);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: left;
|
||||
@include controls.select-trigger(sm);
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger span {
|
||||
|
|
@ -28,29 +17,33 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger:hover,
|
||||
.calendar-month-date-trigger:hover:not(:disabled),
|
||||
.calendar-month-date-dropdown:focus-within .calendar-month-date-trigger {
|
||||
border-color: rgba(196, 181, 253, 0.22);
|
||||
background-color: rgba(21, 26, 48, 0.58);
|
||||
@include controls.select-trigger-hover(sm);
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger:focus {
|
||||
@include controls.field-focus;
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger:focus-visible {
|
||||
@include controls.field-focus;
|
||||
outline: 2px solid var(--color-accent-gold);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger .ui-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
color: var(--color-text-secondary);
|
||||
@include controls.select-trigger-icon(sm);
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger .ui-icon-chevron-down {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
justify-self: end;
|
||||
color: var(--color-text-muted);
|
||||
@include controls.date-picker-trigger-chevron;
|
||||
}
|
||||
|
||||
.calendar-time-field input {
|
||||
@include controls.time-control(xs);
|
||||
padding-inline: 10px 4px;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker {
|
||||
|
|
@ -96,18 +89,7 @@
|
|||
}
|
||||
|
||||
.calendar-month-date-picker button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
min-height: 22px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(16, 20, 38, 0.58);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
@include controls.date-picker-button;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker-header {
|
||||
|
|
@ -131,9 +113,7 @@
|
|||
}
|
||||
|
||||
.calendar-month-date-picker-header button {
|
||||
min-height: 24px;
|
||||
padding-inline: 6px;
|
||||
font-size: 10px;
|
||||
@include controls.date-picker-button(header);
|
||||
}
|
||||
|
||||
.calendar-month-date-picker-day {
|
||||
|
|
@ -159,12 +139,7 @@
|
|||
}
|
||||
|
||||
.calendar-month-date-picker.is-weekday-mode button {
|
||||
min-height: 26px;
|
||||
padding-inline: 3px;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@include controls.date-picker-button(weekday);
|
||||
}
|
||||
|
||||
.calendar-month-date-picker button.is-outside,
|
||||
|
|
@ -175,7 +150,5 @@
|
|||
|
||||
.calendar-month-date-picker button:hover:not(:disabled),
|
||||
.calendar-month-date-picker button.active {
|
||||
border-color: rgba(246, 196, 83, 0.58);
|
||||
background: rgba(139, 92, 246, 0.3);
|
||||
color: var(--color-text-primary);
|
||||
@include controls.date-picker-button-hover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
// Rôle : gère les alertes, couleurs et répétitions du formulaire calendrier.
|
||||
@use "../../design-system/controls";
|
||||
|
||||
.calendar-alert-offsets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
|
|
@ -81,52 +83,36 @@
|
|||
}
|
||||
|
||||
.calendar-month-repeat-switch button {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 28px;
|
||||
@include controls.radio-button-group-option(sm);
|
||||
}
|
||||
|
||||
.calendar-month-repeat-switch .ui-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@include controls.radio-button-group-option-icon(sm);
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch {
|
||||
display: grid;
|
||||
@include controls.radio-button-group(sm);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 3px;
|
||||
min-height: 36px;
|
||||
padding: 3px;
|
||||
border: 1px solid rgba(150, 165, 205, 0.14);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(11, 14, 27, 0.72);
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch button {
|
||||
display: grid;
|
||||
@include controls.radio-button-group-option(sm);
|
||||
@include controls.radio-button-group-option-compact-overflow;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--radius-pill);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch .ui-icon {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
@include controls.radio-button-group-option-icon(sm);
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch button:hover:not(:disabled) {
|
||||
@include controls.radio-button-group-option-hover;
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch button.active {
|
||||
background: rgba(139, 92, 246, 0.72);
|
||||
color: var(--color-text-primary);
|
||||
@include controls.radio-button-group-option-active;
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch button:disabled {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
// Rôle : stylise les actions, suppressions et erreurs du formulaire calendrier.
|
||||
@use "../../design-system/controls";
|
||||
|
||||
.calendar-form-delete-button {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
@include controls.icon-button(sm);
|
||||
}
|
||||
|
||||
.calendar-form-delete-button .ui-icon {
|
||||
@include controls.icon-button-icon(sm);
|
||||
}
|
||||
|
||||
.calendar-delete-actions {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// Rôle : gère la structure, les lignes et les champs de base du formulaire calendrier.
|
||||
@use "../../design-system/controls";
|
||||
.calendar-event-form {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
|
|
@ -63,8 +64,18 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.calendar-event-form input:not([type="checkbox"]),
|
||||
.calendar-event-form input[type="text"],
|
||||
.calendar-event-form input[type="time"],
|
||||
.calendar-event-form select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calendar-event-form select {
|
||||
@include controls.select-control(sm);
|
||||
}
|
||||
|
||||
.calendar-event-form select:hover,
|
||||
.calendar-event-form select:focus {
|
||||
@include controls.select-control-hover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// Rôle : stylise la grille mensuelle et ses barres multi-jours.
|
||||
// Rôle : stylise la grille mensuelle et le placement de ses barres multi-jours.
|
||||
|
||||
.calendar-month-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
|
@ -99,10 +100,6 @@
|
|||
min-height: var(--calendar-month-bar-height, 28px);
|
||||
margin: calc(28px + (var(--calendar-event-lane, 0) * (var(--calendar-month-bar-height, 28px) + var(--calendar-month-bar-gap, 4px)))) 4px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(139, 92, 246, 0.82);
|
||||
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
|
@ -112,48 +109,7 @@
|
|||
}
|
||||
|
||||
.calendar-month-bar-button {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: var(--calendar-month-bar-height, 28px);
|
||||
padding: 0 9px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.calendar-month-bar strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-gold .calendar-month-bar-button {
|
||||
color: #0b0e1b;
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-gold {
|
||||
border-color: rgba(11, 14, 27, 0.28);
|
||||
background: rgba(230, 176, 55, 0.92);
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-cyan {
|
||||
background: rgba(34, 211, 238, 0.78);
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-pink {
|
||||
background: rgba(217, 70, 239, 0.78);
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-green {
|
||||
background: rgba(34, 197, 94, 0.78);
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-gray {
|
||||
background: rgba(125, 135, 159, 0.84);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// Rôle : stylise la grille hebdomadaire et ses événements.
|
||||
// Rôle : stylise la grille hebdomadaire et le placement de ses événements.
|
||||
|
||||
.calendar-week-options {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -250,11 +251,6 @@
|
|||
z-index: 2;
|
||||
display: block;
|
||||
min-height: 24px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(139, 92, 246, 0.78);
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
|
@ -264,55 +260,13 @@
|
|||
}
|
||||
|
||||
.calendar-event-button {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
padding: 5px 7px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: white;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.calendar-event-button:hover,
|
||||
.calendar-event-button:focus-visible,
|
||||
.calendar-month-bar-button:hover,
|
||||
.calendar-month-bar-button:focus-visible {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.calendar-event-button > strong,
|
||||
.calendar-event-button > span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-event-button > strong {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.calendar-event-button > span {
|
||||
font-size: 9px;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.calendar-event.is-compact {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.calendar-event.is-compact .calendar-event-button {
|
||||
place-items: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.calendar-event-tooltip {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
|
|
@ -326,34 +280,3 @@
|
|||
.calendar-event-tooltip strong {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.calendar-event-gold {
|
||||
border-color: rgba(11, 14, 27, 0.28);
|
||||
background: rgba(230, 176, 55, 0.9);
|
||||
color: #0b0e1b;
|
||||
}
|
||||
|
||||
.calendar-event-gold .calendar-event-button {
|
||||
color: #0b0e1b;
|
||||
}
|
||||
|
||||
.calendar-event-gold .calendar-event-button > span {
|
||||
color: rgba(11, 14, 27, 0.76);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.calendar-event-cyan {
|
||||
background: rgba(34, 211, 238, 0.72);
|
||||
}
|
||||
|
||||
.calendar-event-pink {
|
||||
background: rgba(217, 70, 239, 0.72);
|
||||
}
|
||||
|
||||
.calendar-event-green {
|
||||
background: rgba(34, 197, 94, 0.72);
|
||||
}
|
||||
|
||||
.calendar-event-gray {
|
||||
background: rgba(125, 135, 159, 0.78);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue