beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
Show stats 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)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.1
mini.css version: v3.0.0-alpha.2
*/
/*
Browsers resets and base typography.
@ -1278,20 +1278,6 @@ footer.sticky {
:root {
--mark-back-color: #0277bd;
--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 {
@ -1310,6 +1296,11 @@ mark.inline-block {
padding: calc(var(--universal-padding) / 2) var(--universal-padding);
}
:root {
--toast-back-color: #424242;
--toast-fore-color: #fafafa;
}
.toast {
position: fixed;
bottom: calc(var(--universal-margin) * 3);
@ -1322,6 +1313,11 @@ mark.inline-block {
padding: var(--universal-padding) calc(var(--universal-padding) * 3);
}
:root {
--tooltip-back-color: #212121;
--tooltip-fore-color: #fafafa;
}
.tooltip {
position: relative;
display: inline-block;
@ -1386,6 +1382,12 @@ mark.inline-block {
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 {
height: 1px;
width: 1px;
@ -1451,6 +1453,16 @@ mark.inline-block {
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 {
width: calc(100% - 2 * var(--universal-margin));
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.
- Everything should be ready to release `v3.0.0-alpha.1` tomorrow.
# v3.0.0-alpha.2
## 20171120
- 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.
- 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)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.1
mini.css version: v3.0.0-alpha.2
*/
@import '../mini/core';
@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 {
#{$mark-back-color-var}: $mark-back-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.
mark {
@ -114,6 +100,10 @@ mark {
}
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
@if $_include-toast {
:root {
#{$toast-back-color-var}: $toast-back-color;
#{$toast-fore-color-var}: $toast-fore-color;
}
.#{$toast-name} {
position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 3);
@ -131,6 +121,10 @@ mark {
}
// Styling for tooltips.
@if $_include-tooltip {
:root {
#{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-color;
}
.#{$tooltip-name} {
position: relative;
display: inline-block;
@ -194,6 +188,11 @@ mark {
}
// Styling for modal dialogs.
@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} {
height: 1px;
width: 1px;
@ -256,6 +255,15 @@ mark {
}
// Styling for 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} {
width: calc(100% - 2 * var(#{$universal-margin-var}));
opacity: 1;