[ Index ] |
PHP Cross Reference of Joomla 4.2.2 documentation |
[Summary view] [Print] [Text view]
1 // Notes on the classes: 2 // 3 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) 4 // even when their scroll action started on a carousel, but for compatibility (with Firefox) 5 // we're preventing all actions instead 6 // 2. The .carousel-item-start and .carousel-item-end is used to indicate where 7 // the active slide is heading. 8 // 3. .active.carousel-item is the current slide. 9 // 4. .active.carousel-item-start and .active.carousel-item-end is the current 10 // slide in its in-transition state. Only one of these occurs at a time. 11 // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end 12 // is the upcoming slide in transition. 13 14 .carousel { 15 position: relative; 16 } 17 18 .carousel.pointer-event { 19 touch-action: pan-y; 20 } 21 22 .carousel-inner { 23 position: relative; 24 width: 100%; 25 overflow: hidden; 26 @include clearfix(); 27 } 28 29 .carousel-item { 30 position: relative; 31 display: none; 32 float: left; 33 width: 100%; 34 margin-right: -100%; 35 backface-visibility: hidden; 36 @include transition($carousel-transition); 37 } 38 39 .carousel-item.active, 40 .carousel-item-next, 41 .carousel-item-prev { 42 display: block; 43 } 44 45 /* rtl:begin:ignore */ 46 .carousel-item-next:not(.carousel-item-start), 47 .active.carousel-item-end { 48 transform: translateX(100%); 49 } 50 51 .carousel-item-prev:not(.carousel-item-end), 52 .active.carousel-item-start { 53 transform: translateX(-100%); 54 } 55 56 /* rtl:end:ignore */ 57 58 59 // 60 // Alternate transitions 61 // 62 63 .carousel-fade { 64 .carousel-item { 65 opacity: 0; 66 transition-property: opacity; 67 transform: none; 68 } 69 70 .carousel-item.active, 71 .carousel-item-next.carousel-item-start, 72 .carousel-item-prev.carousel-item-end { 73 z-index: 1; 74 opacity: 1; 75 } 76 77 .active.carousel-item-start, 78 .active.carousel-item-end { 79 z-index: 0; 80 opacity: 0; 81 @include transition(opacity 0s $carousel-transition-duration); 82 } 83 } 84 85 86 // 87 // Left/right controls for nav 88 // 89 90 .carousel-control-prev, 91 .carousel-control-next { 92 position: absolute; 93 top: 0; 94 bottom: 0; 95 z-index: 1; 96 // Use flex for alignment (1-3) 97 display: flex; // 1. allow flex styles 98 align-items: center; // 2. vertically center contents 99 justify-content: center; // 3. horizontally center contents 100 width: $carousel-control-width; 101 padding: 0; 102 color: $carousel-control-color; 103 text-align: center; 104 background: none; 105 border: 0; 106 opacity: $carousel-control-opacity; 107 @include transition($carousel-control-transition); 108 109 // Hover/focus state 110 &:hover, 111 &:focus { 112 color: $carousel-control-color; 113 text-decoration: none; 114 outline: 0; 115 opacity: $carousel-control-hover-opacity; 116 } 117 } 118 .carousel-control-prev { 119 left: 0; 120 background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null); 121 } 122 .carousel-control-next { 123 right: 0; 124 background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null); 125 } 126 127 // Icons for within 128 .carousel-control-prev-icon, 129 .carousel-control-next-icon { 130 display: inline-block; 131 width: $carousel-control-icon-width; 132 height: $carousel-control-icon-width; 133 background-repeat: no-repeat; 134 background-position: 50%; 135 background-size: 100% 100%; 136 } 137 138 /* rtl:options: { 139 "autoRename": true, 140 "stringMap":[ { 141 "name" : "prev-next", 142 "search" : "prev", 143 "replace" : "next" 144 } ] 145 } */ 146 .carousel-control-prev-icon { 147 background-image: escape-svg($carousel-control-prev-icon-bg); 148 } 149 .carousel-control-next-icon { 150 background-image: escape-svg($carousel-control-next-icon-bg); 151 } 152 153 // Optional indicator pips/controls 154 // 155 // Add a container (such as a list) with the following class and add an item (ideally a focusable control, 156 // like a button) with data-bs-target for each slide your carousel holds. 157 158 .carousel-indicators { 159 position: absolute; 160 right: 0; 161 bottom: 0; 162 left: 0; 163 z-index: 2; 164 display: flex; 165 justify-content: center; 166 padding: 0; 167 // Use the .carousel-control's width as margin so we don't overlay those 168 margin-right: $carousel-control-width; 169 margin-bottom: 1rem; 170 margin-left: $carousel-control-width; 171 list-style: none; 172 173 [data-bs-target] { 174 box-sizing: content-box; 175 flex: 0 1 auto; 176 width: $carousel-indicator-width; 177 height: $carousel-indicator-height; 178 padding: 0; 179 margin-right: $carousel-indicator-spacer; 180 margin-left: $carousel-indicator-spacer; 181 text-indent: -999px; 182 cursor: pointer; 183 background-color: $carousel-indicator-active-bg; 184 background-clip: padding-box; 185 border: 0; 186 // Use transparent borders to increase the hit area by 10px on top and bottom. 187 border-top: $carousel-indicator-hit-area-height solid transparent; 188 border-bottom: $carousel-indicator-hit-area-height solid transparent; 189 opacity: $carousel-indicator-opacity; 190 @include transition($carousel-indicator-transition); 191 } 192 193 .active { 194 opacity: $carousel-indicator-active-opacity; 195 } 196 } 197 198 199 // Optional captions 200 // 201 // 202 203 .carousel-caption { 204 position: absolute; 205 right: (100% - $carousel-caption-width) * .5; 206 bottom: $carousel-caption-spacer; 207 left: (100% - $carousel-caption-width) * .5; 208 padding-top: $carousel-caption-padding-y; 209 padding-bottom: $carousel-caption-padding-y; 210 color: $carousel-caption-color; 211 text-align: center; 212 } 213 214 // Dark mode carousel 215 216 .carousel-dark { 217 .carousel-control-prev-icon, 218 .carousel-control-next-icon { 219 filter: $carousel-dark-control-icon-filter; 220 } 221 222 .carousel-indicators [data-bs-target] { 223 background-color: $carousel-dark-indicator-active-bg; 224 } 225 226 .carousel-caption { 227 color: $carousel-dark-caption-color; 228 } 229 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Wed Sep 7 05:41:13 2022 | Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer |