Extra component: modal dialogs
This commit is contained in:
Angelos Chalaris
parent
6f16ad2f33
commit
40da09731a
|
|
@ -16,10 +16,10 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework.
|
|||
|
||||
- **label**: label and badge styles `GZIPPED SIZE`: 208 bytes
|
||||
- **tab**: tabbed navigation `GZIPPED SIZE`: 347 bytes
|
||||
- **modal**: modal dialog prompts `GZIPPED SIZE`: 298 bytes
|
||||
|
||||
TODO:
|
||||
- Components
|
||||
- Modals (checkbox-hack)
|
||||
- Dropdowns (possibly checkbox-hack)
|
||||
- Collapse (checkbox based)
|
||||
- Also accordion (radio based)
|
||||
|
|
|
|||
|
|
@ -25,6 +25,21 @@
|
|||
</div>
|
||||
<label for="nav-toggle"></label>
|
||||
<br>
|
||||
|
||||
<input type="checkbox" id="modal-toggle" class="modal">
|
||||
<div>
|
||||
<label for="modal-toggle"></label>
|
||||
<div>
|
||||
<h3>Modal title</h3><label for="modal-toggle"><span class="close" ></span></label>
|
||||
<hr>
|
||||
<p> Lorem ipsum etc.</p>
|
||||
<hr>
|
||||
<label for="modal-toggle" class="btn blue">Close modal</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid-container">
|
||||
<div class="row">
|
||||
<div class="col xs-no md-1"></div>
|
||||
|
|
@ -154,6 +169,10 @@
|
|||
<h2 id="extra-modules">Extra modules</h2><hr>
|
||||
<p>Coming soon! <small>In the meantime, why don't you check out the framework's <a href="https://github.com/Chalarangelo/mini.css">Github page</a>?</small></p>
|
||||
|
||||
<label for="modal-toggle" class="btn blue">Open modal</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1184,3 +1184,72 @@ img.thumb {
|
|||
.tabs input[type="radio"]:checked + div > label + div {
|
||||
position: absolute;
|
||||
z-index: -1; }
|
||||
|
||||
/*
|
||||
Mixin for modal dialogs.
|
||||
Parameters:
|
||||
- $modal-name : The class name for the modal dialog.
|
||||
- $modal-color : The text color of the modal dialog.
|
||||
- $modal-bg-color : The background color of the modal dialog.
|
||||
- $modal-transition-enabled : Determines if a transition style will be applied when the modal changes states. [1]
|
||||
- $modal-shadow-enabled : Determines if a shadow should be cast from the modal dialog. [1]
|
||||
- $modal-border : The border style of the modal dialog.
|
||||
- $modal-border-radius : The border radius of the modal dialog's border.
|
||||
- $modal-padding : The padding of the modal dialog's contents.
|
||||
- $modal-top-margin : The distance of the modal dialog from the top of the parent container. [2]
|
||||
- $modal-width : The width of the modal dialog. [2]
|
||||
Notes:
|
||||
- [1] : The values of $modal-transition-enabled and $modal-shadow-enabled should be `enabled` or `disabled`.
|
||||
If an invalid value is supplied, the mixin will act as if it was `disabled`.
|
||||
- [2] : The values of $modal-top-margin and $modal-width should be in percentage (%) values to properly scale
|
||||
on all devices. However, there are no restrictions.
|
||||
*/
|
||||
/*
|
||||
Mixin for close button support inside of modal dialogs.
|
||||
Parameters:
|
||||
- $modal-name : The class name for the modal dialog. [1]
|
||||
- $close-name : The class name for the close sign utility class. [2]
|
||||
- $modal-padding : The padding of the close button. [3]
|
||||
Notes:
|
||||
- [1] : The value of $modal-name should match the value specified in the modal dialog's
|
||||
mixin, in order for this to work correctly.
|
||||
- [2] : The value of $close-name should match the value specified in the close sign utility's
|
||||
mixin, in order for this to work correctly.
|
||||
- [3] : The close button will be placed at the top right of the modal dialog. Its padding
|
||||
should be similar to the value specified for padding in the modal dialog itself, however
|
||||
it could vary based on personal preference.
|
||||
*/
|
||||
.modal {
|
||||
display: none; }
|
||||
.modal + div {
|
||||
z-index: 997;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-out; }
|
||||
.modal + div > div {
|
||||
z-index: 998;
|
||||
position: relative;
|
||||
width: 45%;
|
||||
color: #222;
|
||||
background-color: #f5f5f5;
|
||||
margin: 8.5% auto 0;
|
||||
padding: 18px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
|
||||
.modal:checked + div {
|
||||
height: 100%;
|
||||
opacity: 1; }
|
||||
.modal:checked + div > label {
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0; }
|
||||
|
||||
.modal + div > div .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px; }
|
||||
|
|
|
|||
2
flavors/mini-default.min.css
vendored
2
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -281,4 +281,20 @@ $tabs-active-stripe-style: 3px solid $a-color; // Style for the active t
|
|||
@import '../scss/mini-extra/tab';
|
||||
// Use tabs mixin to create tab system with given specs. For more information
|
||||
// refer to the _tab.scss file to check the definitions.
|
||||
@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
|
||||
@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
|
||||
//====================================================================
|
||||
// Variable definitions for the Modal module (_modal.scss)
|
||||
//====================================================================
|
||||
// Modal class names.
|
||||
$modal-class-name: modal; // Name for the modal class
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$modal-bg-color: $body-bg-color; // Background color for the modal
|
||||
$modal-color: $body-color; // Color for the text in the modal
|
||||
$modal-border: 1px solid #ccc; // Border style for the modal
|
||||
// Enable modal (_modal.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/modal';
|
||||
// Use modal mixin to create modal with given specs. For more information
|
||||
// refer to the _modal.scss file to check the definitions.
|
||||
@include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%);
|
||||
@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
|
||||
|
|
@ -281,4 +281,20 @@ $tabs-active-stripe-style: 3px solid $a-color; // Style for the active t
|
|||
@import 'mini-extra/tab';
|
||||
// Use tabs mixin to create tab system with given specs. For more information
|
||||
// refer to the _tab.scss file to check the definitions.
|
||||
@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
|
||||
@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
|
||||
//====================================================================
|
||||
// Variable definitions for the Modal module (_modal.scss)
|
||||
//====================================================================
|
||||
// Modal class names.
|
||||
$modal-class-name: modal; // Name for the modal class
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$modal-bg-color: $body-bg-color; // Background color for the modal
|
||||
$modal-color: $body-color; // Color for the text in the modal
|
||||
$modal-border: 1px solid #ccc; // Border style for the modal
|
||||
// Enable modal (_modal.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/modal';
|
||||
// Use modal mixin to create modal with given specs. For more information
|
||||
// refer to the _modal.scss file to check the definitions.
|
||||
@include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%);
|
||||
@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
|
||||
83
scss/mini-extra/_modal.scss
Normal file
83
scss/mini-extra/_modal.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
/*
|
||||
Mixin for modal dialogs.
|
||||
Parameters:
|
||||
- $modal-name : The class name for the modal dialog.
|
||||
- $modal-color : The text color of the modal dialog.
|
||||
- $modal-bg-color : The background color of the modal dialog.
|
||||
- $modal-transition-enabled : Determines if a transition style will be applied when the modal changes states. [1]
|
||||
- $modal-shadow-enabled : Determines if a shadow should be cast from the modal dialog. [1]
|
||||
- $modal-border : The border style of the modal dialog.
|
||||
- $modal-border-radius : The border radius of the modal dialog's border.
|
||||
- $modal-padding : The padding of the modal dialog's contents.
|
||||
- $modal-top-margin : The distance of the modal dialog from the top of the parent container. [2]
|
||||
- $modal-width : The width of the modal dialog. [2]
|
||||
Notes:
|
||||
- [1] : The values of $modal-transition-enabled and $modal-shadow-enabled should be `enabled` or `disabled`.
|
||||
If an invalid value is supplied, the mixin will act as if it was `disabled`.
|
||||
- [2] : The values of $modal-top-margin and $modal-width should be in percentage (%) values to properly scale
|
||||
on all devices. However, there are no restrictions.
|
||||
*/
|
||||
@mixin make-modal( $modal-name, $modal-color, $modal-bg-color, $modal-transition-enabled,
|
||||
$modal-shadow-enabled, $modal-border, $modal-border-radius,
|
||||
$modal-padding, $modal-top-margin, $modal-width ){
|
||||
.#{$modal-name}{
|
||||
display: none;
|
||||
& + div{
|
||||
z-index: 997;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
@if $modal-transition-enabled == 'enabled'{
|
||||
transition: opacity .3s ease-out;
|
||||
}
|
||||
& > div{
|
||||
z-index: 998;
|
||||
position: relative;
|
||||
width: $modal-width;
|
||||
color: $modal-color;
|
||||
background-color: $modal-bg-color;
|
||||
margin: $modal-top-margin auto 0;
|
||||
padding: $modal-padding;
|
||||
border: $modal-border;
|
||||
border-radius: $modal-border-radius;
|
||||
@if $modal-shadow-enabled == 'enabled'{
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked + div{
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
& > label{
|
||||
background-color: rgba(0,0,0,.35);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for close button support inside of modal dialogs.
|
||||
Parameters:
|
||||
- $modal-name : The class name for the modal dialog. [1]
|
||||
- $close-name : The class name for the close sign utility class. [2]
|
||||
- $modal-padding : The padding of the close button. [3]
|
||||
Notes:
|
||||
- [1] : The value of $modal-name should match the value specified in the modal dialog's
|
||||
mixin, in order for this to work correctly.
|
||||
- [2] : The value of $close-name should match the value specified in the close sign utility's
|
||||
mixin, in order for this to work correctly.
|
||||
- [3] : The close button will be placed at the top right of the modal dialog. Its padding
|
||||
should be similar to the value specified for padding in the modal dialog itself, however
|
||||
it could vary based on personal preference.
|
||||
*/
|
||||
@mixin make-modal-close-support($modal-name, $close-name, $modal-padding){
|
||||
.#{$modal-name} + div > div .#{$close-name}{
|
||||
position: absolute;
|
||||
top: $modal-padding;
|
||||
right: $modal-padding;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue