src/styles/components/code-snippet/_mixins.scss
@mixin voxel-code-snippet() {
margin-bottom: $voxel-code-snippet__margin-bottom;
margin-left: $voxel-code-snippet__margin-left;
margin-right: $voxel-code-snippet__margin-right;
margin-top: $voxel-code-snippet__margin-top;
padding: $voxel-code-snippet__padding;
position: $voxel-code-snippet__position;
&::before {
content: "";
display: $voxel-code-snippet__icon__display;
height: $voxel-code-snippet__icon__height;
position: $voxel-code-snippet__icon__position;
right: $voxel-code-snippet__icon__right;
top: $voxel-code-snippet__icon__top;
width: $voxel-code-snippet__icon__width;
}
}
@mixin voxel-code-snippet--html() {
&::before {
background-image: $voxel-code-snippet__icon__background-image--html;
}
}
@mixin voxel-code-snippet--js() {
&::before {
background-image: $voxel-code-snippet__icon__background-image--js;
}
}
@mixin voxel-code-snippet--css() {
&::before {
background-image: $voxel-code-snippet__icon__background-image--css;
}
}
@mixin voxel-code-snippet--jsx() {
&::before {
background-image: $voxel-code-snippet__icon__background-image--jsx;
}
}
@mixin voxel-code-snippet__pre() {
background-color: $voxel-code-snippet__pre__background-color;
border-radius: $voxel-code-snippet__pre__border-radius;
border: $voxel-code-snippet__pre__border;
color: $voxel-code-snippet__pre__color;
font-size: $voxel-code-snippet__pre__font-size;
line-height: $voxel-code-snippet__pre__line-height;
margin: $voxel-code-snippet__pre__margin;
overflow: $voxel-code-snippet__pre__overflow;
padding: $voxel-code-snippet__pre__padding;
word-break: $voxel-code-snippet__pre__word-break;
word-wrap: $voxel-code-snippet__pre__word-wrap;
}