Skip to content
Permalink
Browse files

Details rework

  • Loading branch information...
Depado committed Sep 9, 2019
1 parent 8a203fa commit 07eb1be23c1cf764ede5c67dbf1be2c5e47ae477
Showing with 109 additions and 18 deletions.
  1. +101 −0 assets/sass/_details.scss
  2. +2 −0 assets/sass/_theme.scss
  3. +4 −16 assets/sass/style.scss
  4. +1 −1 assets/style.min.css
  5. +1 −1 assets/style.min.css.map
@@ -0,0 +1,101 @@
@import "theme";

@mixin detail($color, $icon) {
$dark: rgba($color, 0.1);
border-left-color: $color;
> summary {
background-color: $dark;
border-bottom-color: $dark;
&::before {
content: $icon;
color: $color;
}
}
}

details {
$color: $color-note;
$dark: rgba($color, 0.1);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
position: relative;
margin: 1.5em 0;
padding: 0 0.6rem;
border-left: 0.2rem solid $color;
border-radius: 0.1rem;
font-size: 0.8rem;
overflow: auto;
pre {
width: auto;
margin: auto;
}
code {
font-size: 0.75rem;
}
> summary {
margin: 0 -0.6rem;
padding: 0.4rem 0.6rem;
border-bottom: 0.05rem solid $dark;
background-color: $dark;
font-weight: 700;
font-size: 0.75rem;
&::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 0.4rem;
content: $icon-note;
color: $color;
}
}
> summary {
&:first-of-type {
list-style-type: none;
}
&::-webkit-details-marker {
display: none;
}
}
&.note {
@include detail($color-note, $icon-note);
}
&.info {
@include detail($color-info, $icon-note);
}
&.question {
@include detail($color-question, $icon-question);
}
&.hint,
&.tip {
@include detail($color-hint, $icon-hint);
}
&.success {
@include detail($color-success, $icon-success);
}
&.warning,
&.caution {
@include detail($color-warning, $icon-warning);
}
&.danger,
&.error {
@include detail($color-danger, $icon-danger);
}
&.important {
@include detail($color-danger, $icon-important);
}
&.code {
border-left: none;
background-color: $color-code;
> summary {
background-color: #5c5c5c;
border-bottom-color: #5c5c5c;
color: white;
&::before {
content: $icon-code;
color: white;
}
}
pre {
padding: 0;
}
}
}
@@ -25,6 +25,7 @@ $color-info: #00b8d4;
$color-warning: #ff9100;
$color-hint: #009688;
$color-danger: #ff1744;
$color-code: #272822;

// Icons
$icon-note: "\f249";
@@ -34,3 +35,4 @@ $icon-hint: "\f06d";
$icon-success: "\f00c";
$icon-warning: "\f071";
$icon-important: "\f12a";
$icon-code: "\f121";
@@ -1,5 +1,6 @@
@import "admonition";
@import "theme";
@import "details";

html,
button,
@@ -104,11 +105,12 @@ h3 {
hr {
border: 0;
height: 1px;
background: $color-grey;
background: $color-quote;
}
blockquote {
padding-left: 10px;
margin: 0;
margin-left: 0;
margin-right: 0;
border-left: 4px solid $color-quote-border;
color: $color-quote;
overflow: auto;
@@ -127,20 +129,6 @@ nav > ul > li {
padding-top: 0.6em;
}

details {
padding: 5px 10px 5px 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

> summary {
&:first-of-type {
list-style-type: none;
}
&::-webkit-details-marker {
display: none;
}
}
}

summary {
cursor: pointer;
outline: none;

Some generated files are not rendered by default. Learn more.

0 comments on commit 07eb1be

Please sign in to comment.
You can’t perform that action at this time.