|
246 | 246 | } |
247 | 247 | } |
248 | 248 | } |
| 249 | + |
| 250 | +/// =========================================================================== |
| 251 | +/// List styles |
| 252 | +/// =========================================================================== |
| 253 | + |
| 254 | +// Mixins and extends can't use the LOCAL-VARIABLES map because we would be |
| 255 | +// at risk of overriding an elements map if they call our mixin. We need to |
| 256 | +// use just regular sass variables and pfe-local and specify the $fallbacks. |
| 257 | +@mixin ordered-list-primary($size: 56px) { |
| 258 | + // First we create our Sass variables that we will use for fallbacks |
| 259 | + // The gap between list items |
| 260 | + $gap: pfe-var(content-spacer); |
| 261 | + // The space between the circle and content |
| 262 | + $spacer: pfe-var(content-spacer); |
| 263 | + // rgb value of the color theme of the circle |
| 264 | + // we need to wrap this in a calc function so it can be dynamic. |
| 265 | + $color: (238, 0, 0); |
| 266 | + // font size of the number inside of the circle |
| 267 | + $number-font-size: $pf-global--FontSize--2xl; |
| 268 | + |
| 269 | + list-style: none; |
| 270 | + min-height: pfe-local(gap, $fallback: $gap); |
| 271 | + margin: pfe-local(gap, $fallback: $gap); |
| 272 | + padding-left: pfe-local(PaddingLeft, $fallback: 0); |
| 273 | + |
| 274 | + & > li { |
| 275 | + // increment the local counter variable |
| 276 | + counter-increment: pfe-list; |
| 277 | + position: relative; |
| 278 | + min-height: pfe-local(size, $region: circle, $fallback: $size); |
| 279 | + // the li content will start after the circle and a defined spacer |
| 280 | + padding-left: calc(#{pfe-local(spacer, $fallback: $spacer)} + #{pfe-local(size, $region: circle, $fallback: $size)}); |
| 281 | + // the li content needs to align with the middle of the radius but we |
| 282 | + // need to account for the fact that it's also calculating the size |
| 283 | + // of the line height of the number inside of the circle |
| 284 | + padding-top: calc((#{pfe-local(size, $region: circle, $fallback: $size)} / 2) - ((#{pfe-local(FontSize, $region: circle, $fallback: $number-font-size)} / 2))); |
| 285 | + } |
| 286 | + & > ul { |
| 287 | + list-style-type: disc; |
| 288 | + } |
| 289 | + & > li:before { |
| 290 | + @include pfe-typography(2xl, $type: "title"); |
| 291 | + // we need to make sure that if the size of the number in the circle changes |
| 292 | + // that doesn't affect the size or shape of the circle. since we don't have |
| 293 | + // any more psuedo elements to work with, we need to use the flexbox technique |
| 294 | + // to center the text. |
| 295 | + display: block; |
| 296 | + display: flex; |
| 297 | + justify-content: center; |
| 298 | + align-items: center; |
| 299 | + text-align: center; |
| 300 | + // make the circle using border-radius |
| 301 | + border-radius: 50%; |
| 302 | + // keep the circle on the upper left |
| 303 | + position: absolute; |
| 304 | + top: 0; |
| 305 | + left: 0; |
| 306 | + // set the size of the circle |
| 307 | + width: pfe-local(size, $region: circle, $fallback: $size); |
| 308 | + height: pfe-local(size, $region: circle, $fallback: $size); |
| 309 | + // set the contents of the circle |
| 310 | + content: counter(pfe-list); |
| 311 | + font-size: pfe-local(FontSize, $region: circle, $fallback: $number-font-size); |
| 312 | + color: rgba(#{pfe-local(color, $region: circle, $fallback: $color)}, 1); |
| 313 | + // generate a background color based on the circle text color |
| 314 | + // provide an override for BackgroundColor if the user needs to specify |
| 315 | + // custom color. |
| 316 | + background-color: pfe-local(BackgroundColor, $region: circle, $fallback: rgba(pfe-local(color, $region: circle, $fallback: $color), 0.07)); |
| 317 | + } |
| 318 | + |
| 319 | + & > li *:first-child { |
| 320 | + margin-top: pfe-local(MarginTop, $region: item-first-child, $fallback: 0); |
| 321 | + } |
| 322 | + |
| 323 | + // for pfe-grids we: |
| 324 | + // - use the pfe-grid API to add grid gap. |
| 325 | + // - remove the margins on the <li> tags in favor of the grid gap. |
| 326 | + // - add top and bottom margin back to the <ol> tags to maintain correct offset with surrounding content. |
| 327 | + &.pfe-l-grid.pfe-m-gutters { |
| 328 | + --pfe-grid--gap--vertical: #{pfe-local(gap, $fallback: $gap)}; |
| 329 | + --pfe-grid--gap--horizontal: #{pfe-local(gap, $fallback: $gap)}; |
| 330 | + --pfe-grid--Margin: #{pfe-local(Margin, $fallback: $gap)}; |
| 331 | + --pfe-grid__item--Margin: #{pfe-local(Margin, $region: item, $fallback: 0)}; |
| 332 | + } |
| 333 | +} |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments