Projet

Général

Profil

0001-scss-introduce-carrousel-item-mask-color-51440.patch

Thomas Jund, 25 février 2021 12:50

Télécharger (1,92 ko)

Voir les différences: 

Subject: [PATCH] scss: introduce $carrousel-item-mask-color (#51440)


 help/fr/misc-scss.page          | 5 +++++
 static/includes/_carrousel.scss | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
help/fr/misc-scss.page
850 850 
  élément à l'autre sont affichées. (visible ou none)</p></td>
851 851 
  <td><p><var>visible</var></p></td>
852 852 
 </tr>
853 
 <tr>
854 
  <td><p><code>$carrousel-item-mask-color</code></p></td>
855 
  <td><p>Couleur du masque qui se superpose à l'image de la diapositive</p></td>
856 
  <td><p><var>rgba(0, 0, 0, 0.3)</var></p></td>
857 
 </tr>
853 858 
</table>
854 859 

  		




  855
  860
  
    
</section>

  		












  

    
      static/includes/_carrousel.scss
    
  





  1
  1
  
    
/* $carrousel-height: height of carrousel image */

  		




  2
  2
  
    
$carrousel-height: 20rem !default;

  		




  
  3
  
    
$carrousel-item-mask-color: rgba(0, 0, 0, 0.3) !default;

  		




  3
  4
  
    

  		




  4
  5
  
    
/* $carrousel-text-position: [vertical option] [horizontal option] */

  		




  5
  6
  
    
/* vertical options: top | middle | bottom */

  		




  ......




  47
  48
  
    
			height: 100%;

  		




  48
  49
  
    
			background-size: cover;

  		




  49
  50
  
    
			padding: 10px;

  		




  
  51
  
    
			@if ($carrousel-item-mask-color and $carrousel-item-mask-color != transparent) {

  		




  50
  52
  
    
			&::after {

  		




  51
  53
  
    
				content: "";

  		




  52
  54
  
    
				display: block;

  		




  ......




  55
  57
  
    
				width: 100%;

  		




  56
  58
  
    
				height: 100%;

  		




  57
  59
  
    
				position: absolute;

  		




  58
  
  
    
				background: black;

  		




  59
  
  
    
				opacity: 0.3;

  		




  
  60
  
    
				background: $carrousel-item-mask-color;

  		




  
  61
  
    
			}

  		




  60
  62
  
    
			}

  		




  61
  63
  
    
			div.carrousel-item-content {

  		




  62
  64
  
    
				@if $carrousel-navigation == "visible" {

  		




  63
  
  
    
-