EN · DE · RU · FR · ES

#2672 : PhoneNumber.module.scss

projectforge-webapp/src/components/design/phoneNumber/PhoneNumber.module.scss Type : SCSS/CSS · Rôle : Composant · Source : projectforge-webapp/src/components/design/phoneNumber/PhoneNumber.module.scss 40 lignes · 33 code · 1 commentaire · 6 vides
Fichier de code source dans projectforge-webapp/src/components/design/phoneNumber/PhoneNumber.module.scss contenant du code SCSS/CSS pour la couche Composant.

Structure du code

Règles CSS (4) : .number, .smsIcon, .zoom, .icon

Variables SCSS (1) : $zoomedFontSize

Code source (abrégé)

$zoomedFontSize: 64px;

@keyframes numberZoom {
  from {
    font-size: 14px;
  }

  to {
    font-size: $zoomedFontSize;
  }
}


.number {
  .smsIcon {
    margin-left: .5em;
  }
}

// Sélecteur séparé pour la superposition du zoom (rendu via Portal dans document.body)
.zoom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 125px;
  font-size: $zoomedFontSize;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: saturate(180%) blur(3px);
  z-index: 99999;
  animation: numberZoom .3s;

  .icon {
    margin-right: .5em;
  }
}

Historique Git

9d4ad5f7d Claude Code : Migrer addressList vers AG-Grid-Table et préparer la sélection multiple
cf9c13b6b Augmenter le flou d'arrière-plan du numéro de téléphone
7430f50eb Ajouter l'icône du numéro de téléphone
742613873 Implémenter le zoom du numéro de téléphone