mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 16:33:58 +02:00
Code Issues Releases Wiki Activity

Better modal fix (transition display was problematic) - issue #3.

Browse Source
This commit is contained in:
Angelos Chalaris
2016-09-28 21:09:41 +03:00
parent 94eddbe7ea
commit b3e2b8becd
5 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
flavors/mini-default.css
View File

@@ -1224,9 +1224,10 @@ img.thumb {
.modal + div { .modal + div {
z-index: 997; z-index: 997;
position: fixed; position: fixed;
width: 0; width: 100%;
height: 0; height: 0;
opacity: 0; opacity: 0;
display: none;
transition: opacity .3s ease-out; } transition: opacity .3s ease-out; }
.modal + div > div { .modal + div > div {
z-index: 998; z-index: 998;
@@ -1240,9 +1241,9 @@ img.thumb {
border-radius: 4px; border-radius: 4px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.modal:checked + div { .modal:checked + div {
width: 100%;
height: 100%; height: 100%;
opacity: 1; } opacity: 1;
display: block; }
.modal:checked + div > label { .modal:checked + div > label {
background-color: rgba(0, 0, 0, 0.35); background-color: rgba(0, 0, 0, 0.35);
position: fixed; position: fixed;

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

File diff suppressed because one or more lines are too long

7
flavors/mini-niteowl.css
View File

@@ -1224,9 +1224,10 @@ img.thumb {
.modal + div { .modal + div {
z-index: 997; z-index: 997;
position: fixed; position: fixed;
width: 0; width: 100%;
height: 0; height: 0;
opacity: 0; opacity: 0;
display: none;
transition: opacity .3s ease-out; } transition: opacity .3s ease-out; }
.modal + div > div { .modal + div > div {
z-index: 998; z-index: 998;
@@ -1240,9 +1241,9 @@ img.thumb {
border-radius: 4px; border-radius: 4px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.modal:checked + div { .modal:checked + div {
width: 100%;
height: 100%; height: 100%;
opacity: 1; } opacity: 1;
display: block; }
.modal:checked + div > label { .modal:checked + div > label {
background-color: rgba(0, 0, 0, 0.35); background-color: rgba(0, 0, 0, 0.35);
position: fixed; position: fixed;

2
flavors/mini-niteowl.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
scss/mini-extra/_modal.scss
View File

@@ -25,16 +25,17 @@
& + div{ & + div{
z-index: 997; z-index: 997;
position: fixed; position: fixed;
width: 0; width: 100%;
height: 0; height: 0;
opacity: 0; opacity: 0;
display: none;
@if $modal-transition-enabled == 'enabled'{ @if $modal-transition-enabled == 'enabled'{
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
} }
& > div{ & > div{
z-index: 998; z-index: 998;
position: relative; position: relative;
width: $modal-width; width: $modal-width;
color: $modal-color; color: $modal-color;
background-color: $modal-bg-color; background-color: $modal-bg-color;
margin: $modal-top-margin auto 0; margin: $modal-top-margin auto 0;
@@ -47,9 +48,9 @@
} }
} }
&:checked + div{ &:checked + div{
width: 100%;
height: 100%; height: 100%;
opacity: 1; opacity: 1;
display: block;
& > label{ & > label{
background-color: rgba(0,0,0,.35); background-color: rgba(0,0,0,.35);
position: fixed; position: fixed;