mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 21:37:23 +02:00
Code Issues Releases Wiki Activity

Contextual cleanup

Browse Source
This commit is contained in:
Angelos Chalaris
2017-12-11 14:58:53 +02:00
parent 744f48abe2
commit 43202ddd2b
5 changed files with 55 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
dist/mini-default.css vendored
View File

@@ -3,7 +3,7 @@
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.1 mini.css version: v3.0.0-alpha.2
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.
@@ -1278,20 +1278,6 @@ footer.sticky {
:root { :root {
--mark-back-color: #0277bd; --mark-back-color: #0277bd;
--mark-fore-color: #fafafa; --mark-fore-color: #fafafa;
--toast-back-color: #424242;
--toast-fore-color: #fafafa;
--tooltip-back-color: #212121;
--tooltip-fore-color: #fafafa;
--modal-overlay-color: rgba(0, 0, 0, 0.45);
--modal-close-color: #444;
--modal-close-hover-color: #f0f0f0;
--collapse-label-back-color: #e8e8e8;
--collapse-label-fore-color: #212121;
--collapse-label-hover-back-color: #f0f0f0;
--collapse-selected-label-back-color: #ececec;
--collapse-border-color: #ddd;
--collapse-content-back-color: #fafafa;
--collapse-selected-label-border-color: #0277bd;
} }
mark { mark {
@@ -1310,6 +1296,11 @@ mark.inline-block {
padding: calc(var(--universal-padding) / 2) var(--universal-padding); padding: calc(var(--universal-padding) / 2) var(--universal-padding);
} }
:root {
--toast-back-color: #424242;
--toast-fore-color: #fafafa;
}
.toast { .toast {
position: fixed; position: fixed;
bottom: calc(var(--universal-margin) * 3); bottom: calc(var(--universal-margin) * 3);
@@ -1322,6 +1313,11 @@ mark.inline-block {
padding: var(--universal-padding) calc(var(--universal-padding) * 3); padding: var(--universal-padding) calc(var(--universal-padding) * 3);
} }
:root {
--tooltip-back-color: #212121;
--tooltip-fore-color: #fafafa;
}
.tooltip { .tooltip {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -1386,6 +1382,12 @@ mark.inline-block {
margin-top: calc(2 * var(--universal-margin)); margin-top: calc(2 * var(--universal-margin));
} }
:root {
--modal-overlay-color: rgba(0, 0, 0, 0.45);
--modal-close-color: #444;
--modal-close-hover-color: #f0f0f0;
}
[type="checkbox"].modal { [type="checkbox"].modal {
height: 1px; height: 1px;
width: 1px; width: 1px;
@@ -1451,6 +1453,16 @@ mark.inline-block {
z-index: 1211; z-index: 1211;
} }
:root {
--collapse-label-back-color: #e8e8e8;
--collapse-label-fore-color: #212121;
--collapse-label-hover-back-color: #f0f0f0;
--collapse-selected-label-back-color: #ececec;
--collapse-border-color: #ddd;
--collapse-content-back-color: #fafafa;
--collapse-selected-label-border-color: #0277bd;
}
.collapse { .collapse {
width: calc(100% - 2 * var(--universal-margin)); width: calc(100% - 2 * var(--universal-margin));
opacity: 1; opacity: 1;

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
docs/v3/DEVLOG.md
View File

@@ -194,6 +194,8 @@
- Generated new favicons. - Generated new favicons.
- Everything should be ready to release `v3.0.0-alpha.1` tomorrow. - Everything should be ready to release `v3.0.0-alpha.1` tomorrow.
# v3.0.0-alpha.2
## 20171120 ## 20171120
- Updated `.drawer` documentation to include customization. - Updated `.drawer` documentation to include customization.
@@ -222,3 +224,5 @@
- Added `.modal` component. Breaking changes to comply with the new guidelines (i.e. apply the class on the `checkbox` element, not the element after it, much like `.drawer`). Cleaned up a little bit, dealt with a few problems here and there. Custom styling for the `.modal-close`, not bound to anything else. - Added `.modal` component. Breaking changes to comply with the new guidelines (i.e. apply the class on the `checkbox` element, not the element after it, much like `.drawer`). Cleaned up a little bit, dealt with a few problems here and there. Custom styling for the `.modal-close`, not bound to anything else.
- Moved vertical version of `.tabs` into `contextual` under `.collapse`. Reduced complexity, improved performance and generally a better feel to them. - Moved vertical version of `.tabs` into `contextual` under `.collapse`. Reduced complexity, improved performance and generally a better feel to them.
- **Hugging cat** was messing with the `DEVLOG`, good thing I noticed and fixed it.
- Moved component-specific variable definitions in `contextual` under the related conditionals.

2
src/flavors/mini-default.scss
View File

@@ -5,7 +5,7 @@
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.1 mini.css version: v3.0.0-alpha.2
*/ */
@import '../mini/core'; @import '../mini/core';
@import '../mini/layout'; @import '../mini/layout';

36
src/mini/_contextual.scss
View File

@@ -77,20 +77,6 @@ $collapse-selected-label-border-color-var: '--collapse-selected-label-border-col
:root { :root {
#{$mark-back-color-var}: $mark-back-color; #{$mark-back-color-var}: $mark-back-color;
#{$mark-fore-color-var}: $mark-fore-color; #{$mark-fore-color-var}: $mark-fore-color;
#{$toast-back-color-var}: $toast-back-color;
#{$toast-fore-color-var}: $toast-fore-color;
#{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-color;
#{$modal-overlay-color-var}: $modal-overlay-color;
#{$modal-close-color-var}: $modal-close-color;
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
#{$collapse-label-back-color-var}: $collapse-label-back-color;
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
#{$collapse-border-color-var}: $collapse-border-color;
#{$collapse-content-back-color-var} : $collapse-content-back-color;
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
} }
// Default styling for mark. Use mixins for alternate styles. // Default styling for mark. Use mixins for alternate styles.
mark { mark {
@@ -114,6 +100,10 @@ mark {
} }
// Styling for toasts. - No border styling, I think it's unnecessary anyways. // Styling for toasts. - No border styling, I think it's unnecessary anyways.
@if $_include-toast { @if $_include-toast {
:root {
#{$toast-back-color-var}: $toast-back-color;
#{$toast-fore-color-var}: $toast-fore-color;
}
.#{$toast-name} { .#{$toast-name} {
position: fixed; position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 3); bottom: calc(var(#{$universal-margin-var}) * 3);
@@ -131,6 +121,10 @@ mark {
} }
// Styling for tooltips. // Styling for tooltips.
@if $_include-tooltip { @if $_include-tooltip {
:root {
#{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-color;
}
.#{$tooltip-name} { .#{$tooltip-name} {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -194,6 +188,11 @@ mark {
} }
// Styling for modal dialogs. // Styling for modal dialogs.
@if $_include-modal { @if $_include-modal {
:root {
#{$modal-overlay-color-var}: $modal-overlay-color;
#{$modal-close-color-var}: $modal-close-color;
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
}
[type="checkbox"].#{$modal-name} { [type="checkbox"].#{$modal-name} {
height: 1px; height: 1px;
width: 1px; width: 1px;
@@ -256,6 +255,15 @@ mark {
} }
// Styling for collapse. // Styling for collapse.
@if $_include-collapse { @if $_include-collapse {
:root {
#{$collapse-label-back-color-var}: $collapse-label-back-color;
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
#{$collapse-border-color-var}: $collapse-border-color;
#{$collapse-content-back-color-var} : $collapse-content-back-color;
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
}
.#{$collapse-name} { .#{$collapse-name} {
width: calc(100% - 2 * var(#{$universal-margin-var})); width: calc(100% - 2 * var(#{$universal-margin-var}));
opacity: 1; opacity: 1;