Règles de déclaration des variables
- Utilisez pas le namespace du core pour nommer une variable. Pour des composants au niveau des outil, ajoutez le namespace correspondant à l'outil.
- Les variables de contexte du composant sont déclaré avec le préfixe de contexte suivi de deux traits d'union.
- Propriétés toujours en fin de déclaration
- Les déclarations de variables suivent une imbrication en cascade. Seuls le nom du composant et la propriété CSS sont requis.
Exemple :
// CORE component variable name [CONTEXT]--[COMPONENT]-[EXTENTION]-[PSEUDO CLASS]-[PROPERTY] @reverse--componente-name-extention-property // TOOL component variable name [CONTEXT]--[TOOLNAMESPACE]-[COMPONENT]-[EXTENTION]-[PSEUDO CLASS]-[PROPERTY] @reverse--adb-memberdataupdate-componente-name-extention-property
Règles de déclaration du composant
- Le nom du composant doit être unique. Assurez vous de faire un recherche sur les fichiers LESS de la solution avant de le nommer.
- Utilisez de la classe à la place du id pour la identité du composant.
- Fournissez toujours des renseignement sur les composants, surtout de particularités nécessaires à la compréhension, qui ne sont pas claire sur le code.
- Les déclarations doivent être toujours dans le namespace #adb-webtools-container.
- Déclarez pas le margin au composant pour ajouter une distance distance vers son parent ou ses fréres doit être, ça doit être déclaré au contexte.
Syntaxe du code du composant
//*****************************************************/
// Component name
//*****************************************************/
/*
Component description
...
*/
@my-component-color: 1px solid @color-g6;
@my-component-border: 1px solid @color-g6;
@my-component-active-color: @color-acive;
@reverse--my-component-color: @color-g7;
#adb-webtools-container {
// Component
.my-component {
color: @my-component-color;
border: @my-component-border;
// Component elements
.my-component-title {
...
}
// Component extension/states
&.my-component-active {
color: @my-component-active-color;
}
&.my-component-medium {
...
}
}
// Contexts
.reverse{
.my-component {
color: @reverse--my-component-color;
}
}
// Print mode
&.adb-webtools-print {
.my-component {
color: @color-black;
}
}
// Browser support
&.adb-webtools-browser-internet-explorer {
.my-component {
// Fix
}
}
}
LESS client
Variables
Changer les variables toujours au début du fichier less.
@color-primary: #DDD;Pour de variables spécifiques à l'outil utilisez le namespace de l’outil comme préfix.
Ces variables doivent être déclarées dans le fichier Less core de l’outil avec un valeur par default.
@memberdataupdate-section-boder-color : @color-primary;Utilisez toujours de variable du core pour des propretés standardisées.
color: @color-primary; font-size: @font-size-sm-a; @media @media-sm-max-width{ padding: @layoutHorizontalSpacing; }Namespaces, class, id, print
Les déclarations des classes et des ids doivent être toujours dans le namespace #adb-webtools-container.@color-primary: #DDD; #adb-webtools-container { // CORE prefix adb-webtools // Overridez JAMAIS une class or id du core. Discutez avec le responsable au besoin. .adb-webtools-header{ color: red; }// NAMESPACE// Utilisez le namespace de outil pour déclarer des classes et id spécifiques à l'outil. // Jamais utiliser le namespace du core adb-webtools pour ça. // Utilisez des classe pour de composant au section générique. .adb-memberdataupdate-my-component { color: @color-primary; font-size: @font-size-sm-a; @media @media-sm-max-width{ padding: @layoutHorizontalSpacing; } } // CONTEXTE // Utilisez des id de section pour donne un contexte au changement. #adb-memberdataupdate-section-x { .adb-memberdataupdate-my-component { color: @color-secondary; } } // PRINT MODE // Utilisez la classe adb-webtools-print liée #adb-webtools-container // pour déclarer le changement de style au mode print/pdf. &.adb-webtools-print{ .adb-memberdataupdate-my-component { margin: 0; } } }
