Fix notice HTML

Luiz F. A. de Prá

22.56.2021 ba25ee88f45ae703a0bcfcc235d7ece82695f70f

Fix notice HTML

 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;
}

 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;

 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%; }

 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>