/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/code.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@code-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { .text-styling ( @code-text-color, @code-text-font-family, @code-text-font-size, @code-text-font-style, @code-text-font-weight, @code-text-line-height, @code-text-transform, @code-text-shadow ); display: inline-block; white-space: nowrap; background: @code-background-color; #gradient > .horizontal(@code-background-gradient-color-top, @code-background-gradient-color-bottom); border-top-width: @code-border-top-width; border-top-color: @code-border-top-color; border-right-width: @code-border-right-width; border-right-color: @code-border-right-color; border-bottom-width: @code-border-bottom-width; border-bottom-color: @code-border-bottom-color; border-left-width: @code-border-left-width; border-left-color: @code-border-left-color; .box-shadow(@code-shadow); padding: 0px @code-padding-horizontal; border-radius: @code-border-radius; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: @code-block-margin-top; margin-bottom: @code-block-margin-bottom; word-break: break-all; white-space: pre; //word-wrap: break-word; //white-space: pre-wrap; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @code-block-short-margin-top; margin-bottom: @code-block-short-margin-bottom; } &.short-top { margin-top: @code-block-short-margin-top; } &.short-bottom { margin-bottom: @code-block-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @code-block-tall-margin-top; margin-bottom: @code-block-tall-margin-bottom; } &.tall-top { margin-top: @code-block-tall-margin-top; } &.tall-bottom { margin-bottom: @code-block-tall-margin-bottom; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@code-block-prettyprint-enabled) { pre.prettyprint { .text-styling ( @code-block-prettyprint-text-color, @code-block-prettyprint-text-font-family, @code-block-prettyprint-text-font-size, @code-block-prettyprint-text-font-style, @code-block-prettyprint-text-font-weight, @code-block-prettyprint-text-line-height, @code-block-prettyprint-text-transform, @code-block-prettyprint-text-shadow ); padding: @code-block-prettyprint-padding; background: @code-block-prettyprint-background-color; #gradient > .horizontal(@code-block-prettyprint-background-gradient-color-top, @code-block-prettyprint-background-gradient-color-bottom); border-top-width: @code-block-prettyprint-border-top-width; border-top-color: @code-block-prettyprint-border-top-color; border-right-width: @code-block-prettyprint-border-right-width; border-right-color: @code-block-prettyprint-border-right-color; border-bottom-width: @code-block-prettyprint-border-bottom-width; border-bottom-color: @code-block-prettyprint-border-bottom-color; border-left-width: @code-block-prettyprint-border-left-width; border-left-color: @code-block-prettyprint-border-left-color; .box-shadow(@code-block-prettyprint-shadow); margin-left: 0px; margin-right: 0px; overflow-x: auto; /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol { position: relative; margin-bottom: 0px; li { padding-left: 0px; } } /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ &.linenums { position: relative; &:before { content: ''; position: absolute; top: 0px; left: 0px; width: @code-block-prettyprint-padding + @code-block-prettyprint-linenums-width; height: 100%; background: @code-block-prettyprint-linenums-background-color; #gradient > .horizontal(@code-block-prettyprint-linenums-background-gradient-color-top, @code-block-prettyprint-linenums-background-gradient-color-bottom); border-top-width: @code-block-prettyprint-linenums-border-top-width; border-top-color: @code-block-prettyprint-linenums-border-top-color; border-right-width: @code-block-prettyprint-linenums-border-right-width; border-right-color: @code-block-prettyprint-linenums-border-right-color; border-bottom-width: @code-block-prettyprint-linenums-border-bottom-width; border-bottom-color: @code-block-prettyprint-linenums-border-bottom-color; border-left-width: @code-block-prettyprint-linenums-border-left-width; border-left-color: @code-block-prettyprint-linenums-border-left-color; .box-shadow(@code-block-prettyprint-linenums-shadow); } ol { position: relative; li { margin: 0px; padding-left: @code-block-prettyprint-linenums-width + @code-block-prettyprint-padding; &:before { content: counter(li); color: @code-block-prettyprint-linenums-text-color; font-family: @code-block-prettyprint-linenums-text-font-family; font-style: @code-block-prettyprint-linenums-text-font-style; font-weight: @code-block-prettyprint-linenums-text-font-weight; text-transform: @code-block-prettyprint-linenums-text-transform; text-shadow: @code-block-prettyprint-linenums-text-shadow; text-rendering: @code-block-prettyprint-linenums-text-rendering; } } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Syntax Highlighting -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .pln { color: @code-block-prettyprint-syntax-text-color-pln; } .str { color: @code-block-prettyprint-syntax-text-color-str; } .kwd { color: @code-block-prettyprint-syntax-text-color-kwd; } .com { color: @code-block-prettyprint-syntax-text-color-com; } .typ { color: @code-block-prettyprint-syntax-text-color-typ; } .lit { color: @code-block-prettyprint-syntax-text-color-lit; } .pun { color: @code-block-prettyprint-syntax-text-color-pun; } .opn { color: @code-block-prettyprint-syntax-text-color-opn; } .clo { color: @code-block-prettyprint-syntax-text-color-clo; } .tag { color: @code-block-prettyprint-syntax-text-color-tag; } .atn { color: @code-block-prettyprint-syntax-text-color-atn; } .atv { color: @code-block-prettyprint-syntax-text-color-atv; } .dec { color: @code-block-prettyprint-syntax-text-color-dec; } .var { color: @code-block-prettyprint-syntax-text-color-var; } .fun { color: @code-block-prettyprint-syntax-text-color-fun; } } } } & when (@code-enabled) and (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { font-size: @code-text-font-size * @code-text-font-size-scale-screen-mini; line-height: @code-text-line-height * @code-text-line-height-scale-screen-mini; padding: 0px @code-padding-horizontal-screen-mini; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: @code-block-margin-top * @code-block-margin-top-scale-screen-mini; margin-bottom: @code-block-margin-bottom * @code-block-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @code-block-short-margin-top * @code-block-margin-top-scale-screen-mini; margin-bottom: @code-block-short-margin-bottom * @code-block-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @code-block-short-margin-top * @code-block-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @code-block-short-margin-bottom * @code-block-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @code-block-tall-margin-top * @code-block-margin-top-scale-screen-mini; margin-bottom: @code-block-tall-margin-bottom * @code-block-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @code-block-tall-margin-top * @code-block-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @code-block-tall-margin-bottom * @code-block-margin-bottom-scale-screen-mini; } } & when (@code-block-prettyprint-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { font-size: @code-block-prettyprint-text-font-size * @code-block-prettyprint-text-font-size-scale-screen-mini; line-height: @code-block-prettyprint-text-line-height * @code-block-prettyprint-text-line-height-scale-screen-mini; padding: @code-block-prettyprint-padding-screen-mini; /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ &.linenums { &:before { width: @code-block-prettyprint-padding-screen-mini + @code-block-prettyprint-linenums-width-screen-mini; } ol { li { padding-left: @code-block-prettyprint-linenums-width-screen-mini + @code-block-prettyprint-padding-screen-mini; } } } } } } } & when (@code-enabled) and (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { font-size: @code-text-font-size * @code-text-font-size-scale-screen-small; line-height: @code-text-line-height * @code-text-line-height-scale-screen-small; padding: 0px @code-padding-horizontal-screen-small; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: @code-block-margin-top * @code-block-margin-top-scale-screen-small; margin-bottom: @code-block-margin-bottom * @code-block-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @code-block-short-margin-top * @code-block-margin-top-scale-screen-small; margin-bottom: @code-block-short-margin-bottom * @code-block-margin-bottom-scale-screen-small; } &.short-top { margin-top: @code-block-short-margin-top * @code-block-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @code-block-short-margin-bottom * @code-block-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @code-block-tall-margin-top * @code-block-margin-top-scale-screen-small; margin-bottom: @code-block-tall-margin-bottom * @code-block-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @code-block-tall-margin-top * @code-block-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @code-block-tall-margin-bottom * @code-block-margin-bottom-scale-screen-small; } } & when (@code-block-prettyprint-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { font-size: @code-block-prettyprint-text-font-size * @code-block-prettyprint-text-font-size-scale-screen-small; line-height: @code-block-prettyprint-text-line-height * @code-block-prettyprint-text-line-height-scale-screen-small; padding: @code-block-prettyprint-padding-screen-small; /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ &.linenums { &:before { width: @code-block-prettyprint-padding-screen-small + @code-block-prettyprint-linenums-width-screen-small; } ol { li { padding-left: @code-block-prettyprint-linenums-width-screen-small + @code-block-prettyprint-padding-screen-small; } } } } } } } & when (@code-enabled) and (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { font-size: @code-text-font-size * @code-text-font-size-scale-screen-medium; line-height: @code-text-line-height * @code-text-line-height-scale-screen-medium; padding: 0px @code-padding-horizontal-screen-medium; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: @code-block-margin-top * @code-block-margin-top-scale-screen-medium; margin-bottom: @code-block-margin-bottom * @code-block-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @code-block-short-margin-top * @code-block-margin-top-scale-screen-medium; margin-bottom: @code-block-short-margin-bottom * @code-block-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @code-block-short-margin-top * @code-block-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @code-block-short-margin-bottom * @code-block-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @code-block-tall-margin-top * @code-block-margin-top-scale-screen-medium; margin-bottom: @code-block-tall-margin-bottom * @code-block-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @code-block-tall-margin-top * @code-block-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @code-block-tall-margin-bottom * @code-block-margin-bottom-scale-screen-medium; } } & when (@code-block-prettyprint-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { font-size: @code-block-prettyprint-text-font-size * @code-block-prettyprint-text-font-size-scale-screen-medium; line-height: @code-block-prettyprint-text-line-height * @code-block-prettyprint-text-line-height-scale-screen-medium; padding: @code-block-prettyprint-padding-screen-medium; /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ &.linenums { &:before { width: @code-block-prettyprint-padding-screen-medium + @code-block-prettyprint-linenums-width-screen-medium; } ol { li { padding-left: @code-block-prettyprint-linenums-width-screen-medium + @code-block-prettyprint-padding-screen-medium; } } } } } } } & when (@code-enabled) and (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { font-size: @code-text-font-size * @code-text-font-size-scale-screen-large; line-height: @code-text-line-height * @code-text-line-height-scale-screen-large; padding: 0px @code-padding-horizontal-screen-large; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: @code-block-margin-top * @code-block-margin-top-scale-screen-large; margin-bottom: @code-block-margin-bottom * @code-block-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @code-block-short-margin-top * @code-block-margin-top-scale-screen-large; margin-bottom: @code-block-short-margin-bottom * @code-block-margin-bottom-scale-screen-large; } &.short-top { margin-top: @code-block-short-margin-top * @code-block-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @code-block-short-margin-bottom * @code-block-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @code-block-tall-margin-top * @code-block-margin-top-scale-screen-large; margin-bottom: @code-block-tall-margin-bottom * @code-block-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @code-block-tall-margin-top * @code-block-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @code-block-tall-margin-bottom * @code-block-margin-bottom-scale-screen-large; } } & when (@code-block-prettyprint-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { font-size: @code-block-prettyprint-text-font-size * @code-block-prettyprint-text-font-size-scale-screen-large; line-height: @code-block-prettyprint-text-line-height * @code-block-prettyprint-text-line-height-scale-screen-large; padding: @code-block-prettyprint-padding-screen-large; /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ &.linenums { &:before { width: @code-block-prettyprint-padding-screen-large + @code-block-prettyprint-linenums-width-screen-large; } ol { li { padding-left: @code-block-prettyprint-linenums-width-screen-large + @code-block-prettyprint-padding-screen-large; } } } } } } } & when (@code-enabled) and (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@code-enabled) and (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }