0001-add-option-to-display-circle-steps-23533.patch

Anonyme, 23 juillet 2018 17:28

Voir les différences: en ligne côte à côte

Subject: [PATCH] add option to display circle steps (#23533)

 help/fr/misc-scss.page           |  30 ++++
 static/includes/_form-steps.scss | 232 +++++++++++++++++++++++++++++++
 static/includes/_wcs.scss        |  69 ++++-----
 3 files changed, 292 insertions(+), 39 deletions(-)
 create mode 100644 static/includes/_form-steps.scss

       <td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
       <td><p><var>0</var></p></td>
      </tr>
      <tr>
       <td><p><code>$circle-steps</code></p></td>
       <td><p>Active la présentation en cercles des étapes</p></td>
       <td><p><var>false</var></p></td>
      </tr>
      <tr>
       <td><p><code>$circle-steps-with-lines</code></p></td>
       <td><p>Active les lignes entre les cercles</p></td>
       <td><p><var>true</var></p></td>
      </tr>
      <tr>
       <td><p><code>$circle-steps-diameter</code></p></td>
       <td><p>Diamètre des cercles</p></td>
       <td><p><var>56px</var></p></td>
      </tr>
      <tr>
       <td><p><code>$circle-steps-number-color</code></p></td>
       <td><p>Couleur des nombres à l'intérieur des cercles</p></td>
       <td><p><var>#868686</var></p></td>
      </tr>
      <tr>
       <td><p><code>$circle-steps-current-number-color</code></p></td>
       <td><p>Couleur des nombres de l'étape courante</p></td>
       <td><p><var>white</var></p></td>
      </tr>
      <tr>
       <td><p><code>$circle-steps-current-marker-background</code></p></td>
       <td><p>Couleur de fond du cercle de l'étape courante</p></td>
       <td><p><var>$primary-color</var></p></td>
      </tr>
     </table>
     </section>

     $circle-steps: false !default;
     $circle-steps-with-lines: true !default;
     $circle-steps-diameter: 56px !default;
     $circle-steps-number-color: #868686 !default;
     $circle-steps-current-number-color: white !default;
     $circle-steps-current-marker-background: $primary-color !default;
     // private variables
     $_circle-lines-thickness: 1px !default;
     $_steps-height: $circle-steps-diameter;
     $_steps-border: 1px;
     /* circle steps or squared steps */
     @if $circle-steps {
     	div#steps {
     		padding: 0 1em;
     		ol {
     			// reduce empty space on the left (user agent stylesheet)
     			padding-left: 0;
     			margin-left: -1em;
+    		}
     		li {
     			display: -ms-flexbox;
     			display: flex;
     			padding: 0;
     			margin: $_steps-height 0;
     			width: auto;
     			position: relative;
     			border: 0;
     			background: transparent;
     			justify-content: space-between;
     			-ms-justify-content: space-between;
     			align-items: center;
     			-ms-align-items: center;
     			flex-direction: row;
     			-ms-flex-direction: row;
     			> span {
     				flex-shrink: 0;
     				flex-basis: $circle-steps-diameter;
+    			}
     			span.marker {
     				display: inline-flex;
     				flex-grow: 0;
     				align-items: center;
     				-ms-align-items: center;
     				justify-content: center;
     				-ms-justify-content: center;
     				margin: 0 1em;
     				position: relative;
     				color: $circle-steps-number-color;
     				background: white;
     				border: $_steps-border solid  $circle-steps-number-color;
     				border-radius: 50%;
     				font-size: 100%;
     				font-weight: bold;
     				text-align: center;
     				vertical-align: middle;
     				width: $circle-steps-diameter;
     				height: $circle-steps-diameter;
     				// bug on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
     				max-width: 100%;
     				max-height: 100%;
     				box-sizing: border-box;
     				// hide the circle inside the marker
     				&::before {
     					display: none;
+    				}
+    			}
     			span.label {
     				margin: 0;
     				flex-grow: 1;
     				color: #868686;
     				text-align: left;
     				vertical-align: middle;
+    			}
     			&.current {
     				font-weight: bold;
     				span.label {
     					color: $title-color;
+    				}
     				span.marker {
     					color: $circle-steps-current-number-color;
     					border-color: $circle-steps-current-marker-background;
     					background: $circle-steps-current-marker-background;
+    				}
+    			}
     			@if $circle-steps-with-lines {
     				&.first {
     					span.marker::after {
     						display: none;
+    					}
+    				}
     				span.marker::after {
     					content: ' ';
     					z-index: -1; // line below the rest
     					position: absolute;
     					height: $_steps-height + $circle-steps-diameter / 2 + $_steps-border;
     					width: $_circle-lines-thickness;
     					bottom: $circle-steps-diameter - $_steps-border;
     					right: 50%;
     					background-color: $circle-steps-number-color;
     					padding: 0;
+    				}
+    			}
+    		}
+    	}
     	@media screen and (max-width: $mobile-limit) {
     		div#gauche div#steps {
     			order: 1;
     			-ms-order: 1;
     			padding: 1em 0;
     			ol {
     				display: flex;
     				display: -ms-flexbox;
     				flex-direction: row;
     				-ms-flex-direction: row;
     				justify-content: center;
     				-ms-justify-content: center;
     				flex-flow: nowrap;
     				-ms-flex-flow: nowrap;
     				align-items: center;
     				-ms-align-items: center;
     				// bug on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
     				max-width: 100%;
     				max-height: 100%;
     				box-sizing: border-box;
     				li {
     					padding: 0 1em;
     					height: auto;
     					&.first {
     						padding-left: 0;
+    					}
     					span.marker {
     						margin: 0;
     						padding: 0 9px;
     						border-radius: 50%;
     						width: $circle-steps-diameter;
     						height: $circle-steps-diameter;
     						@if $circle-steps-with-lines {
     							&::after {
     								content: ' ';
     								position: absolute;
     								padding: 0;
     								height: $_circle-lines-thickness;
     								width: $circle-steps-diameter + $_steps-border * 2;
     								left: -$circle-steps-diameter / 2 - $_steps-border;
     								bottom: 50%;
+    							}
+    						}
+    					}
     					// hide labels on little screens
     					span.label {
     						display: none;
+    					}
+    				}
+    			}
+    		}
+    	}
     } @else {
     	// squared steps
     	div#steps ol {
     		margin: 0;
     		padding: 0;
     		text-align: left;
     		list-style: none;
     		color: #868686;
     		& li {
     			border: 0;
     			border-bottom: 1px solid #CCC;
     			margin-bottom: 2ex;
     			border-radius: $border-radius;
     			padding: 1ex;
     			letter-spacing: 1px;
+    		}
     		& li.current {
     			border: 0;
     			background: $title-background;
     			color: $title-color;
     			& span.label {
     				font-weight: bold;
+    			}
+    		}
     		& li span.marker {
     			display: block;
     			font-size: 250%;
+    		}
+    	}
     	@if ($responsive-steps == horizontal) {
     		@media screen and (max-width: $mobile-limit) {
     			div#steps {
     				color: #AAA;
     				& ol {
     					& li {
     						& span.marker {
     							color: white;
     							background: #DDD;
     							border: 1px solid #DDD;
+    						}
+    					}
     					& li.current {
     						background: inherit;
     						color: inherit;
     						& span.marker {
     							background: $title-background;
     							color: $title-color;
+    						}
+    					}
+    				}
+    			}
+    		}
+    	}
+    }

     @import 'grid';
     @import 'form-steps';
     $responsive-steps: horizontal !default;
     $circle-steps: false !default;
     /* hide a bunch of elements */
     div#droite,
-...
     	clear: none;
+    }
     @if $circle-steps {
     	// in order to let more space to the labels
     	div#gauche {
     		min-width: 18.5%;
     		max-width: 25%;
     		width: auto;
+    	}
     	div#gauche + div#rub_service {
     		min-width: 73%;
     		float: left;
     		width: auto;
+    	}
     	@media screen and (max-width: $mobile-limit) {
     		div#gauche {
     			min-width: inherit;
     			max-width: inherit;
     			float: none;
     			width: 100%;
+    		}
     		div#gauche + div#rub_service {
     			min-width: inherit;
     			float: none;
     			width: 100%;
+    		}
+    	}
+    }
     /* style homepage blocks */
     div#services > ul {
     	@include vendor-prefix('column-count', '2');
-...
     	margin: 1em;
+    }
     /* steps */
     div#steps ol {
     	text-align: left;
     	margin: 0;
     	padding: 0;
     	list-style: none;
     	color: #868686;
     	& li {
     		border: 0;
     		border-bottom: 1px solid #ccc;
     		margin-bottom: 2ex;
     		border-radius: $border-radius;
     		padding: 1ex;
     		letter-spacing: 1px;
+    	}
     	& li.current {
     		border: 0;
     		background: $title-background;
     		color: $title-color;
     		& span.label {
     			font-weight: bold;
+    		}
+    	}
     	& li span.marker {
     		font-size: 250%;
     		display: block;
+    	}
+    }
     @if ($responsive-steps == horizontal) {
     @media screen and (max-width: $mobile-limit) {
     	div#gauche {
-...
     	div#steps {
     		position: static;
     		margin: 0;
     		color: #aaa;
     		white-space: nowrap;
     		overflow: hidden;
     		width: 100%;
-...
     					position: static;
     					padding: 2px 9px;
     					font-weight: bold;
     					color: white;
     					text-align: center;
     					background: #ddd;
     					border-radius: $border-radius;
     					border: 1px solid #ddd;
+    				}
+    			}
     			& li.current {
     				background: inherit;
     				color: inherit;
     				& span.label {
     					font-weight: normal;
+    				}
     				& span.marker {
     					background: $title-background;
     					color: $title-color;
     					border-radius: $border-radius;
+    				}
+    			}
+    -

Projet

Général

Profil

Produits Entr'ouvert » Intégrations graphiques Publik

0001-add-option-to-display-circle-steps-23533.patch