From ba25ee88f45ae703a0bcfcc235d7ece82695f70f Mon Sep 17 00:00:00 2001
From: Luiz F. A. de Prá <rawarkanis@gmail.com>
Date: Mon, 22 Mar 2021 15:56:59 +0000
Subject: [PATCH] Fix notice HTML
---
exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content | 32 ++++------
layouts/shortcodes/notice.html | 42 +++----------
assets/scss/_notices.scss | 45 +++++++-------
assets/scss/_variables.scss | 35 +----------
4 files changed, 50 insertions(+), 104 deletions(-)
diff --git a/assets/scss/_notices.scss b/assets/scss/_notices.scss
index 0851332..b854c35 100644
--- a/assets/scss/_notices.scss
+++ b/assets/scss/_notices.scss
@@ -1,27 +1,32 @@
.notice {
- padding: 1rem;
- line-height: 2rem;
- border-radius: 0.5rem;
- p {
- &:last-child {
- margin-bottom: 1.5rem;
+ border-radius: 0.2rem;
+ position: relative;
+ margin: 1rem 0;
+ padding: 0 0.75rem;
+ overflow: auto;
+
+ .title {
+ font-weight: 700;
+ margin: 0 -0.75rem;
+ padding: 0.2rem 3.5rem;
+
+ i {
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
}
}
}
-.notice-title {
- margin: -1rem -1rem 1rem;
- padding: 1rem 1rem;
- border-radius: 0.5rem 0.5rem 0 0;
- font-weight: 700;
- font-family: $font-family;
-}
-
.notice.warning {
- .notice-title {
- background: $bg-color-notice-warning-title;
- }
background: $bg-color-notice-warning;
+
+ .title {
+ background: $bg-color-notice-warning-title;
+
+ i {
+ }
+ }
}
.notice.info {
@@ -44,9 +49,3 @@
}
background: $bg-color-notice-tip;
}
-
-.icon-notice {
- display: inline-flex;
- align-self: center;
- margin-right: 8px;
-}
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index adf7786..a8ad958 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -17,34 +17,7 @@
$alt-fg-color-dark: #dadada !default;
$link-color-dark: #42a5f5 !default;
-// Notice Colors
-$fg-color-notice-title: #fafafa !default;
-$fg-color-notice-title-dark: #212121 !default;
-
-// Each notice have two background color. One for title and one for contents
-$bg-color-notice-note-title: #6ab0de !default;
-$bg-color-notice-note: #e7f2fa !default;
-
-$bg-color-notice-warning-title: #d9534fe6 !default;
-$bg-color-notice-warning: #fae2e2 !default;
-
-$bg-color-notice-info-title: #f0b37e !default;
-$bg-color-notice-info: #fff2db !default;
-
-$bg-color-notice-tip-title: #5dd45dcc !default;
-$bg-color-notice-tip: #e6f9e6 !default;
-
-// Notice Colors dark
-$fg-colour-notice-text: #000000;
-
-$bg-color-notice-note-title-dark: #2384c6 !default;
-$bg-color-notice-note-dark: #3498db !default;
-
-$bg-color-notice-warning-title-dark: #d71c16 !default;
-$bg-color-notice-warning-dark: #ee5f5b !default;
-
-$bg-color-notice-info-title-dark: #d4860b !default;
-$bg-color-notice-info-dark: #f39c12 !default;
-
-$bg-color-notice-tip-title-dark: #379337 !default;
-$bg-color-notice-tip-dark: #62c462 !default;
+// Notice colors
+$fg-color-notice-icon: #fafafa !default;
+$bg-color-notice-title: #212121 !default;
+$bg-color-notice-content: #212121 !default;
diff --git a/exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content b/exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content
index 6ba727e..728686d 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content
@@ -3228,22 +3228,23 @@
.centered .error h2 {
font-size: 2.8rem; } }
.notice {
- padding: 1rem;
- line-height: 2rem;
- border-radius: 0.5rem; }
- .notice p:last-child {
- margin-bottom: 1.5rem; }
-
-.notice-title {
- margin: -1rem -1rem 1rem;
- padding: 1rem 1rem;
- border-radius: 0.5rem 0.5rem 0 0;
- font-weight: 700;
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }
+ border-radius: 0.2rem;
+ position: relative;
+ margin: 1rem 0;
+ padding: 0 0.75rem;
+ overflow: auto; }
+ .notice .title {
+ font-weight: 700;
+ margin: 0 -0.75rem;
+ padding: 0.2rem 3.5rem; }
+ .notice .title i {
+ position: absolute;
+ top: 1rem;
+ left: 1rem; }
.notice.warning {
background: #fae2e2; }
- .notice.warning .notice-title {
+ .notice.warning .title {
background: #d9534fe6; }
.notice.info {
@@ -3261,11 +3262,6 @@
.notice.tip .notice-title {
background: #5dd45dcc; }
-.icon-notice {
- display: inline-flex;
- align-self: center;
- margin-right: 8px; }
-
.navigation {
height: 6rem;
width: 100%; }
diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html
index e7ee58b..c347dbc 100644
--- a/layouts/shortcodes/notice.html
+++ b/layouts/shortcodes/notice.html
@@ -1,35 +1,13 @@
-{{ $noticeType := .Get 0 }}
+{{ $type := .Get 0 }}
+{{ $title := default ( .Get 1 ) $type }}
{{ $raw := (markdownify .Inner | chomp) }}
{{ $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 }}
-<div class="notice {{ $noticeType }}">
- <p class="notice-title">
- <span class="icon-notice baseline">
- {{ if eq $noticeType "note" }}
- <i class="fa fa-info-circle" aria-hidden="true"></i>
- {{ end}}
- {{ if eq $noticeType "warning" }}
- <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
- {{ end}}
- {{ if eq $noticeType "tip" }}
- <i class="fa fa-check" aria-hidden="true"></i>
- {{ end}}
- {{ if eq $noticeType "info" }}
- <i class="fa fa-info" aria-hidden="true"></i>
- {{ end}}
- </span>
-
- {{ if eq $noticeType "note" }}
- {{ i18n "notice_note" }}
- {{ end}}
- {{ if eq $noticeType "warning" }}
- {{ i18n "notice_warning" }}
- {{ end}}
- {{ if eq $noticeType "tip" }}
- {{ i18n "notice_tip" }}
- {{ end}}
- {{ if eq $noticeType "info" }}
- {{ i18n "notice_info" }}
- {{ end}}
- </p>
- {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
+{{ $icon := dict "note" "fa-sticky-note" "tip" "fa-lightbulb-o" "example" "fa-file-text" "question" "fa-question" "info" "fa-exclamation-circle" "warning" "fa-exclamation-triangle" "error" "fa-times-circle" }}
+<div class="notice {{ $type }}">
+ <div class="title">
+ <i class="fa {{ index $icon $type }}" aria-hidden="true"></i>{{ i18n $title | default $title | title }}
+ </div>
+ <div class="content">
+ {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
+ </div>
</div>
--
Gitblit v1.10.0