mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Updated Nord flavor
The Nord flavor has been updated to the latest version. Alerts and the .nano progress bar have been removed, the .toast has been added using the color palette that the flavor uses (as far as I understand it), the alert colors have been move to .card color variants, .drawer has been added using the colors of <nav>, generic shadows remain unchanged, based on the fact that the flavor still uses shadows, the .drawer component does not have a shadow by the way (I think it causes some problems, but this requires further testing). If anyone wants to update the flavor, please refer to this commit!
This commit is contained in:
Angelos Chalaris
parent
8bb3c18d97
commit
38bfc6ea6e
198
dist/mini-nord.css
vendored
198
dist/mini-nord.css
vendored
@ -1167,6 +1167,75 @@ footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.drawer-toggle:before {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
font-family: sans-serif;
|
||||
font-size: 40px;
|
||||
line-height: 0.125;
|
||||
content: '\2261';
|
||||
}
|
||||
|
||||
.drawer {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 320px;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: #ECEFF4;
|
||||
border: 1px solid #D8DEE9;
|
||||
margin: 0;
|
||||
z-index: 1110;
|
||||
}
|
||||
|
||||
.drawer:not(.right) {
|
||||
left: -320px;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.drawer.right {
|
||||
right: -320px;
|
||||
transition: right 0.3s;
|
||||
}
|
||||
|
||||
.drawer .close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 4px;
|
||||
z-index: 1111;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.drawer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.drawer:not(.persistent) {
|
||||
position: static;
|
||||
height: 100%;
|
||||
z-index: 1100;
|
||||
}
|
||||
.drawer:not(.persistent) .close {
|
||||
display: none;
|
||||
}
|
||||
.drawer-toggle:not(.persistent) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .drawer:not(.right) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .drawer.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
@ -1469,17 +1538,30 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.card.inverse {
|
||||
background: #2E3440;
|
||||
.card.warning {
|
||||
background: #EBCB8B;
|
||||
border: 1px solid #D08770;
|
||||
}
|
||||
|
||||
.card.warning > .section {
|
||||
border-bottom: 1px solid #D08770;
|
||||
}
|
||||
|
||||
.card.warning > .section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card.error {
|
||||
background: #BF616A;
|
||||
color: #ECEFF4;
|
||||
border: 1px solid #3B4252;
|
||||
border: 1px solid #BF616A;
|
||||
}
|
||||
|
||||
.card.inverse > .section {
|
||||
border-bottom: 1px solid #434C5E;
|
||||
.card.error > .section {
|
||||
border-bottom: 1px solid #BF616A;
|
||||
}
|
||||
|
||||
.card.inverse > .section:last-child {
|
||||
.card.error > .section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@ -1650,6 +1732,18 @@ mark.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
background: #424242;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #ECEFF4;
|
||||
border-radius: 2rem;
|
||||
padding: 12px 24px;
|
||||
z-index: 1111;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -1720,53 +1814,6 @@ mark.inline-block {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes alert-anim {
|
||||
45% {
|
||||
-webkit-transform: scale(1);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1.005);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
}
|
||||
55% {
|
||||
-webkit-transform: scale(1);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes alert-anim {
|
||||
45% {
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.005);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
55% {
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
display: block;
|
||||
border: 1px solid #D8DEE9;
|
||||
margin: 1px 10px;
|
||||
padding: 12px 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.alert.animated {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation: alert-anim 6s linear infinite;
|
||||
animation: alert-anim 6s linear infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
@ -1789,21 +1836,14 @@ mark.inline-block {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.alert.urgent {
|
||||
background: #EBCB8B;
|
||||
.toast.small {
|
||||
border-radius: 24px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.alert.critical {
|
||||
background: #BF616A;
|
||||
color: #ECEFF4;
|
||||
}
|
||||
|
||||
.alert.urgent {
|
||||
border: 1px solid #D08770;
|
||||
}
|
||||
|
||||
.alert.critical {
|
||||
border: 1px solid #BF616A;
|
||||
.toast.large {
|
||||
border-radius: 48px;
|
||||
padding: 18px 36px;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -1912,32 +1952,6 @@ progress.tertiary::-moz-progress-bar {
|
||||
background: #A3BE8C;
|
||||
}
|
||||
|
||||
progress.nano {
|
||||
height: 2px;
|
||||
width: calc(100% - 0);
|
||||
margin: 0 0;
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
progress.nano::-webkit-progress-value {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
progress.nano::-moz-progress-bar {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
progress.nano[value="1000"]::-webkit-progress-value {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
progress.nano[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #D8DEE9;
|
||||
border-left: 4px solid #BF616A;
|
||||
|
||||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1163,3 +1163,4 @@
|
||||
- Updated `flavors.html` and `templates.html`, both now use the new menu and the tags are updated for the flavor doc.
|
||||
- Updated `quick_reference.html` with new navigation, new tag, checked everything.
|
||||
- Updated menus in all `customization` pages.
|
||||
- Updated `mini-nord` to use the new components.
|
||||
|
||||
@ -286,6 +286,23 @@ $nav-include-sublink-bar: true; // Should a left border bar be added t
|
||||
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: $nav-back-color; // Background color of the drawer component
|
||||
$drawer-border-style: $nav-border-style; // Border style of the drawer component
|
||||
$drawer-width: 320px; // Width of the drawer component
|
||||
$drawer-padding: 0; // Padding of the drawer component
|
||||
$drawer-box-shadow: none; // Box shadow for the drawer component
|
||||
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
|
||||
$drawer-normal-height: calc(100vh - 48px); // Height of the drawer component when shown as normal menu
|
||||
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
|
||||
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
|
||||
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
|
||||
$drawer-toggle-font-size: 40px; // Font size for the drawer component's toggle icon
|
||||
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
|
||||
$drawer-toggle-top: 7px; // Top position for the drawer component's toggle icon
|
||||
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
|
||||
$drawer-close-top: 12px; // Top position of the drawer component's close icon
|
||||
$drawer-close-right: 4px; // Right position of the drawer component's close icon
|
||||
$footer-back-color: #434C5E; // Background color for <footer>
|
||||
$footer-fore-color: #ECEFF4; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
@ -352,12 +369,18 @@ $card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'inverse'; // Class name for card style 1
|
||||
$card-style1-back-color: $fore-color; // Background color for card style 1
|
||||
$card-style1-fore-color: #ECEFF4; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #3B4252; // Border style for card style 1
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #EBCB8B; // Background color for card style 1
|
||||
$card-style1-fore-color: $fore-color; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #D08770; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style: 1px solid #434C5E; // Border style for card style 1 sections
|
||||
$card-style1-section-border-style:1px solid #D08770;// Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #BF616A; // Background color for card style 2
|
||||
$card-style2-fore-color: #ECEFF4; // Text color for card style 2
|
||||
$card-style2-border-style: 1px solid #BF616A; // Border style for card style 2
|
||||
$card-style2-border-radius: 0; // Border radius for card style 2
|
||||
$card-style2-section-border-style:1px solid #BF616A;// Border style for card style 2 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color:#ECEFF4; // Background color for card section style 1
|
||||
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
|
||||
@ -413,30 +436,23 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 5px; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 100%; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
|
||||
$include-toast: false; // Should the toast component be included? (`true`/`false`)
|
||||
$include-alerts: true; // Should the alert component be included? (`true`/`false`)
|
||||
$alert-name: 'alert'; // Class name for alerts
|
||||
$alert-back-color: #ECEFF4; // Background color for alerts
|
||||
$alert-fore-color: $fore-color; // Text color for alerts
|
||||
$alert-border-style: 1px solid #D8DEE9; // Border style for alerts
|
||||
$alert-border-radius: 0; // Border radius for alerts
|
||||
$alert-padding: 12px 16px; // Padding for alerts
|
||||
$alert-margin: 1px 10px; // Margin for alerts
|
||||
$alert-box-shadow: // Box shadow for alerts
|
||||
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
||||
$alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
|
||||
$alert-animated-class: 'animated'; // Class name for animated alerts
|
||||
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
|
||||
$alert-variant1-back-color: #EBCB8B; // Background color for alert variant 1
|
||||
$alert-variant2-name: 'critical'; // Class name for alert variant 2
|
||||
$alert-variant2-back-color: #BF616A; // Background color for alert variant 2
|
||||
$alert-variant2-fore-color: #ECEFF4; // Text color for alert variant 2
|
||||
$alert-style1-name: 'urgent'; // Class name for alert style 1
|
||||
$alert-style1-border-style: 1px solid #D08770; // Border style for alert style 1
|
||||
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
|
||||
$alert-style2-name: 'critical'; // Class name for alert style 2
|
||||
$alert-style2-border-style: 1px solid #BF616A; // Border style for alert style 2
|
||||
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
|
||||
$include-toast: true; // Should the toast component be included? (`true`/`false`)
|
||||
$toast-name: 'toast'; // Class name for toast component
|
||||
$toast-bottom: 24px; // Bottom position for toasts
|
||||
$toast-back-color: #424242; // Background color for toasts
|
||||
$toast-fore-color: #ECEFF4; // Text color for toasts
|
||||
$toast-border-style: 0; // Border style for toasts
|
||||
$toast-border-radius: 2rem; // Border radius for toasts
|
||||
$toast-padding: 12px 24px; // Padding for toasts
|
||||
$toast-box-shadow: none; // Box shadow for toasts
|
||||
$toast-style1-name: 'small'; // Class name for toast style 1
|
||||
$toast-style1-border-style: 0; // Border style for toast style 1
|
||||
$toast-style1-border-radius:24px; // Border radius for toast style 1
|
||||
$toast-style1-padding: 8px 16px; // Padding for toast style 1
|
||||
$toast-style2-name: 'large'; // Class name for toast style 2
|
||||
$toast-style2-border-style: 0; // Border style for toast style 2
|
||||
$toast-style2-border-radius:48px; // Border radius for toast style 2
|
||||
$toast-style2-padding: 18px 36px; // Padding for toast style 2
|
||||
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||
@ -470,12 +486,6 @@ $progress-variant1-name: 'secondary'; // Class name for <progress> variant
|
||||
$progress-variant1-fore-color: #BF616A; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
||||
$progress-variant2-fore-color: #A3BE8C; // Progress bar color for <progress> variant 2
|
||||
$progress-style1-name: 'nano'; // Class name for <progress> style 1
|
||||
$progress-style1-height: 2px; // Height for <progress> style 1
|
||||
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
|
||||
$progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
|
||||
$progress-style1-border-style: 0; // Border style for <progress> style 1
|
||||
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #D8DEE9; // Background color for donut spinner
|
||||
@ -573,6 +583,8 @@ $include-center-block-name: false; // Should center block be included? (`
|
||||
@include make-card-alt-size ($card-size3-name, $card-size3-width);
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
|
||||
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
|
||||
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
|
||||
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color);
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
@ -589,10 +601,10 @@ $include-center-block-name: false; // Should center block be included? (`
|
||||
$mark-style1-border-radius, $mark-style1-padding);
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
|
||||
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
|
||||
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
|
||||
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
|
||||
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
|
||||
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
|
||||
$toast-style1-border-radius, $toast-style1-padding);
|
||||
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
|
||||
$toast-style2-border-radius, $toast-style2-padding);
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
@ -600,9 +612,6 @@ $include-center-block-name: false; // Should center block be included? (`
|
||||
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
|
||||
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
|
||||
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
|
||||
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
|
||||
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
|
||||
$progress-style1-border-style, $progress-style1-border-radius);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user