Responsive menu icons sizes

core/layout/common.css

@@ -11,6 +11,7 @@
  * @link http://zwiicms.fr/
  */
 
+
 /**
 * Police des icônes
 @import url(https://use.fontawesome.com/releases/v5.7.2/css/all.css);
@@ -21,14 +22,12 @@
  * Éléments génériques
  */
 
-
 html,
 body {
     min-height: 100%;
     /*min-height: 100vh;*/
 }
 
-
 @media screen and (min-width: 769px) {
     body {
         /*margin:0px 10px;*/
@@ -37,15 +36,15 @@ body {
 }
 
 
-
 /**
 * Petits écrans inférieurs à 768px de largeur, on supprime les marges
 */
+
 @media screen and (max-width: 768px) {
     body {
         margin: 0px;
     }
-/*
+    /*
 	#site {
 		margin: 0px auto;
 	}
@@ -53,44 +52,38 @@ body {
     body>header {
         margin: 0px 0px;
     }
-
     .tippy-tooltip {
         font-size: .8rem !important;
     }
-
     section {
         padding: 5px;
     }
 }
 
-
-
 @media screen and (max-width: 768px) {
     .siteContainer {
         display: flex;
         flex-direction: column;
     }
-
     .siteContainer>#contentLeft {
         order: 1;
     }
-
     .siteContainer>#contentRight {
         order: 3;
     }
-
     .siteContainer>#contentSite {
         order: 2;
     }
 }
 
 
-
 /**
  * Éléments spécifiques
  */
 
+
 /* Liens */
+
 a {
     text-decoration: none;
 }
@@ -99,7 +92,9 @@ a:hover {
     text-decoration: underline;
 }
 
+
 /* Supprimer les pointillés lors d'un clic Firefox */
+
 a:focus {
     outline: none;
 }
@@ -108,7 +103,9 @@ a:active {
     outline: none;
 }
 
+
 /* Titres */
+
 h1 {
     font-size: 1.8em;
 }
@@ -125,7 +122,9 @@ h4 {
     font-size: 1.0em;
 }
 
+
 /* Listes */
+
 ul {
     list-style: square;
 }
@@ -138,18 +137,23 @@ option.pageInactive {
     color: orange;
     font-weight: bold;
 }
+
 option.pageHidden {
     color: red;
     font-style: italic;
 }
 
+
 /* Séparateur */
+
 hr {
     border: 0;
     border-top: 1px solid #C5D1D4;
 }
 
+
 /* Égalisation des margins */
+
 h1,
 h2,
 h3,
@@ -161,7 +165,9 @@ ol {
     margin: 15px 0;
 }
 
+
 /* Image */
+
 img {
     max-width: 100%;
     height: auto;
@@ -179,6 +185,7 @@ img[align='right'] {
     height: 150px;
 }
 
+
 /*
 Signature dans les articles blog et news
 */
@@ -191,6 +198,7 @@ Signature dans les articles blog et news
 
 
 /* Tableau */
+
 :not([class^="col"])>.tableWrapper {
     margin: 10px 0;
 }
@@ -225,7 +233,9 @@ Signature dans les articles blog et news
     padding: 15px 10px;
 }
 
+
 /* Supprime le padding des cols dans les cellules des tableaux */
+
 td>.col1,
 td>.col2,
 td>.col3,
@@ -241,19 +251,24 @@ td>.col12 {
     padding: 0 !important;
 }
 
+
 /* Tableau sur les écrans de petites tailles */
+
 @media screen and (max-width: 768px) {
     .table thead {
         font-size: 0.8em;
     }
 }
+
 @media screen and (max-width: 668px) {
     .table thead {
-		display:none;
+        display: none;
     }
 }
 
+
 /* Notifications */
+
 #notification {
     padding: 14px;
     color: #FFF;
@@ -316,36 +331,37 @@ td>.col12 {
     0% {
         transform: translateX(-50%) translateY(-30px);
     }
-
     40% {
         transform: translateX(-50%) translateY(10px);
     }
-
     60% {
         transform: translateX(-50%) translateY(-10px);
     }
-
     80% {
         transform: translateX(-50%) translateY(5px);
     }
-
     100% {
         transform: translateX(-50%) translateY(-5px);
     }
 }
 
+
 /* Notice */
+
 .notice {
     display: inline-block;
     color: #E74C3C;
 }
 
+
 /* Mauvaise position dans les champs File
 .inputFile.notice {
 	display: block;
 }*/
 
+
 /* Container */
+
 .container {
     margin: auto;
 }
@@ -360,7 +376,9 @@ td>.col12 {
     z-index: 15;
 }
 
+
 /* Barre de membre */
+
 #bar {
     background: #212223;
     padding-left: 5px;
@@ -375,7 +393,9 @@ td>.col12 {
     z-index: 19;
 }
 
+
 /* fin barre pour les membres */
+
 #bar:after {
     content: " ";
     clear: both;
@@ -414,9 +434,9 @@ td>.col12 {
     width: 150px;
     border: 0;
     color: #111112;
-	font-size: 12px;
+    font-size: 1em;
     background-color: rgba(255, 255, 255, 1);
-	padding : 8px;
+    padding: 8px;
     margin-left: 5px;
 }
 
@@ -424,7 +444,6 @@ td>.col12 {
     #bar #barLeft {
         float: left;
     }
-
     #bar #barRight {
         float: right;
         font-size: 12px;
@@ -437,27 +456,21 @@ td>.col12 {
         padding: 0 1;
         margin: 0 1;
     }
-
     #bar ul {
         height: auto;
     }
-
     #bar select {
-		font-size: 1.3em;
+        font-size: 1.2em;
-		width: 100%;
+        width: 95%;
         margin: 10px;
     }
-
-
     #bar #barLeft {
-		font-size: 1.2em;
+        font-size: 2em;
         float: none;
     }
-
     #bar #barRight {
-		font-size: 1.4em;
+        font-size: 1.6em;
     }
-
     #bar #displayUsername {
         display: none;
     }
@@ -465,9 +478,12 @@ td>.col12 {
 
 
 /* Site */
+
 #site {
     overflow: hidden;
 }
+
+
 /* Dans theme.css
 @media screen and (min-width:768px) {
 	#site {
@@ -476,6 +492,7 @@ td>.col12 {
 }#barSelectPage
 */
 
+
 /* Bannière */
 
 @media screen and (min-width:768px) {
@@ -483,7 +500,6 @@ td>.col12 {
         margin: 0;
         /*-10px;*/
     }
-
     header {
         margin: 0;
     }
@@ -506,6 +522,7 @@ header .container {
     height: 100%;
 }
 
+
 /* Marges au contenu de la bannière personnalisée
 header:not(.container) #featureContent {
 	margin: 0 10px;
@@ -517,7 +534,6 @@ header #featureContent {
 }
 
 
-
 /* Element du header
 
 #themeHeaderImage {
@@ -525,13 +541,16 @@ header #featureContent {
 	font-size: 0.9em;
 }*/
 
+
 /* Menu
 body > nav {
 	margin: 0 -10px;
 }
 */
 
+
 /* Items du menu */
+
 nav a>img {
     margin: -4px 0;
     vertical-align: middle;
@@ -585,6 +604,7 @@ nav li ul li {
     text-align: left;
 }
 
+
 /*
 nav .navSub a{
 	background-color:red !important;
@@ -612,11 +632,13 @@ nav a:hover {
 }
 
 #menuRight {
-	display: inline-flex ;
+    display: inline-flex;
     float: right;
 }
 
+
 /* fin barre de menu */
+
 nav::after {
     content: " ";
     clear: both;
@@ -639,31 +661,25 @@ nav::before {
     body>nav {
         margin: 0;
     }
-
     nav #toggle,
     nav #menuLeft {
         display: block;
         float: none;
     }
-
     nav #menuLeft {
         flex-direction: column;
         float: none;
     }
-
     nav #menuRight {
         font-size: 2em;
     }
-
     nav #menu {
         display: none;
         text-align: left;
     }
-
     nav li {
         display: block;
     }
-
     nav li ul {
         z-index: 1;
         opacity: 1;
@@ -671,12 +687,10 @@ nav::before {
         min-width: inherit;
         width: auto;
     }
-
     /* Taille du menu hamburger */
     nav .zwiico-menu {
         font-size: 1.5em;
     }
-
     nav .zwiico-cancel {
         font-size: 1.5em;
     }
@@ -684,6 +698,7 @@ nav::before {
 
 
 /* Barre de navigation fixe quand le menu est en-dehors du site */
+
 #navfixedlogout {
     position: -webkit-sticky;
     /* Safari */
@@ -720,6 +735,7 @@ li .menuSideChild {
     padding-left: 10px;
 }
 
+
 /* Drapeaux */
 
 .i18nFlag {
@@ -735,25 +751,20 @@ li .menuSideChild {
 * Position du bloc dans le site sur les petits écrans
 */
 
-
+@media screen and (max-width:1024px) {
-@media screen and (max-width:1024px){
-
-
     .i18nFlag {
         width: 100%;
         padding: 5px;
     }
-
     .i18nFlagSelected {
         width: 130%;
         padding: 5px;
     }
-
+}
-  }
-
 
 
 /* Corps */
+
 @media screen and (min-width:768px) {
     section {
         padding: 20px;
@@ -780,19 +791,24 @@ section:after {
     clear: both;
 }
 
+
 /* Version des modules*/
+
 .moduleVersion {
     font-size: 0.8em;
     font-style: italic;
     text-align: right;
 }
 
+
 /* Pied de page */
+
 body>footer {
     margin: 0;
     /* -10px;*/
 }
 
+
 /*
 footer {
 	padding: 1px 20px;
@@ -852,16 +868,16 @@ footer #footerbody>div {
     font-size: inherit;
 }
 
+
 /* Conserve le pied de page sur une ligne */
+
 @media screen and (max-width: 768px) {
     body>footer {
         margin: 0;
     }
-
     footer .col4 {
         width: 100%;
     }
-
     #footerCopyright,
     #footerText,
     #footerSocials {
@@ -935,7 +951,9 @@ footer #footerSocials .zwiico-github:hover {
     background: #000;
 }
 
+
 /* Bulle de dialogue */
+
 .speech {
     margin: 16px;
     text-align: center;
@@ -967,7 +985,9 @@ footer #footerSocials .zwiico-github:hover {
     border: 20px solid;
 }
 
+
 /* Remonter en haut */
+
 #backToTop {
     position: fixed;
     z-index: 50;
@@ -992,7 +1012,9 @@ footer #footerSocials .zwiico-github:hover {
     background: rgba(33, 34, 35, 1);
 }
 
+
 /* Message sur les cookies */
+
 #cookieConsent {
     width: 40%;
     margin: auto;
@@ -1034,7 +1056,9 @@ footer #footerSocials .zwiico-github:hover {
     cursor: pointer;
 }
 
+
 /* Bloc */
+
 .block {
     /*	border: 1px solid #D8DFE3;*/
     padding: 20px 20px 10px;
@@ -1062,7 +1086,9 @@ footer #footerSocials .zwiico-github:hover {
     float: right;
 }
 
+
 /* Aides */
+
 .helpButton {
     cursor: help;
     margin: 0 5px;
@@ -1074,12 +1100,12 @@ footer #footerSocials .zwiico-github:hover {
 
 
 /* Lightbox */
+
 .lightbox {
     background: #FFF;
     width: 100vw;
     max-width: 500px;
     padding: 20px;
-
 }
 
 .lightbox>span {
@@ -1097,11 +1123,14 @@ footer #footerSocials .zwiico-github:hover {
     margin: 0 10px;
 }
 
+
 /**
  * Inputs
  */
 
+
 /* Inputs génériques */
+
 input[type='email'],
 input[type='text'],
 input[type='password'],
@@ -1184,20 +1213,26 @@ label {
 }
 
 .captcha label {
-	display:inline-block;
+    display: inline-block;
 }
 
+
 /* Simule le padding des cols pour les inputs en dehors des cols */
+
 :not([class^="col"])>.inputWrapper {
     padding: 10px 0;
 }
 
+
 /* Supprime le padding d'une row dans un col */
+
 [class^="col"]>.row {
     margin: -10px;
 }
 
+
 /* Bouton */
+
 .button {
     width: 100%;
     display: inline-block;
@@ -1212,7 +1247,9 @@ label {
     transition: background .3s ease-out;
 }
 
+
 /* Bouton redimensionnable pour le formulaire*/
+
 #formSubmit {
     width: max-content;
     float: right;
@@ -1229,14 +1266,18 @@ label {
     color: #94A5B0 !important;
 }
 
+
 /* Upload de fichiers */
-.inputFile, .datepicker {
+
+.inputFile,
+.datepicker {
     margin: 0;
     display: inline-block;
     width: 88% !important;
 }
 
-.inputFileDelete, .inputDateDelete {
+.inputFileDelete,
+.inputDateDelete {
     display: block;
     width: 10%;
     padding: 10px 0;
@@ -1250,18 +1291,24 @@ label {
     text-decoration: none;
 }
 
+
 /* Empêche le débordement et les sauts de ligne */
-.inputFileManagerWrapper, .inputDateManagerWrapper {
+
+.inputFileManagerWrapper,
+.inputDateManagerWrapper {
     display: inline;
 }
 
-.inputFileManagerWrapper>.inputFile, .inputDateManagerWrapper>.inputFile {
+.inputFileManagerWrapper>.inputFile,
+.inputDateManagerWrapper>.inputFile {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+
 /* Pagination */
+
 .pagination {
     padding: 10px 0;
 }
@@ -1292,7 +1339,9 @@ label {
     margin-right: 0;
 }
 
+
 /* Cases à cocher (pas de display none sinon le hover ne fonctionne pas sous Chrome) */
+
 input[type='checkbox'] {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -1342,7 +1391,9 @@ input[type='checkbox']:disabled+label:before {
     background: #F6F7F8 !important;
 }
 
+
 /* Sélecteur de date */
+
 .datepicker {
     cursor: text;
 }
@@ -1371,7 +1422,9 @@ input[type='checkbox']:disabled+label:before {
     /* Hack whitespace */
 }
 
+
 /* Supprime les margins du premier et du dernier élément d'un col, utile pour les cols générés depuis l'éditeur de texte. (Ne s'applique pas aux rows pour ne pas supprimer les margins négatifs) */
+
 .row>div> :first-child:not(.row) {
     margin-top: 0;
 }
@@ -1403,96 +1456,75 @@ input[type='checkbox']:disabled+label:before {
     .col1 {
         width: 8.33333333%;
     }
-
     .col2 {
         width: 16.66666667%;
     }
-
     .col3 {
         width: 25%;
     }
-
     .col4 {
         width: 33.33333333%;
     }
-
     .col5 {
         width: 41.66666667%;
     }
-
     .col6 {
         width: 50%;
     }
-
     .col7 {
         width: 58.33333333%;
     }
-
     .col8 {
         width: 66.66666667%;
     }
-
     .col9 {
         width: 75%;
     }
-
     .col10 {
         width: 83.33333333%;
     }
-
     .col11 {
         width: 91.66666667%;
     }
-
     .col12 {
         width: 100%;
     }
-
     .offset1 {
         margin-left: 8.33333333%;
     }
-
     .offset2 {
         margin-left: 16.66666667%;
     }
-
     .offset3 {
         margin-left: 25%;
     }
-
     .offset4 {
         margin-left: 33.33333333%;
     }
-
     .offset5 {
         margin-left: 41.66666667%;
     }
-
     .offset6 {
         margin-left: 50%;
     }
-
     .offset7 {
         margin-left: 58.33333333%;
     }
-
     .offset8 {
         margin-left: 66.66666667%;
     }
-
     .offset9 {
         margin-left: 75%;
     }
-
     .offset10 {
         margin-left: 83.33333333%;
     }
-
     .offset11 {
         margin-left: 91.66666667%;
     }
 }
 
+
 /**
  * Grille pour tableau
  */
@@ -1587,9 +1619,11 @@ th.col12 {
     width: 100%;
 }
 
+
 /* Tableau sur les écrans de très petites tailles */
-@media screen and (max-width: 480px){
+
-    .table tr{
+@media screen and (max-width: 480px) {
+    .table tr {
         display: block;
         margin-bottom: 10px;
     }
@@ -1600,6 +1634,7 @@ th.col12 {
     }
 }
 
+
 /**
  * Classes rapides
  */
@@ -1641,7 +1676,6 @@ th.col12 {
 }
 
 
-
 /*
 * Effet accordéon
 */
@@ -1668,10 +1702,12 @@ th.col12 {
     padding: 7px;
 }
 
+
 /* Captcha
 */
 
-.captchaNum, .captchaAlpha {
+.captchaNum,
+.captchaAlpha {
     vertical-align: middle;
     padding-left: 10px;
     padding-right: 10px;
@@ -1691,9 +1727,11 @@ th.col12 {
     margin: auto auto auto 2em;
 }
 
+
 /*
 * Couleur des icônes + et -
 */
+
 .zwiico-minus-circled,
 .zwiico-plus-circled {
     color: #D8890B;
@@ -1707,17 +1745,22 @@ th.col12 {
 
 .zwiico-minus-circled:hover,
 .zwiico-plus-circled:hover {
-	-webkit-transform:scale(1.25); /* Safari et Chrome */
+    -webkit-transform: scale(1.25);
-	-moz-transform:scale(1.25); /* Firefox */
+    /* Safari et Chrome */
-	-ms-transform:scale(1.25); /* Internet Explorer 9 */
+    -moz-transform: scale(1.25);
-	-o-transform:scale(1.25); /* Opera */
+    /* Firefox */
-	transform:scale(1.25);
+    -ms-transform: scale(1.25);
-	}
+    /* Internet Explorer 9 */
+    -o-transform: scale(1.25);
+    /* Opera */
+    transform: scale(1.25);
+}
 
 
 /* Bannière masquable en petit écran*/
+
 @media screen and (max-width: 768px) {
-	.bannerDisplay{
+    .bannerDisplay {
-		display : none;
+        display: none;
     }
 }