Sass mixin for Inside Borders

Developer
Ricardo Zea
Size
17,268 Kb
Views
34,408
  1. Sass mixin for Inside Borders Previews
  2. Sass mixin for Inside Borders HTML Codes
  3. Sass mixin for Inside Borders CSS Codes
  4. Sass mixin for Inside Borders JS Codes

How do I make an sass mixin for inside borders?

Use this mixin to set your borders via box-shadow: inset ... ; With this mixin you can define 3 properties: Border Thickness, Border Color and Opacity.. What is a sass mixin for inside borders? How do you make a sass mixin for inside borders? This script and codes were developed by Ricardo Zea on 28 September 2022, Wednesday.

Sass mixin for Inside Borders Previews
IQ Test

Sass mixin for Inside Borders - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sass mixin for Inside Borders</title> <link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "compass/css3";
//Mixin for inside border
@mixin ib($thickness:2px,$color:white,$alpha:.1) { box-shadow:inset 0 0 0 $thickness rgba($color,$alpha);
}
.a { @include ib(); }
.b { @include ib(5px); }
.c { @include ib(10px,$r); }
.d { @include ib(15px,$y,.5); }
.e { @include ib($alpha:.8); }
.f { @include ib($color:$b, $alpha:.8); }
//Styling stuff, not needed for demo
//Mixin for same width & height or just width v2 (https://codepen.io/ricardozea/pen/GojnI)
@mixin wh( $width, $height: false ) { width: $width; @if( $height ) { height: $height; } @else { height: $width; }
}
ol { width: 50%; margin: auto; text-align: left; }
.wrapper { display: flex; justify-content:center; height: 100%; }
.container { display: flex; justify-content:center; align-items:center; @include wh(150px); margin:0 10px; background: rgba(black,.1); }
.a { background: none !important /*sorry had to*/; }
time { font-size: 11px; color:rgba(white,.1); }
pre { display: inline-block; text-align: left; }
.sections { display:flex; justify-content:center; margin-top: 40px; }
.components-demo { margin:0 5px; padding: 20px; background: rgba(black,.1); @include ib(3px, black); border-radius: 3px; }
h2:first-of-type { margin-top: 0; }
.tal { text-align: left; }
.highlight2 { display: inline-block; margin-bottom: 20px; padding: 6px 15px; background:$y; font-size: 22px; font-weight: bold; color:black; box-shadow:0 0 5px 2px rgba(white,.2); border-radius:1px; }
a:hover { color: white; }
.highlight { @extend .highlight2; @include wh(50px); padding: 10px; background: $g; border-radius:100px; }
/**/// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
$base00: #20201d;
$base01: #292824;
$base02: #6e6b5e;
$base03: #7d7a68;
$base04: #999580;
$base05: #a6a28c;
$base06: #e8e4cf;
$base07: #fefbec;
$base08: #d73737;
$base09: #b65611;
$base0A: #cfb017;
$base0B: #60ac39;
$base0C: #1fad83;
$base0D: #6684e1;
$base0E: #b854d4;
$base0F: #d43552;
$red: $base08;
$orange: $base09;
$yellow: $base0A;
$green: $base0B;
$cyan: $base0C;
$blue: $base0D;
$violet: $base0E;
$magenta: $base0F;
$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
$code-font-size: 14px;
$code-line-height: 1.375;
$code-background:	$base00;
$code-color: $base05;
$code-color-fade:	$base05;
// $code-text-shadow: none;
$code-color-comment: $base02;
$code-color-keyword: $base0B;
$code-color-value: $base0C;
$code-color-attr-name:	$base09;
$code-color-string:	$base0C;
$code-color-name:	$base0A;
$code-color-number:	$base09;
$code-color-variable:	$base0D;
$code-color-selector:	$base0E;
$code-color-property: $base0A;
$code-color-important: $base08;
$code-color-tag: $base0D;
$code-color-atrule: $base0C;
// @import "../partials/prism";
/** * Prism base code highlighter theme using Sass * * @author @MoOx * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss * slightly adapted by me, Bram de Haan */
// prism selector
$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
$code-selector-block: "pre[class*=\"language-\"]";
$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
// generic stuff
$code-font-family: Menlo, Monaco, "Courier New", monospace	!default;
$code-font-size: 14px	!default;
$code-line-height: 1.375 !default;
$code-tab-size:	4	!default;
$code-hyphens: none	!default;
$code-block-padding: 12px	!default;
$code-inline-padding:	2px 6px	!default;
$code-border-radius: 5px !default;
$code-border:	1px solid #e1e1e8 !default;
$code-background:	#2a2a2a !default;
$code-color: #fff !default;
$code-color-fade:	#bebec5 !default;
// $code-text-shadow: 0 1px 0 #000 !default;
$code-box-shadow: 1px 1px .3em -.1em #000 inset !default;
$code-color-property: #b58900 !default;
$code-color-important: #cb4b16 !default;
$code-color-tag: #268bd2 !default;
$code-color-atrule: #2aa198 !default;
$code-color-attr-name: #b65611 !default;
// $code-linenums-padding:	7px !default;
// $code-linenums-width:	40px !default;
// $code-linenums-background:	#444 !default;
// $code-linenums-border-color:	#555 !default;
// $code-linenums-border-width:	1px !default;
@if $code-selector != null {	#{$code-selector} {	-moz-tab-size: $code-tab-size;	-o-tab-size: $code-tab-size;	tab-size: $code-tab-size;	-webkit-hyphens: $code-hyphens;	-moz-hyphens: $code-hyphens;	-ms-hyphens: $code-hyphens;	hyphens: $code-hyphens;	// whitespace management	white-space: pre; // fallback	white-space: pre-wrap;	word-break: break-all;	word-wrap: break-word;	font-family: $code-font-family;	font-size:	$code-font-size;	line-height: $code-line-height;	color: $code-color;	// text-shadow: $code-text-shadow;	background: $code-background;	}
}
%code-background {	border-radius: $code-border-radius;	border: $code-border;	box-shadow: $code-box-shadow;
}
@if $code-selector-block != null {	#{$code-selector-block} {	@extend %code-background;	padding: $code-block-padding;	}
}
@if $code-selector-inline != null {	#{$code-selector-inline} {	@extend %code-background;	padding: $code-inline-padding;	}
}
// pre[class*="language-"],
// :not(pre) > code[class*="language-"] {
//	background: $code-background;
// }
// prism tokens
//
$code-color-comment: null !default;
$code-color-keyword: null !default;
$code-color-value: null !default;
$code-color-string:	null !default;
$code-color-name:	null !default;
$code-color-number:	null !default;
$code-color-variable:	null !default;
$code-color-selector:	null !default;
$code-color-punctuation: $code-color-fade !default;
#{$code-selector} {	.namespace {	opacity: .7;	}	.token {	&.comment,	&.prolog,	&.doctype,	&.cdata {	color: $code-color-comment;	}	&.null,	&.operator,	&.boolean,	&.number {	color: $code-color-number;	}	&.string {	color: $code-color-string;	}	&.attr-name {	color: $code-color-attr-name;	}	&.entity,	&.url,	.language-css &.string,	.style &.string {	color: $code-color-string;	}	&.selector {	color: $code-color-selector;	}	&.attr-value,	&.keyword,	&.control,	&.directive,	&.unit {	color: $code-color-keyword;	}	&.important {	color: $code-color-important;	}	&.atrule{	color: $code-color-atrule; }	&.regex,	&.statement {	color: $code-color-value;	}	&.placeholder,	&.variable {	color: $code-color-variable;	}	&.property,	&.tag { // font-style: italic;	}	&.property { color: $code-color-property;	}	&.tag { color: $code-color-tag;	}	&.important,	&.statement {	font-weight: bold;	}	// todo ?	// &.mixin	// &.gradient	// &.abslength	// &.easing	// &.time	// &.angle	// &.fontfamily	// ruby/vim https://github.com/LeaVerou/prism/pull/18	// &.inst-var	// &.builtin	// &.const	// &.symbol	//	// php https://github.com/LeaVerou/prism/pull/20	// &.deliminator	// &.function	&.punctuation {	color: $code-color-punctuation;	}	&.entity {	cursor: help;	}	// for dev :)	&.debug { color: red }	}
}
// generic demo styles
.header h1 .small { font: normal 100%/1.375 AvenirNext-Regular, Corbel, "Segoe Ui", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.base00-background { background-color: $base00; }
.base01-background { background-color: $base01; }
.base02-background { background-color: $base02; }
.base03-background { background-color: $base03; }
.base04-background { background-color: $base04; }
.base05-background { background-color: $base05; }
.base06-background { background-color: $base06; }
.base07-background { background-color: $base07; }
.base08-background,
.red-background { background-color: $red; }
.base09-background,
.orange-background { background-color: $orange; }
.base0A-background,
.yellow-background { background-color: $yellow; }
.base0B-background,
.green-background { background-color: $green; }
.base0C-background,
.cyan-background { background-color: $cyan; }
.base0D-background,
.blue-background { background-color: $blue; }
.base0E-background,
.violet-background { background-color: $violet; }
.base0F-background,
.magenta-background { background-color: $magenta; }
.base00 { color: $base00; }
.base01 { color: $base01; }
.base02 { color: $base02; }
.base03 { color: $base03; }
.base04 { color: $base04; }
.base05 { color: $base05; }
.base06 { color: $base06; }
.base07 { color: $base07; }
.base08,
.red { color: $red; }
.base09,
.orange { color: $orange; }
.base0A,
.yellow { color: $yellow; }
.base0B,
.green { color: $green; }
.base0C,
.cyan { color: $cyan; }
.base0D,
.blue { color: $blue; }
.base0E,
.violet { color: $violet; }
.base0F,
.magenta { color: $magenta; }
pre[class*="language"].base00-background { background-color: $base00;
}
.sh-c { overflow: auto; color: #1b1918 !important;
}
.sh-c-comm { padding: .2em .5em; display: inline-block;
}
.sh-c-light,
.sh-c-light .comment { color: #a8a19f !important;
}
.sh-c-dark,
.sh-c-dark .comment { color: #1b1918 !important;
}
pre[class^="base"] {
padding: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
margin: .5em 0;
}
.language- .break-word { word-break: break-word;
}
code[class*="language-"] { background: none !important /*sorry had to*/; box-shadow: none; }
.new-window { position: relative; padding-right: 16px; &:after { content:''; display: block; width: 14px; height: 12px; position: absolute; top: 10%; right: 0; background: url(https://i.stack.imgur.com/3H2PQ.png) no-repeat; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <em class="highlight2">See <a href="https://codepen.io/ricardozea/pen/69864073c9a9e6b2a580cdf2b0d7ed97/" target="_blank">Version 2</a> of this mixin</em>
<h1>Sass mixin for Inside Borders - <span class="highlight">v1</span></h1>
<p>Use this mixin to set your borders via <code>box-shadow: inset &hellip; ;</code>
<p>With this mixin you can define 3 properties:</p>
<ol> <li>Border Thickness</li> <li>Border Color</li> <li>Opacity</li>
</ol>
<h2>Demo</h2>
<div class="wrapper components-demo">	<div class="container a"><code>@include ib();</code></div>	<div class="container b"><code>@include ib(5px);</code></div>	<div class="container c"><code>@include ib(10px, $r);</code></div>	<div class="container d"><code>@include ib(15px, $y, .5);</code></div>	<div class="container e"><code>@include ib($alpha:.8);</code></div>	<div class="container f"><code>@include ib($color:$b, $alpha:.8);</code></div>
</div>
<div class="sections"> <div class="components-demo"> <h2>HTML</h2> <pre class="language-markup"><code>&lt;div class="inside-border">&lt;/div></code></pre> </div> <div class="components-demo"> <h2>Mixin</h2> <pre class="language-css"><code class="language-css">@mixin ib ($thickness:2px, $color:white, $alpha:.1) { box-shadow: inset 0 0 0 $thickness rgba($color, $alpha);
}</code></pre> </div> <div class="components-demo"> <h2>Usage</h2> <pre class="language-css"><code>.inside-border { @include ib(15px,#369,.5); }</code></pre> </div>
</div>
<h3>Additional notes:</h3> <ol> <li>If you want to define only a single value, you will need to declare the whole argument, like this: <code>@include ib($alpha:.5);</code></li> <li>If you're specifying both the <code>color</code> and the <code>alpha</code> values, you need to declare both arguments, like this: <code>@include ib($color:$b, $alpha:.8);</code></li> <li>This, however, doesn't apply if you're <u>only specifying the</u> <code>width</code>. <br>As you can see in the second example above, you don't have to declare the <code>width</code>argument, just the value, in this case, <code>5px</code>. Like this: <code>@include ib(5px);</code></li>
</ol>
<hr>
<p>Created by <a href="http://ricardozea.me/" target="_blank">Ricardo Zea</a></p>
<time datetime="4-22-2014">Created on: April 22, 2014</time> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sass mixin for Inside Borders - Script Codes CSS Codes

@import "compass/css3";
//Mixin for inside border
@mixin ib($thickness:2px,$color:white,$alpha:.1) { box-shadow:inset 0 0 0 $thickness rgba($color,$alpha);
}
.a { @include ib(); }
.b { @include ib(5px); }
.c { @include ib(10px,$r); }
.d { @include ib(15px,$y,.5); }
.e { @include ib($alpha:.8); }
.f { @include ib($color:$b, $alpha:.8); }
//Styling stuff, not needed for demo
//Mixin for same width & height or just width v2 (https://codepen.io/ricardozea/pen/GojnI)
@mixin wh( $width, $height: false ) { width: $width; @if( $height ) { height: $height; } @else { height: $width; }
}
ol { width: 50%; margin: auto; text-align: left; }
.wrapper { display: flex; justify-content:center; height: 100%; }
.container { display: flex; justify-content:center; align-items:center; @include wh(150px); margin:0 10px; background: rgba(black,.1); }
.a { background: none !important /*sorry had to*/; }
time { font-size: 11px; color:rgba(white,.1); }
pre { display: inline-block; text-align: left; }
.sections { display:flex; justify-content:center; margin-top: 40px; }
.components-demo { margin:0 5px; padding: 20px; background: rgba(black,.1); @include ib(3px, black); border-radius: 3px; }
h2:first-of-type { margin-top: 0; }
.tal { text-align: left; }
.highlight2 { display: inline-block; margin-bottom: 20px; padding: 6px 15px; background:$y; font-size: 22px; font-weight: bold; color:black; box-shadow:0 0 5px 2px rgba(white,.2); border-radius:1px; }
a:hover { color: white; }
.highlight { @extend .highlight2; @include wh(50px); padding: 10px; background: $g; border-radius:100px; }
/**/// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
$base00: #20201d;
$base01: #292824;
$base02: #6e6b5e;
$base03: #7d7a68;
$base04: #999580;
$base05: #a6a28c;
$base06: #e8e4cf;
$base07: #fefbec;
$base08: #d73737;
$base09: #b65611;
$base0A: #cfb017;
$base0B: #60ac39;
$base0C: #1fad83;
$base0D: #6684e1;
$base0E: #b854d4;
$base0F: #d43552;
$red: $base08;
$orange: $base09;
$yellow: $base0A;
$green: $base0B;
$cyan: $base0C;
$blue: $base0D;
$violet: $base0E;
$magenta: $base0F;
$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
$code-font-size: 14px;
$code-line-height: 1.375;
$code-background:	$base00;
$code-color: $base05;
$code-color-fade:	$base05;
// $code-text-shadow: none;
$code-color-comment: $base02;
$code-color-keyword: $base0B;
$code-color-value: $base0C;
$code-color-attr-name:	$base09;
$code-color-string:	$base0C;
$code-color-name:	$base0A;
$code-color-number:	$base09;
$code-color-variable:	$base0D;
$code-color-selector:	$base0E;
$code-color-property: $base0A;
$code-color-important: $base08;
$code-color-tag: $base0D;
$code-color-atrule: $base0C;
// @import "../partials/prism";
/** * Prism base code highlighter theme using Sass * * @author @MoOx * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss * slightly adapted by me, Bram de Haan */
// prism selector
$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
$code-selector-block: "pre[class*=\"language-\"]";
$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
// generic stuff
$code-font-family: Menlo, Monaco, "Courier New", monospace	!default;
$code-font-size: 14px	!default;
$code-line-height: 1.375 !default;
$code-tab-size:	4	!default;
$code-hyphens: none	!default;
$code-block-padding: 12px	!default;
$code-inline-padding:	2px 6px	!default;
$code-border-radius: 5px !default;
$code-border:	1px solid #e1e1e8 !default;
$code-background:	#2a2a2a !default;
$code-color: #fff !default;
$code-color-fade:	#bebec5 !default;
// $code-text-shadow: 0 1px 0 #000 !default;
$code-box-shadow: 1px 1px .3em -.1em #000 inset !default;
$code-color-property: #b58900 !default;
$code-color-important: #cb4b16 !default;
$code-color-tag: #268bd2 !default;
$code-color-atrule: #2aa198 !default;
$code-color-attr-name: #b65611 !default;
// $code-linenums-padding:	7px !default;
// $code-linenums-width:	40px !default;
// $code-linenums-background:	#444 !default;
// $code-linenums-border-color:	#555 !default;
// $code-linenums-border-width:	1px !default;
@if $code-selector != null {	#{$code-selector} {	-moz-tab-size: $code-tab-size;	-o-tab-size: $code-tab-size;	tab-size: $code-tab-size;	-webkit-hyphens: $code-hyphens;	-moz-hyphens: $code-hyphens;	-ms-hyphens: $code-hyphens;	hyphens: $code-hyphens;	// whitespace management	white-space: pre; // fallback	white-space: pre-wrap;	word-break: break-all;	word-wrap: break-word;	font-family: $code-font-family;	font-size:	$code-font-size;	line-height: $code-line-height;	color: $code-color;	// text-shadow: $code-text-shadow;	background: $code-background;	}
}
%code-background {	border-radius: $code-border-radius;	border: $code-border;	box-shadow: $code-box-shadow;
}
@if $code-selector-block != null {	#{$code-selector-block} {	@extend %code-background;	padding: $code-block-padding;	}
}
@if $code-selector-inline != null {	#{$code-selector-inline} {	@extend %code-background;	padding: $code-inline-padding;	}
}
// pre[class*="language-"],
// :not(pre) > code[class*="language-"] {
//	background: $code-background;
// }
// prism tokens
//
$code-color-comment: null !default;
$code-color-keyword: null !default;
$code-color-value: null !default;
$code-color-string:	null !default;
$code-color-name:	null !default;
$code-color-number:	null !default;
$code-color-variable:	null !default;
$code-color-selector:	null !default;
$code-color-punctuation: $code-color-fade !default;
#{$code-selector} {	.namespace {	opacity: .7;	}	.token {	&.comment,	&.prolog,	&.doctype,	&.cdata {	color: $code-color-comment;	}	&.null,	&.operator,	&.boolean,	&.number {	color: $code-color-number;	}	&.string {	color: $code-color-string;	}	&.attr-name {	color: $code-color-attr-name;	}	&.entity,	&.url,	.language-css &.string,	.style &.string {	color: $code-color-string;	}	&.selector {	color: $code-color-selector;	}	&.attr-value,	&.keyword,	&.control,	&.directive,	&.unit {	color: $code-color-keyword;	}	&.important {	color: $code-color-important;	}	&.atrule{	color: $code-color-atrule; }	&.regex,	&.statement {	color: $code-color-value;	}	&.placeholder,	&.variable {	color: $code-color-variable;	}	&.property,	&.tag { // font-style: italic;	}	&.property { color: $code-color-property;	}	&.tag { color: $code-color-tag;	}	&.important,	&.statement {	font-weight: bold;	}	// todo ?	// &.mixin	// &.gradient	// &.abslength	// &.easing	// &.time	// &.angle	// &.fontfamily	// ruby/vim https://github.com/LeaVerou/prism/pull/18	// &.inst-var	// &.builtin	// &.const	// &.symbol	//	// php https://github.com/LeaVerou/prism/pull/20	// &.deliminator	// &.function	&.punctuation {	color: $code-color-punctuation;	}	&.entity {	cursor: help;	}	// for dev :)	&.debug { color: red }	}
}
// generic demo styles
.header h1 .small { font: normal 100%/1.375 AvenirNext-Regular, Corbel, "Segoe Ui", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.base00-background { background-color: $base00; }
.base01-background { background-color: $base01; }
.base02-background { background-color: $base02; }
.base03-background { background-color: $base03; }
.base04-background { background-color: $base04; }
.base05-background { background-color: $base05; }
.base06-background { background-color: $base06; }
.base07-background { background-color: $base07; }
.base08-background,
.red-background { background-color: $red; }
.base09-background,
.orange-background { background-color: $orange; }
.base0A-background,
.yellow-background { background-color: $yellow; }
.base0B-background,
.green-background { background-color: $green; }
.base0C-background,
.cyan-background { background-color: $cyan; }
.base0D-background,
.blue-background { background-color: $blue; }
.base0E-background,
.violet-background { background-color: $violet; }
.base0F-background,
.magenta-background { background-color: $magenta; }
.base00 { color: $base00; }
.base01 { color: $base01; }
.base02 { color: $base02; }
.base03 { color: $base03; }
.base04 { color: $base04; }
.base05 { color: $base05; }
.base06 { color: $base06; }
.base07 { color: $base07; }
.base08,
.red { color: $red; }
.base09,
.orange { color: $orange; }
.base0A,
.yellow { color: $yellow; }
.base0B,
.green { color: $green; }
.base0C,
.cyan { color: $cyan; }
.base0D,
.blue { color: $blue; }
.base0E,
.violet { color: $violet; }
.base0F,
.magenta { color: $magenta; }
pre[class*="language"].base00-background { background-color: $base00;
}
.sh-c { overflow: auto; color: #1b1918 !important;
}
.sh-c-comm { padding: .2em .5em; display: inline-block;
}
.sh-c-light,
.sh-c-light .comment { color: #a8a19f !important;
}
.sh-c-dark,
.sh-c-dark .comment { color: #1b1918 !important;
}
pre[class^="base"] {
padding: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
margin: .5em 0;
}
.language- .break-word { word-break: break-word;
}
code[class*="language-"] { background: none !important /*sorry had to*/; box-shadow: none; }
.new-window { position: relative; padding-right: 16px; &:after { content:''; display: block; width: 14px; height: 12px; position: absolute; top: 10%; right: 0; background: url(https://i.stack.imgur.com/3H2PQ.png) no-repeat; }
}

Sass mixin for Inside Borders - Script Codes JS Codes

//Add a title to the links that open in a new tab/window
$("a[target='_blank']").attr({title:'Opens in a new tab/window'}).addClass('new-window');
/* ********************************************** Begin prism-core.js
********************************************** */
/** * Prism: Lightweight, robust, elegant syntax highlighting * MIT license https://www.opensource.org/licenses/mit-license.php/ * @author Lea Verou http://lea.verou.me */
(function(){
// Private helper vars
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
var _ = self.Prism = {	util: {	type: function (o) {	return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];	},	// Deep clone a language definition (e.g. to extend it)	clone: function (o) {	var type = _.util.type(o);	switch (type) {	case 'Object':	var clone = {};	for (var key in o) {	if (o.hasOwnProperty(key)) {	clone[key] = _.util.clone(o[key]);	}	}	return clone;	case 'Array':	return o.slice();	}	return o;	}	},	languages: {	extend: function (id, redef) {	var lang = _.util.clone(_.languages[id]);	for (var key in redef) {	lang[key] = redef[key];	}	return lang;	},	// Insert a token before another token in a language literal	insertBefore: function (inside, before, insert, root) {	root = root || _.languages;	var grammar = root[inside];	var ret = {};	for (var token in grammar) {	if (grammar.hasOwnProperty(token)) {	if (token == before) {	for (var newToken in insert) {	if (insert.hasOwnProperty(newToken)) {	ret[newToken] = insert[newToken];	}	}	}	ret[token] = grammar[token];	}	}	return root[inside] = ret;	},	// Traverse a language definition with Depth First Search	DFS: function(o, callback) {	for (var i in o) {	callback.call(o, i, o[i]);	if (_.util.type(o) === 'Object') {	_.languages.DFS(o[i], callback);	}	}	}	},	highlightAll: function(async, callback) {	var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');	for (var i=0, element; element = elements[i++];) {	_.highlightElement(element, async === true, callback);	}	},	highlightElement: function(element, async, callback) {	// Find language	var language, grammar, parent = element;	while (parent && !lang.test(parent.className)) {	parent = parent.parentNode;	}	if (parent) {	language = (parent.className.match(lang) || [,''])[1];	grammar = _.languages[language];	}	if (!grammar) {	return;	}	// Set language on the element, if not present	element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;	// Set language on the parent, for styling	parent = element.parentNode;	if (/pre/i.test(parent.nodeName)) {	parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;	}	var code = element.textContent;	if(!code) {	return;	}	code = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');	var env = {	element: element,	language: language,	grammar: grammar,	code: code	};	_.hooks.run('before-highlight', env);	if (async && self.Worker) {	var worker = new Worker(_.filename);	worker.onmessage = function(evt) {	env.highlightedCode = Token.stringify(JSON.parse(evt.data), language);	_.hooks.run('before-insert', env);	env.element.innerHTML = env.highlightedCode;	callback && callback.call(env.element);	_.hooks.run('after-highlight', env);	};	worker.postMessage(JSON.stringify({	language: env.language,	code: env.code	}));	}	else {	env.highlightedCode = _.highlight(env.code, env.grammar, env.language)	_.hooks.run('before-insert', env);	env.element.innerHTML = env.highlightedCode;	callback && callback.call(element);	_.hooks.run('after-highlight', env);	}	},	highlight: function (text, grammar, language) {	return Token.stringify(_.tokenize(text, grammar), language);	},	tokenize: function(text, grammar, language) {	var Token = _.Token;	var strarr = [text];	var rest = grammar.rest;	if (rest) {	for (var token in rest) {	grammar[token] = rest[token];	}	delete grammar.rest;	}	tokenloop: for (var token in grammar) {	if(!grammar.hasOwnProperty(token) || !grammar[token]) {	continue;	}	var pattern = grammar[token],	inside = pattern.inside,	lookbehind = !!pattern.lookbehind,	lookbehindLength = 0;	pattern = pattern.pattern || pattern;	for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop	var str = strarr[i];	if (strarr.length > text.length) {	// Something went terribly wrong, ABORT, ABORT!	break tokenloop;	}	if (str instanceof Token) {	continue;	}	pattern.lastIndex = 0;	var match = pattern.exec(str);	if (match) {	if(lookbehind) {	lookbehindLength = match[1].length;	}	var from = match.index - 1 + lookbehindLength, match = match[0].slice(lookbehindLength), len = match.length, to = from + len,	before = str.slice(0, from + 1),	after = str.slice(to + 1);	var args = [i, 1];	if (before) {	args.push(before);	}	var wrapped = new Token(token, inside? _.tokenize(match, inside) : match);	args.push(wrapped);	if (after) {	args.push(after);	}	Array.prototype.splice.apply(strarr, args);	}	}	}	return strarr;	},	hooks: {	all: {},	add: function (name, callback) {	var hooks = _.hooks.all;	hooks[name] = hooks[name] || [];	hooks[name].push(callback);	},	run: function (name, env) {	var callbacks = _.hooks.all[name];	if (!callbacks || !callbacks.length) {	return;	}	for (var i=0, callback; callback = callbacks[i++];) {	callback(env);	}	}	}
};
var Token = _.Token = function(type, content) {	this.type = type;	this.content = content;
};
Token.stringify = function(o, language, parent) {	if (typeof o == 'string') {	return o;	}	if (Object.prototype.toString.call(o) == '[object Array]') {	return o.map(function(element) {	return Token.stringify(element, language, o);	}).join('');	}	var env = {	type: o.type,	content: Token.stringify(o.content, language, parent),	tag: 'span',	classes: ['token', o.type],	attributes: {},	language: language,	parent: parent	};	if (env.type == 'comment') {	env.attributes['spellcheck'] = 'true';	}	_.hooks.run('wrap', env);	var attributes = '';	for (var name in env.attributes) {	attributes += name + '="' + (env.attributes[name] || '') + '"';	}	return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>';
};
if (!self.document) {	// In worker	self.addEventListener('message', function(evt) {	var message = JSON.parse(evt.data), lang = message.language, code = message.code;	self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang])));	self.close();	}, false);	return;
}
// Get current script and highlight
var script = document.getElementsByTagName('script');
script = script[script.length - 1];
if (script) {	_.filename = script.src;	if (document.addEventListener && !script.hasAttribute('data-manual')) {	document.addEventListener('DOMContentLoaded', _.highlightAll);	}
}
})();
/* ********************************************** Begin prism-markup.js
********************************************** */
Prism.languages.markup = {	'comment': /&lt;!--[\w\W]*?-->/g,	'prolog': /&lt;\?.+?\?>/,	'doctype': /&lt;!DOCTYPE.+?>/,	'cdata': /&lt;!\[CDATA\[[\w\W]*?]]>/i,	'tag': {	pattern: /&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,	inside: {	'tag': {	pattern: /^&lt;\/?[\w:-]+/i,	inside: {	'punctuation': /^&lt;\/?/,	'namespace': /^[\w-]+?:/	}	},	'attr-value': {	pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,	inside: {	'punctuation': /=|>|"/g	}	},	'punctuation': /\/?>/g,	'attr-name': {	pattern: /[\w:-]+/g,	inside: {	'namespace': /^[\w-]+?:/	}	}	}	},	'entity': /&amp;#?[\da-z]{1,8};/gi
};
// Plugin to make entity title show the real entity, idea by Roman Komarov
Prism.hooks.add('wrap', function(env) {	if (env.type === 'entity') {	env.attributes['title'] = env.content.replace(/&amp;/, '&');	}
});
/* ********************************************** Begin prism-css.js
********************************************** */
Prism.languages.css = {	'comment': /\/\*[\w\W]*?\*\//g,	'atrule': {	pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi,	inside: {	'punctuation': /[;:]/g	}	},	'url': /url\((["']?).*?\1\)/gi,	'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g,	'property': /(\b|\B)[\w-]+(?=\s*:)/ig,	'string': /("|')(\\?.)*?\1/g,	'important': /\B!important\b/gi,	'ignore': /&(lt|gt|amp);/gi,	'punctuation': /[\{\};:]/g
};
if (Prism.languages.markup) {	Prism.languages.insertBefore('markup', 'tag', {	'style': {	pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,	inside: {	'tag': {	pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,	inside: Prism.languages.markup.tag.inside	},	rest: Prism.languages.css	}	}	});
}
/* ********************************************** Begin prism-clike.js
********************************************** */
Prism.languages.clike = {	'comment': {	pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,	lookbehind: true	},	'string': /("|')(\\?.)*?\1/g,	'class-name': {	pattern: /((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/ig,	lookbehind: true,	inside: {	punctuation: /(\.|\\)/	}	},	'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,	'boolean': /\b(true|false)\b/g,	'function': {	pattern: /[a-z0-9_]+\(/ig,	inside: {	punctuation: /\(/	}	},	'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,	'operator': /[-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,	'ignore': /&(lt|gt|amp);/gi,	'punctuation': /[{}[\];(),.:]/g
};
/* ********************************************** Begin prism-javascript.js
********************************************** */
Prism.languages.javascript = Prism.languages.extend('clike', {	'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,	'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g
});
Prism.languages.insertBefore('javascript', 'keyword', {	'regex': {	pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,	lookbehind: true	}
});
if (Prism.languages.markup) {	Prism.languages.insertBefore('markup', 'tag', {	'script': {	pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,	inside: {	'tag': {	pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,	inside: Prism.languages.markup.tag.inside	},	rest: Prism.languages.javascript	}	}	});
}
/* ********************************************** Begin prism-file-highlight.js
********************************************** */
(function(){
if (!self.Prism || !self.document || !document.querySelector) {	return;
}
var Extensions = {	'js': 'javascript',	'html': 'markup',	'svg': 'markup'
};
Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) {	var src = pre.getAttribute('data-src');	var extension = (src.match(/\.(\w+)$/) || [,''])[1];	var language = Extensions[extension] || extension;	var code = document.createElement('code');	code.className = 'language-' + language;	pre.textContent = '';	code.textContent = 'Loading…';	pre.appendChild(code);	var xhr = new XMLHttpRequest();	xhr.open('GET', src, true);	xhr.onreadystatechange = function() {	if (xhr.readyState == 4) {	if (xhr.status < 400 && xhr.responseText) {	code.textContent = xhr.responseText;	Prism.highlightElement(code);	}	else if (xhr.status >= 400) {	code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;	}	else {	code.textContent = '✖ Error: File does not exist or is empty';	}	}	};	xhr.send(null);
});
})();
Sass mixin for Inside Borders - Script Codes
Sass mixin for Inside Borders - Script Codes
Home Page Home
Developer Ricardo Zea
Username ricardozea
Uploaded September 28, 2022
Rating 3.5
Size 17,268 Kb
Views 34,408
Do you need developer help for Sass mixin for Inside Borders?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ricardo Zea (ricardozea) Script Codes
Name
Simple Sass Mixin for Width and Height
Line-On-Sides Headers
03 - Custom CSS Grid - Floats
Sass Mixin for Links
Simple aqua button with CSS
CSS Shapes with Sass
CSS Triangles and Arrows
CSS Blinking Text Cursor
Responsive Table CSS
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!