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

Modal dialog

Browse Source
This commit is contained in:
Angelos Chalaris
2017-12-11 12:10:56 +02:00
parent b7e6c60dda
commit 6aff8f5957
4 changed files with 150 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
dist/mini-default.css vendored
View File

@@ -1282,6 +1282,9 @@ footer.sticky {
--toast-fore-color: #fafafa; --toast-fore-color: #fafafa;
--tooltip-back-color: #212121; --tooltip-back-color: #212121;
--tooltip-fore-color: #fafafa; --tooltip-fore-color: #fafafa;
--modal-overlay-color: rgba(0, 0, 0, 0.45);
--modal-close-color: #444;
--modal-close-hover-color: #f0f0f0;
} }
mark { mark {
@@ -1376,6 +1379,71 @@ mark.inline-block {
margin-top: calc(2 * var(--universal-margin)); margin-top: calc(2 * var(--universal-margin));
} }
[type="checkbox"].modal {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
[type="checkbox"].modal + div {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: var(--modal-overlay-color);
}
[type="checkbox"].modal + div .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
}
[type="checkbox"].modal + div .card .modal-close {
position: absolute;
top: 0;
right: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--universal-border-radius);
padding: var(--universal-padding);
margin: 0;
cursor: pointer;
transition: background 0.3s;
}
[type="checkbox"].modal + div .card .modal-close:before {
display: block;
content: '\00D7';
color: var(--modal-close-color);
position: relative;
font-family: sans-serif;
font-size: 1.75rem;
line-height: 1;
text-align: center;
}
[type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus {
background: var(--modal-close-hover-color);
}
[type="checkbox"].modal:checked + div {
display: flex;
flex: 0 1 auto;
z-index: 1200;
}
[type="checkbox"].modal:checked + div .card .modal-close {
z-index: 1211;
}
/* /*
Custom elements for contextual background elements, toasts and tooltips. Custom elements for contextual background elements, toasts and tooltips.
*/ */

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

@@ -217,3 +217,7 @@
- Apparently the `-webkit-clip-path` is necessary for best support. Remind **hugging cat** every time from now on. - Apparently the `-webkit-clip-path` is necessary for best support. Remind **hugging cat** every time from now on.
- Removed legacy support from `tooltip`'s tail. I mean everything uses `calc` now, so what's the use to keep that in? - Removed legacy support from `tooltip`'s tail. I mean everything uses `calc` now, so what's the use to keep that in?
- I am removing `-webkit-transform`, it seems unnecessary now. - I am removing `-webkit-transform`, it seems unnecessary now.
## 20171211
- 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.

75
src/mini/_contextual.scss
View File

@@ -15,6 +15,13 @@ $tooltip-name: 'tooltip' !default; // Class name for tooltip compo
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
$tooltip-back-color: #212121 !default; // Background color for tooltip component $tooltip-back-color: #212121 !default; // Background color for tooltip component
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component $tooltip-fore-color: #fafafa !default; // Text color for tooltip component
$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
$modal-name: 'modal' !default; // Class name for modal dialog component
$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
// CSS variable name definitions [exercise caution if modifying these] // CSS variable name definitions [exercise caution if modifying these]
$mark-back-color-var: '--mark-back-color' !default; $mark-back-color-var: '--mark-back-color' !default;
$mark-fore-color-var: '--mark-fore-color' !default; $mark-fore-color-var: '--mark-fore-color' !default;
@@ -22,6 +29,9 @@ $toast-back-color-var: '--toast-back-color' !default;
$toast-fore-color-var: '--toast-fore-color' !default; $toast-fore-color-var: '--toast-fore-color' !default;
$tooltip-back-color-var: '--tooltip-back-color' !default; $tooltip-back-color-var: '--tooltip-back-color' !default;
$tooltip-fore-color-var: '--tooltip-fore-color' !default; $tooltip-fore-color-var: '--tooltip-fore-color' !default;
$modal-overlay-color-var: '--modal-overlay-color' !default;
$modal-close-color-var: '--modal-close-color' !default;
$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
// == Uncomment below code if this module is used on its own == // == Uncomment below code if this module is used on its own ==
// //
// $base-line-height: 1.5 !default; // Line height for most elements // $base-line-height: 1.5 !default; // Line height for most elements
@@ -53,6 +63,9 @@ $tooltip-fore-color-var: '--tooltip-fore-color' !default;
#{$toast-fore-color-var}: $toast-fore-color; #{$toast-fore-color-var}: $toast-fore-color;
#{$tooltip-back-color-var}: $tooltip-back-color; #{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-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;
} }
// Default styling for mark. Use mixins for alternate styles. // Default styling for mark. Use mixins for alternate styles.
mark { mark {
@@ -154,3 +167,65 @@ mark {
} }
} }
} }
// Styling for modal dialogs
@if $_include-modal {
[type="checkbox"].#{$modal-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
& + div {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: var(#{$modal-overlay-color-var});
& .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
& .#{$modal-close-name} {
position: absolute;
top: 0;
right: 0;
width: $modal-close-size;
height: $modal-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0;
cursor: pointer;
transition: background 0.3s;
&:before {
display: block;
content: '\00D7';
color: var(#{$modal-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $modal-close-size;
line-height: 1;
text-align: center;
}
&:hover, &:focus {
background: var(#{$modal-close-hover-back-color-var});
}
}
}
}
&:checked + div {
display: flex;
flex: 0 1 auto;
z-index: 1200;
& .card {
& .#{$modal-close-name} {
z-index: 1211;
}
}
}
}
}