/* code-header
*/
@mixin code-header {
.code-header { @extend .bg-light; display: flex; justify-content: space-between; align-items: center; padding-left: 10px; font-size: small; &--description { &-code { &:before { @extend .fas; content: fa-content($fa-var-code); padding-right: 5px; } } &-python { &:before { @extend .fab; content: fa-content($fa-var-python); padding-right: 5px; } } &-terminal { &:before { @extend .fas; content: fa-content($fa-var-terminal); padding-right: 5px; } } &-key { &:before { @extend .fas; content: fa-content($fa-var-key); padding-right: 5px; } } &-markdown { &:before { @extend .fab; content: fa-content($fa-var-markdown); padding-right: 5px; } } } &--button { .copy-code-button { @extend .btn, .btn-light, .shadow-none, .btn-sm; border-radius: 0px; display: grid; grid-auto-flow: column; align-items: center; grid-column-gap: 4px; border: none; cursor: pointer; font-size: small; &:before { @extend .fas; content: fa-content($fa-var-clipboard); } &:after { content: "Copy"; } // This class will be toggled via JavaScript &.copied { &:before { @extend .fas; content: fa-content($fa-var-clipboard-check); } &:after { content: "Copied!"; } } } } }
}