feat(clayui.com): Styles for collapsible code

matuzalemsteles · Jan 16, 2020 · 9b490e9 · 9b490e9
1 parent 3fb3531
commit 9b490e9
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 78 deletions.
diff --git a/clayui.com/src/styles/_code.scss b/clayui.com/src/styles/_code.scss
@@ -11,34 +11,50 @@
 	white-space: pre;
 }
 
-.code-container .btn-copy {
+.code-container .btn-copy,
+.code-container .btn-collapse,
+.gatsby-highlight .btn-copy,
+.gatsby-highlight .btn-collapse {
 	@include transition(background 0.3s ease-in-out);
 
 	animation: fadeIn 0.5s cubic-bezier(0.3, 0, 0.3, 1) 0s 1 forwards;
 	background: rgba(255, 255, 255, 0.6);
+	box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.3);
 	cursor: pointer;
-	height: 24px;
-	line-height: 20px;
+	height: 32px;
 	padding: 0;
 	position: absolute;
-	right: 5px;
 	top: 5px;
-	width: 24px;
+	width: 32px;
 	z-index: 9;
 
-	&:focus {
-		box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
+	&:hover {
+		background: rgba(255, 255, 255, 0.8);
+	}
+
+	.lexicon-icon {
+		vertical-align: baseline;
 	}
 }
 
-.code-container .btn-copy .lexicon-icon {
-	height: 12px;
-	vertical-align: baseline;
-	width: 12px;
+.code-container .btn-copy {
+	right: 46px;
 }
 
-.code-container.btn-copy:hover {
-	background: rgba(255, 255, 255, 0.8);
+.code-container .btn-collapse {
+	right: 8px;
+}
+
+.gatsby-highlight .btn-copy {
+	right: 46px;
+}
+
+.gatsby-highlight .btn-collapse {
+	right: 8px;
+}
+
+.code-container .btn-collapse.hide {
+	display: none;
 }
 
 .tooltip.bottom {

diff --git a/clayui.com/src/styles/_prismjs.scss b/clayui.com/src/styles/_prismjs.scss
@@ -1,7 +1,7 @@
 $dark: #f5f5f8; // 282a36
-$white: #30313F; // ffffff
+$white: #30313f; // ffffff
 
-$char: #D8DEE9;
+$char: #d8dee9;
 $comment: #999;
 $keyword: #2f6f9f;
 $attribute: #4f9fcf;
@@ -10,142 +10,144 @@ $primitive: #5a9bcf;
 $string: #c23c20;
 $variable: #999;
 $boolean: #ff8b50;
-$punctuation: #30313F;
-$tag: #30313F;
+$punctuation: #30313f;
+$tag: #30313f;
 $function: #79b6f2;
 $className: #2f6f9f;
-$method: #6699CC;
+$method: #6699cc;
 $operator: #2f6f9f;
 $deleted: #b31d28;
 $deletedBack: #ffeef0;
 $inserted: #22863a;
 $insertedBack: #f0fff4;
 
 .gatsby-highlight {
-    background: $dark;
-    color: $white;
-    border-radius: 4px;
-    overflow: auto;
-    tab-size: 1.5em;
+	background: $dark;
+	color: $white;
+	border-radius: 4px;
+	min-height: 42px;
+	overflow: auto;
+	position: relative;
+	tab-size: 1.5em;
 }
 
-.gatsby-highlight pre[class*="gatsby-code-"],
+.gatsby-highlight pre[class*='gatsby-code-'],
 .gatsby-highlight pre.prism-code {
-    height: auto !important;
-    margin: 1rem;
-    color: $white;
-    font-size: 13px;
-    line-height: 20px;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-  
+	height: auto !important;
+	margin: 1rem;
+	color: $white;
+	font-size: 13px;
+	line-height: 20px;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
 .gatsby-highlight + .gatsby-highlight {
-    margin-top: 20;
+	margin-top: 20;
 }
 
 .gatsby-highlight-code-line {
-    background-color: $lineHighlight;
-    display: block;
-    margin: -0.125rem calc(-1rem - 15px);
-    padding: 0.125rem calc(1rem + 15px);
+	background-color: $lineHighlight;
+	display: block;
+	margin: -0.125rem calc(-1rem - 15px);
+	padding: 0.125rem calc(1rem + 15px);
 }
-  
+
 .token.attr-name {
-    color: $attribute,
+	color: $attribute;
 }
-  
+
 .token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: $comment;
+	color: $comment;
 }
-  
+
 .token.property,
 .token.number,
 .token.function-name,
 .token.constant,
 .token.symbol {
-    color: $primitive;
+	color: $primitive;
 }
 
 .token.deleted {
-    background-color: $deletedBack;
-    color: $deleted;
+	background-color: $deletedBack;
+	color: $deleted;
 }
-  
+
 .token.boolean {
-    color: $boolean;
+	color: $boolean;
 }
-  
+
 .token.tag {
-    color: $tag;
+	color: $tag;
 }
-  
+
 .token.string {
-color: $string;
+	color: $string;
 }
-  
+
 .token.punctuation {
-    color: $punctuation;
+	color: $punctuation;
 }
-  
+
 .token.selector,
 .token.char,
 .token.builtin {
-    color: $char;
+	color: $char;
 }
 
 .token.inserted {
-    color: $inserted;
-    background-color: $insertedBack;
+	color: $inserted;
+	background-color: $insertedBack;
 }
-  
+
 .token.function {
-    color: $function;
+	color: $function;
 }
 
 .token.operator {
-    color: $operator;
+	color: $operator;
 }
 
 .token.entity,
 .token.url,
 .token.variable {
-    color: $variable;
+	color: $variable;
 }
-  
+
 .token.attr-value {
-    color: $string;
+	color: $string;
 }
-  
+
 .token.keyword {
-    color: $keyword;
+	color: $keyword;
 }
-  
+
 .token.atrule,
 .token.class-name {
-    color: $className;
+	color: $className;
 }
-  
+
 .token.important {
-    font-weight: 400;
+	font-weight: 400;
 }
-  
+
 .token.bold {
-    font-weight: 700;
+	font-weight: 700;
 }
 
 .token.italic {
-    font-style: italic;
+	font-style: italic;
 }
-  
+
 .token.entity {
-    cursor: help;
+	cursor: help;
 }
-  
+
 .namespace {
-    opacity: 0.7;
-}
+	opacity: 0.7;
+}