davejansen/snikket-web-portal
1
0
Fork 0
Code Issues Pull Requests Activity

Redefine box styles to be independent of primary/accent for semantics

Browse Source
This commit is contained in:
Jonas Schäfer
2021-01-16 14:52:49 +01:00
parent a88c5b92dd
commit 00f678a86f
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
snikket_web/scss/_theme.scss
View File

@@ -56,6 +56,15 @@ $colours: (
] ]
); );
$box-types: (
"primary": "blue",
"accent": "yellow",
"alert": "alert",
"warning": "yellow",
"success": "green",
"hint": "blue"
);
$gray-100: nth(map-get($colours, "gray"), 1); $gray-100: nth(map-get($colours, "gray"), 1);
$gray-200: nth(map-get($colours, "gray"), 2); $gray-200: nth(map-get($colours, "gray"), 2);
$gray-300: nth(map-get($colours, "gray"), 3); $gray-300: nth(map-get($colours, "gray"), 3);

8
snikket_web/scss/app.scss
View File

@@ -594,11 +594,11 @@ button.lv-tertiary, .button.lv-tertiary {
@extend .el-1; @extend .el-1;
@each $type, $values in $colours { @each $type, $colour in $box-types {
&.#{$type} { &.#{$type} {
border-color: nth($values, 2); border-color: nth(map-get($colours, $colour), 2);
background-color: nth($values, 9); background-color: nth(map-get($colours, $colour), 9);
color: nth($values, 1); color: nth(map-get($colours, $colour), 1);
} }
} }
} }

8
snikket_web/templates/demo.html
View File

@@ -61,11 +61,11 @@
<p>The channel was added to your list.</p> <p>The channel was added to your list.</p>
{% endcall %} {% endcall %}
<p>The following box contains a notice:</p> <p>The following box contains a notice:</p>
{% call box("accent", "Quota warning") %} {% call box("warning", "Quota warning") %}
<p>You have nearly reached your HTTP upload storage quota.</p> <p>You have nearly reached your HTTP upload storage quota.</p>
{% endcall %} {% endcall %}
<p>The following box contains a hint:</p> <p>The following box contains a hint:</p>
{% call box("primary", "Update available") %} {% call box("hint", "Update available") %}
<p>There is a new version of the Snikket Server available.</p> <p>There is a new version of the Snikket Server available.</p>
{% endcall %} {% endcall %}
<p>Finally, the following box has unspecified content:</p> <p>Finally, the following box has unspecified content:</p>
@@ -84,11 +84,11 @@
<p>The channel was added to your list.</p> <p>The channel was added to your list.</p>
{% endcall %} {% endcall %}
<p>The following box contains a notice:</p> <p>The following box contains a notice:</p>
{% call box("accent", "Quota warning", slim=True) %} {% call box("warning", "Quota warning", slim=True) %}
<p>You have nearly reached your HTTP upload storage quota.</p> <p>You have nearly reached your HTTP upload storage quota.</p>
{% endcall %} {% endcall %}
<p>The following box contains a hint:</p> <p>The following box contains a hint:</p>
{% call box("primary", "Update available", slim=True) %} {% call box("hint", "Update available", slim=True) %}
<p>There is a new version of the Snikket Server available.</p> <p>There is a new version of the Snikket Server available.</p>
{% endcall %} {% endcall %}
<p>Finally, the following box has unspecified content:</p> <p>Finally, the following box has unspecified content:</p>