first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,258 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Prism
|
||||
*
|
||||
* Styles for prism.min.js - lightweight, extensible syntax highlighter
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-prism {
|
||||
|
||||
// Base
|
||||
code,
|
||||
pre {
|
||||
&[class*="language-"] {
|
||||
text-shadow: 0 1px #fff;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
background-color: transparent;
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
|
||||
@media print {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Token colors
|
||||
.token {
|
||||
&.comment,
|
||||
&.prolog,
|
||||
&.doctype,
|
||||
&.cdata,
|
||||
&.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.property,
|
||||
&.tag,
|
||||
&.boolean,
|
||||
&.number,
|
||||
&.constant,
|
||||
&.symbol {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
&.selector,
|
||||
&.attr-name,
|
||||
&.string,
|
||||
&.builtin {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.entity,
|
||||
&.url,
|
||||
.language-css &.string,
|
||||
.style &.string,
|
||||
&.variable {
|
||||
color: #a67f59;
|
||||
background: hsla(0,0%,100%,.5);
|
||||
}
|
||||
|
||||
&.atrule,
|
||||
&.attr-value,
|
||||
&.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
&.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
&.regex,
|
||||
&.important {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
&.important {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
// Namespace opacity
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Line highlight
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 1.25rem;
|
||||
background: rgba(#678bdc, 0.12);
|
||||
pointer-events: none;
|
||||
white-space: pre;
|
||||
line-height: inherit;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
/*rtl:ignore*/
|
||||
left: 10px;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
&[data-end]:after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Line numbers
|
||||
.line-numbers {
|
||||
.line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
width: 36px; // works for line-numbers below 1000 lines
|
||||
letter-spacing: -1px;
|
||||
/*rtl:begin:ignore*/
|
||||
left: -50px;
|
||||
border-right: 1px solid #999;
|
||||
/*rtl:end:ignore*/
|
||||
user-select: none;
|
||||
|
||||
> span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
|
||||
&:before {
|
||||
content: counter(linenumber);
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
/*rtl:begin:ignore*/
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
pre.line-numbers {
|
||||
position: relative;
|
||||
/*rtl:ignore*/
|
||||
padding-left: 50px;
|
||||
counter-reset: linenumber;
|
||||
|
||||
> code {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Code blocks
|
||||
//
|
||||
|
||||
pre {
|
||||
&[class*="language-"] {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
background-color: #fdfdfd;
|
||||
background-image: -webkit-linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-image: -moz-linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-image: -ms-linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-image: -o-linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-image: linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-size: 3em 3em;
|
||||
background-origin: content-box;
|
||||
/*rtl:begin:ignore*/
|
||||
border-left-width: 0;
|
||||
box-shadow: 3px 0 0 0 $color-primary-500 inset;
|
||||
@include border-left-radius(0);
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
|
||||
&[data-line] {
|
||||
position: relative;
|
||||
/*rtl:ignore*/
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Toolbar
|
||||
//
|
||||
|
||||
pre.code-toolbar {
|
||||
position: relative;
|
||||
|
||||
> .toolbar {
|
||||
background-color: #f8f8f8;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
text-shadow: none;
|
||||
color: $body-color;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
/*rtl:begin:ignore*/
|
||||
border-left: $border-width solid $border-color;
|
||||
right: 0;
|
||||
border-radius: 0 0 0 $border-radius;
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
// Items
|
||||
span,
|
||||
.toolbar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
overflow: visible;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Basic styles
|
||||
a,
|
||||
button,
|
||||
span {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $font-size-xs;
|
||||
outline: 0;
|
||||
|
||||
@include hover-focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user