From 40da09731a157729bba08c9e8097d3543d1b3f86 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 7 Sep 2016 11:19:28 +0300 Subject: [PATCH] Extra component: modal dialogs --- README.md | 2 +- docs/index.html | 19 +++++++++ flavors/mini-default.css | 69 ++++++++++++++++++++++++++++++ flavors/mini-default.min.css | 2 +- flavors/mini-default.scss | 18 +++++++- scss/flavor.scss | 18 +++++++- scss/mini-extra/_modal.scss | 83 ++++++++++++++++++++++++++++++++++++ 7 files changed, 207 insertions(+), 4 deletions(-) create mode 100644 scss/mini-extra/_modal.scss diff --git a/README.md b/README.md index 7e16878..c50e426 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/docs/index.html b/docs/index.html index ed0d416..fd7ac51 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,6 +25,21 @@
+ + +
+ +
+

Modal title

+
+

Lorem ipsum etc.

+
+ +
+ +
+ +
@@ -154,6 +169,10 @@

Extra modules

Coming soon! In the meantime, why don't you check out the framework's Github page?

+ + + +
diff --git a/flavors/mini-default.css b/flavors/mini-default.css index ce8ec60..b918cb2 100644 --- a/flavors/mini-default.css +++ b/flavors/mini-default.css @@ -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; } diff --git a/flavors/mini-default.min.css b/flavors/mini-default.min.css index 772b327..1fa966f 100644 --- a/flavors/mini-default.min.css +++ b/flavors/mini-default.min.css @@ -1 +1 @@ -html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #cfcfcf;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#eaeaea;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#fdfdfd}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.3em}.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:#2678b3}.frm input[disabled],.frm select[disabled],.frm textarea[disabled]{cursor:not-allowed;opacity:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;border-color:#b5b5b5}.frm input[type=checkbox],.frm input[type=radio]{display:inline-block}.frm select{height:1.9em}.frm select[multiple]{height:auto}.frm label{margin:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{display:inline-block}.frm.aligned .ctrl-group label{text-align:right;vertical-align:middle;width:15em;margin-top:0}.frm .ctrl-group{margin:0 0 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #bdbdbd}.tbl td,.tbl th{overflow:visible;border-left:1px solid #bdbdbd;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#d9d9d9;color:#111;text-align:left}.tbl tbody{background-color:#f5f5f5;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#ececec}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #bdbdbd}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #bdbdbd}.nav{box-sizing:border-box;background-color:#272727}.nav .logo{font-size:135%;color:#ddd}.nav ul{display:inline-block;list-style:none;margin:0;padding:0}.nav ul li{display:inline-block;margin:0;white-space:nowrap}.nav ul li *{display:inline-block;padding:8px;color:#ddd;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#ddd;background:#141414}.nav ul li .link.disabled,.nav ul li .link[disabled]{cursor:not-allowed;opacity:.65}.nav.vertical ul,.nav.vertical ul li{display:block}.nav.vertical ul li *{width:100%;padding:8px 0}.nav.fixed{position:fixed;left:0;top:0;z-index:999;width:100%}.nav.fixed.vertical{height:100%;width:16.66667%}.nav.fixed.vertical ul{width:100%}.nav.fixed.vertical ul li{display:block}.nav+label{display:none;font-weight:700;margin:10px;font-size:1.75em;padding:8px;color:#ddd;background-color:#272727;width:auto;position:fixed;z-index:1000;top:0;right:0}.nav+label:before{position:relative;content:'\2630'}.nav+label:active,.nav+label:focus,.nav+label:hover{background:#141414}@media (max-width:768px){.nav{overflow:auto}.nav.fixed{display:none}.nav.fixed+label{display:block}input[type=checkbox]:checked+.nav.fixed{display:block;width:100%;height:100%}input[type=checkbox]:checked+.nav.fixed ul,input[type=checkbox]:checked+.nav.fixed ul li{display:block}input[type=checkbox]:checked+.nav.fixed ul li *{width:100%;padding:8px 0}input[type=checkbox]:checked+.nav.fixed+label:before{content:'\00d7'}}img.thumb{padding:.25em;border:1px solid #ccc;border-radius:4px}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:4px!important}.circle{border-radius:50%!important}.txt-blue{color:#3f84b3!important}.txt-green{color:#2db747!important}.txt-red{color:#ea4848!important}.bg-blue{background-color:#3f84b3!important}.bg-green{background-color:#2db747!important}.bg-red{background-color:#ea4848!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-top:.35em solid #222}.close{display:inline-block;vertical-align:middle;line-height:1;color:#aaa;font-size:1.3em;font-weight:700;cursor:pointer}.close:before{content:'\00d7'}.close:hover{color:#777}.drg-left{float:left!important}.drg-right{float:right!important}.ct-block{display:block;margin-left:auto;margin-right:auto}.cf:after,.cf:before{content:"";display:table;clear:both}.hidden{display:none!important}.lbl{display:inline;padding:6px 10px;color:#eee;background-color:#777;border-radius:4px}.lbl:empty{display:none}.lbl.blue{color:#eee;background:#3f84b3}.lbl.green{color:#eee;background:#2db747}.lbl.red{color:#eee;background:#ea4848}.bdg{display:inline;padding:3px 8px;color:#eee;background-color:#777;border-radius:8px}.bdg:empty{display:none}.bdg.blue{color:#eee;background:#3f84b3}.bdg.green{color:#eee;background:#2db747}.bdg.red{color:#eee;background:#ea4848}.tabs{position:relative;min-height:250px;width:100%}.tabs input[type=radio]{display:none}.tabs input[type=radio]+div{display:inline}.tabs input[type=radio]+div>label{position:reative;float:left;margin-right:3px;left:1px;height:40px;padding:8px 14px;color:#2678b3;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px 4px 0 0;cursor:pointer}.tabs input[type=radio]+div>label:active,.tabs input[type=radio]+div>label:focus,.tabs input[type=radio]+div>label:hover{background:#dcdcdc}.tabs input[type=radio]+div>label+div{position:absolute;z-index:-2;left:0;top:39px;bottom:0;right:0;padding:20px;background:#fff;border:1px solid #ccc}.tabs input[type=radio]:checked+div>label{color:#222;background:#fff;border-top:3px solid #2678b3;border-bottom:1px solid #fff}.tabs input[type=radio]:checked+div>label+div{position:absolute;z-index:-1} \ No newline at end of file +html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #cfcfcf;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#eaeaea;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#fdfdfd}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.3em}.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:#2678b3}.frm input[disabled],.frm select[disabled],.frm textarea[disabled]{cursor:not-allowed;opacity:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;border-color:#b5b5b5}.frm input[type=checkbox],.frm input[type=radio]{display:inline-block}.frm select{height:1.9em}.frm select[multiple]{height:auto}.frm label{margin:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{display:inline-block}.frm.aligned .ctrl-group label{text-align:right;vertical-align:middle;width:15em;margin-top:0}.frm .ctrl-group{margin:0 0 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #bdbdbd}.tbl td,.tbl th{overflow:visible;border-left:1px solid #bdbdbd;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#d9d9d9;color:#111;text-align:left}.tbl tbody{background-color:#f5f5f5;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#ececec}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #bdbdbd}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #bdbdbd}.nav{box-sizing:border-box;background-color:#272727}.nav .logo{font-size:135%;color:#ddd}.nav ul{display:inline-block;list-style:none;margin:0;padding:0}.nav ul li{display:inline-block;margin:0;white-space:nowrap}.nav ul li *{display:inline-block;padding:8px;color:#ddd;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#ddd;background:#141414}.nav ul li .link.disabled,.nav ul li .link[disabled]{cursor:not-allowed;opacity:.65}.nav.vertical ul,.nav.vertical ul li{display:block}.nav.vertical ul li *{width:100%;padding:8px 0}.nav.fixed{position:fixed;left:0;top:0;z-index:999;width:100%}.nav.fixed.vertical{height:100%;width:16.66667%}.nav.fixed.vertical ul{width:100%}.nav.fixed.vertical ul li{display:block}.nav+label{display:none;font-weight:700;margin:10px;font-size:1.75em;padding:8px;color:#ddd;background-color:#272727;width:auto;position:fixed;z-index:1000;top:0;right:0}.nav+label:before{position:relative;content:'\2630'}.nav+label:active,.nav+label:focus,.nav+label:hover{background:#141414}@media (max-width:768px){.nav{overflow:auto}.nav.fixed{display:none}.nav.fixed+label{display:block}input[type=checkbox]:checked+.nav.fixed{display:block;width:100%;height:100%}input[type=checkbox]:checked+.nav.fixed ul,input[type=checkbox]:checked+.nav.fixed ul li{display:block}input[type=checkbox]:checked+.nav.fixed ul li *{width:100%;padding:8px 0}input[type=checkbox]:checked+.nav.fixed+label:before{content:'\00d7'}}img.thumb{padding:.25em;border:1px solid #ccc;border-radius:4px}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:4px!important}.circle{border-radius:50%!important}.txt-blue{color:#3f84b3!important}.txt-green{color:#2db747!important}.txt-red{color:#ea4848!important}.bg-blue{background-color:#3f84b3!important}.bg-green{background-color:#2db747!important}.bg-red{background-color:#ea4848!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-top:.35em solid #222}.close{display:inline-block;vertical-align:middle;line-height:1;color:#aaa;font-size:1.3em;font-weight:700;cursor:pointer}.close:before{content:'\00d7'}.close:hover{color:#777}.drg-left{float:left!important}.drg-right{float:right!important}.ct-block{display:block;margin-left:auto;margin-right:auto}.cf:after,.cf:before{content:"";display:table;clear:both}.hidden{display:none!important}.lbl{display:inline;padding:6px 10px;color:#eee;background-color:#777;border-radius:4px}.lbl:empty{display:none}.lbl.blue{color:#eee;background:#3f84b3}.lbl.green{color:#eee;background:#2db747}.lbl.red{color:#eee;background:#ea4848}.bdg{display:inline;padding:3px 8px;color:#eee;background-color:#777;border-radius:8px}.bdg:empty{display:none}.bdg.blue{color:#eee;background:#3f84b3}.bdg.green{color:#eee;background:#2db747}.bdg.red{color:#eee;background:#ea4848}.tabs{position:relative;min-height:250px;width:100%}.tabs input[type=radio]{display:none}.tabs input[type=radio]+div{display:inline}.tabs input[type=radio]+div>label{position:reative;float:left;margin-right:3px;left:1px;height:40px;padding:8px 14px;color:#2678b3;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px 4px 0 0;cursor:pointer}.tabs input[type=radio]+div>label:active,.tabs input[type=radio]+div>label:focus,.tabs input[type=radio]+div>label:hover{background:#dcdcdc}.tabs input[type=radio]+div>label+div{position:absolute;z-index:-2;left:0;top:39px;bottom:0;right:0;padding:20px;background:#fff;border:1px solid #ccc}.tabs input[type=radio]:checked+div>label{color:#222;background:#fff;border-top:3px solid #2678b3;border-bottom:1px solid #fff}.tabs input[type=radio]:checked+div>label+div{position:absolute;z-index:-1}.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,.5)}.modal:checked+div{height:100%;opacity:1}.modal:checked+div>label{background-color:rgba(0,0,0,.35);position:fixed;width:100%;height:100%;top:0}.modal+div>div .close{position:absolute;top:20px;right:20px} \ No newline at end of file diff --git a/flavors/mini-default.scss b/flavors/mini-default.scss index 9341c97..69297ad 100644 --- a/flavors/mini-default.scss +++ b/flavors/mini-default.scss @@ -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); \ No newline at end of file +@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); \ No newline at end of file diff --git a/scss/flavor.scss b/scss/flavor.scss index ac4da4f..b8a0667 100644 --- a/scss/flavor.scss +++ b/scss/flavor.scss @@ -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); \ No newline at end of file +@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); \ No newline at end of file diff --git a/scss/mini-extra/_modal.scss b/scss/mini-extra/_modal.scss new file mode 100644 index 0000000..76b6901 --- /dev/null +++ b/scss/mini-extra/_modal.scss @@ -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; + } +} \ No newline at end of file