// CSS allant avec le module Angular ZacDateModule // Paramètre par défaut qui seront surchargé par la charte-css // si celle veut surcharger via des custom properties sur :root { // calcule permettant de rendre une largeur en REM pour l'accessibilité $--font-size-base: 16px; $calcul__date-jour-width: 50px / $--font-size-base * 1rem; $calcul__date-mois-width: 50px / $--font-size-base * 1rem; $calcul__date-anne-width: 80px / $--font-size-base * 1rem; // Taille de chacun des champs définit et calculer en rem grâce au opération SASS --dt-input_date-jour-width: #{$calcul__date-jour-width}; --dt-input_date-mois-width: #{$calcul__date-mois-width}; --dt-input_date-annee-width: #{$calcul__date-anne-width}; // lié au container parent --dt-input_date-container-padding-bottom: var(--dt-input_date-input-text_under-height); --dt-input_date-container-item-margin-right: var(--space-02, 16px); // concerne le text sous chacun des input --dt-input_date-input-text_under-font-size: var(--font-size-base, 16px); --dt-input_date-input-text_under-height: 1.6em; // concerne le "/" a droite de JJ et MM --dt-input_date-input-text_right-font-size: var(--font-size-base, 16px); --dt-input_date-input-text_right-height: var(--space-05, 40px); --dt-input_date-input-text_right-width: var(--space-02, 16px); // lié au input directement --dt-input_date-text-color-default: var(--txt-primary, hsl(0, 10.39%, 30.2%)); --dt-input_date-border-color-default: var(--txt-primary, hsl(0, 10.39%, 30.2%)); --dt-input_date-text-color-hover: var(--txt-primary, hsl(0, 10.39%, 30.2%)); --dt-input_date-border-color-hover: var(--color-secondary, hsl(204.48, 93.55%, 36.47%)); // lié au input quand il est en erreur directement --dt-input_date-text-color-error: var(--txt-primary, hsl(0, 10.39%, 30.2%)); --dt-input_date-border-color-error: var(--error, hsl(357.12, 94.55%, 43.14%)); --dt-input_date-text-color-error-hover: var(--error, hsl(357.12, 94.55%, 43.14%)); --dt-input_date-border-color-error-hover: var(--error, hsl(357.12, 94.55%, 43.14%)); } .date2 { display: block; padding: 0 0 var(--dt-input_date-container-padding-bottom) 0; input { display: inline-block; text-align: center; width: 100%; margin: 0; } div { margin-right: var(--dt-input_date-container-item-margin-right); position: relative; display: inline-block; width: auto; // text sous les input &:after { position: absolute; top: 100%; font-size: var(--dt-input_date-input-text_under-font-size); font-weight: normal; text-align: center; left: 0; height: var(--dt-input_date-input-text_under-height); } &:before { position: absolute; top: 0; left: 100%; font-size: var(--dt-input_date-input-text_right-font-size); font-weight: normal; line-height: var(--dt-input_date-input-text_right-height); width: var(--dt-input_date-input-text_right-width); text-align: center; } } .container-input { &-jj { width: var(--dt-input_date-jour-width); &:before { content: "/"; } &:after { content: "jour"; width: var(--dt-input_date-jour-width); } } &-mm { width: var(--dt-input_date-mois-width); &:before { content: "/"; } &:after { content: "mois"; width: var(--dt-input_date-mois-width); } } &-ssaa { width: var(--dt-input_date-annee-width); &:after { content: "année"; width: var(--dt-input_date-annee-width); } } } } // styles des inputs lorsque le composant est en erreur .date2 { &.ng-invalid.ng-touched.ng-dirty input { border-color: var(--dt-input_date-border-color-error); color: var(--dt-input_date-text-color-error) } &.ng-invalid.ng-touched.ng-dirty input:hover, &.ng-invalid.ng-touched.ng-dirty input:focus { border-color: var(--dt-input_date-border-color-error); color: var(--dt-input_date-text-color-error) } &.ng-invalid.ng-touched.ng-dirty div:after { color: var(--dt-input_date-border-color-error); } }