Mixin: Common Mixins
The Common mixins drive basic behaviors, like before/after pseudo-elements,and border radius. These are the most common mixins that are used in thecomponent themes.
Where to Find
You can find these mixins in integration/snippets/mixins/common.scss.
Before After
1@mixin before-after {
2 position: absolute;
3 display: block;
4 content: "";
5}Or a second variant
1@mixin after-before {
2 display: block;
3 position: absolute;
4 content: "";
5}Example Usage
@include before-after is included when creating a triangle above the element.
1&:not(:first-of-type) {
2 position: relative;
3 padding-left: 25px;
4 &:after {
5 @include before-after;
6 left: 10px;
7 top: 3px;
8 width: 2px;
9 height: 12px;
10 transform: rotate(23deg);
11 background-color: color("shade-25");
12 }
13}Common Image
Use on any image you want to fill the div and be contained in a standard way. This accepts an argument for the object-fit property.
1@mixin common-img($objFit: contain) {
2 width: 100%;
3 height: 100%;
4 object-fit: $objFit;
5}Create a standard border
This mixin creates a standard border for a component.
1@mixin border {
2 @include after-before;
3 width: 100%;
4 height: 1px;
5 opacity: 0.3;
6 background: color("border");
7}Line Clamp
This mixin creates a line clamp for text that is too long. It will append an ellipsis to the end of the text. It accepts an intval argument to set the line length.
1@mixin lineclamp($line: 3) {
2 display: -webkit-box;
3 overflow: hidden;
4 -webkit-box-orient: vertical;
5 -webkit-line-clamp: $line;
6 text-overflow: ellipsis;
7}Video Player
This mixin creates a video player icon that can be used to play a video.
1@mixin playicon {
2 position: absolute;
3 overflow: hidden;
4 inset: 0;
5 width: 55px;
6 height: 55px;
7 margin: auto;
8 pointer-events: none;
9 border-radius: 100%;
10 transition: transform 300ms ease-in-out;
11 cursor: pointer;
12 @include media-breakpoint-up(lg) {
13 width: 105px;
14 height: 105px;
15 }
16 &::before {
17 @include after-before;
18 z-index: 0;
19 position: absolute;
20 width: 100%;
21 height: 100%;
22 backdrop-filter: blur(3px);
23 -webkit-backdrop-filter: blur(3px);
24 }
25 &::after {
26 @include after-before;
27 display: block;
28 width: 100%;
29 height: 100%;
30 background: url($play-icon) center / 55px no-repeat;
31 @include media-breakpoint-up(lg) {
32 background-size: 105px;
33 }
34 }
35 &.disable {
36 display: none;
37 }
38}
39
40@mixin playiconhover {
41 transform: scale(1.05);
42 opacity: 1 !important;
43 cursor: pointer;
44}
45
46.inline-video {
47 & + .play-icon {
48 pointer-events: painted !important;
49 }
50}