aboutsummaryrefslogtreecommitdiff
path: root/_sass/minimal-mistakes/_notices.scss
diff options
context:
space:
mode:
Diffstat (limited to '_sass/minimal-mistakes/_notices.scss')
-rw-r--r--_sass/minimal-mistakes/_notices.scss100
1 files changed, 100 insertions, 0 deletions
diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss
new file mode 100644
index 0000000..7f9b733
--- /dev/null
+++ b/_sass/minimal-mistakes/_notices.scss
@@ -0,0 +1,100 @@
+/* ==========================================================================
+ NOTICE TEXT BLOCKS
+ ========================================================================== */
+
+/**
+ * Default Kramdown usage (no indents!):
+ * <div class="notice" markdown="1">
+ * #### Headline for the Notice
+ * Text for the notice
+ * </div>
+ */
+
+@mixin notice($notice-color) {
+ margin: 2em 0 !important; /* override*/
+ padding: 1em;
+ color: $dark-gray;
+ font-family: $global-font-family;
+ font-size: $type-size-6 !important;
+ text-indent: initial; /* override*/
+ background-color: mix(#fff, $notice-color, 90%);
+ border-radius: $border-radius;
+ box-shadow: 0 1px 1px rgba($notice-color, 0.25);
+
+ h4 {
+ margin-top: 0 !important; /* override*/
+ margin-bottom: 0.75em;
+ }
+
+ @at-root .page__content #{&} h4 {
+ /* using at-root to override .page-content h4 font size*/
+ margin-bottom: 0;
+ font-size: 1em;
+ }
+
+ p {
+ &:last-child {
+ margin-bottom: 0 !important; /* override*/
+ }
+ }
+
+ h4 + p {
+ /* remove space above paragraphs that appear directly after notice headline*/
+ margin-top: 0;
+ padding-top: 0;
+ }
+
+ a {
+ color: $notice-color;
+
+ &:hover {
+ color: mix(#000, $notice-color, 40%);
+ }
+ }
+
+ code {
+ background-color: mix(#fff, $notice-color, 95%)
+ }
+
+ ul {
+ &:last-child {
+ margin-bottom: 0; /* override*/
+ }
+ }
+}
+
+/* Default notice */
+
+.notice {
+ @include notice($light-gray);
+}
+
+/* Primary notice */
+
+.notice--primary {
+ @include notice($primary-color);
+}
+
+/* Info notice */
+
+.notice--info {
+ @include notice($info-color);
+}
+
+/* Warning notice */
+
+.notice--warning {
+ @include notice($warning-color);
+}
+
+/* Success notice */
+
+.notice--success {
+ @include notice($success-color);
+}
+
+/* Danger notice */
+
+.notice--danger {
+ @include notice($danger-color);
+} \ No newline at end of file