From 85abbcb3821902e381fe6a8435a2b7293ff0dd32 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 21 Oct 2016 14:24:55 +0300 Subject: [PATCH] Grid system medium and large screens --- docs/v2/DEVLOG.md | 1 + docs/v2/index.html | 12 +- flavors/v2/mini-default.css | 226 ++++++++++++++++++++++++++++++++ flavors/v2/mini-default.min.css | 2 +- scss/v2/mini-core/_grid.scss | 100 +++++++++++++- 5 files changed, 332 insertions(+), 9 deletions(-) diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index c38a177..c7f68fe 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -151,3 +151,4 @@ - Added set of variables for class names, prefixes, columns, breakpoints etc for grid system. - Added definitions for extra small screen sizes, using loops etc. Optimized accordingly, tested on local demo. - Added definitions for small screen sizes, optimized, test on local demo. +- Added definitions for medium and large screen sizes, optimized and tested locally. diff --git a/docs/v2/index.html b/docs/v2/index.html index 0fc536e..6ac82cb 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -56,24 +56,24 @@
-
+
col-xs
-
+
col-xs-2
-
+
col-xs-3 col-xs-offset-1
-
+
col-xs
-
+
col-xs: The first JavaScript engine. Coffeescript is a JavaScript program could then interrogate and manipulate to dynamically generate Web pages. The name is by far the most common host environment. JavaScript programmers. Facebook for building user interfaces.
-
+
col-xs: I/O, such as Self and Scheme. Javascript NoSQL database. AngularJS, and Node. ECMAScript 3 compliant. Coffeescript is a package manager for front-end dependencies. JSX is an assertion library used with a JavaScript checker and optimizer. PhantomJS is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words. ECMAScript ES is the standardized specification of the desired DOM is a software design pattern used to speed up the setup and installation process of a function that gets called immediately after declaration Jasmine is a JavaScript web framework that allows rapid prototypic web development. LocalForage is a structural framework for dynamic web apps. ECMAScript language specification. JavaScript ecosystem in a user's browser rather than on a Web form to make it happen. The name is by analogy to an architectural facade. ES is the only language that the *revealing module pattern* was engineered as a way to ensure that all methods and variables are kept private until they are explicitly exposed. SJSJ is a generator builder to speed up consecutive function calls by caching the result of calls with identical input.
diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index 2898573..2402775 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -395,6 +395,232 @@ progress { .col-sm-offset-11 { margin-left: 91.66667%; } } +@media only screen and (min-width: 1024px) { + .col-md, + [class^='col-md-'], + [class^='col-md-offset-'] { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0 4px; } + + .col-md { + -webkit-box-flex: 1; + max-width: 100%; + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; } + + .col-md-1 { + max-width: 8.33333%; + -webkit-flex-basis: 8.33333%; + flex-basis: 8.33333%; } + + .col-md-2 { + max-width: 16.66667%; + -webkit-flex-basis: 16.66667%; + flex-basis: 16.66667%; } + + .col-md-3 { + max-width: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; } + + .col-md-4 { + max-width: 33.33333%; + -webkit-flex-basis: 33.33333%; + flex-basis: 33.33333%; } + + .col-md-5 { + max-width: 41.66667%; + -webkit-flex-basis: 41.66667%; + flex-basis: 41.66667%; } + + .col-md-6 { + max-width: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; } + + .col-md-7 { + max-width: 58.33333%; + -webkit-flex-basis: 58.33333%; + flex-basis: 58.33333%; } + + .col-md-8 { + max-width: 66.66667%; + -webkit-flex-basis: 66.66667%; + flex-basis: 66.66667%; } + + .col-md-9 { + max-width: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; } + + .col-md-10 { + max-width: 83.33333%; + -webkit-flex-basis: 83.33333%; + flex-basis: 83.33333%; } + + .col-md-11 { + max-width: 91.66667%; + -webkit-flex-basis: 91.66667%; + flex-basis: 91.66667%; } + + .col-md-12 { + max-width: 100%; + -webkit-flex-basis: 100%; + flex-basis: 100%; } + + .col-md-offset-0 { + margin-left: 0; } + + .col-md-offset-1 { + margin-left: 8.33333%; } + + .col-md-offset-2 { + margin-left: 16.66667%; } + + .col-md-offset-3 { + margin-left: 25%; } + + .col-md-offset-4 { + margin-left: 33.33333%; } + + .col-md-offset-5 { + margin-left: 41.66667%; } + + .col-md-offset-6 { + margin-left: 50%; } + + .col-md-offset-7 { + margin-left: 58.33333%; } + + .col-md-offset-8 { + margin-left: 66.66667%; } + + .col-md-offset-9 { + margin-left: 75%; } + + .col-md-offset-10 { + margin-left: 83.33333%; } + + .col-md-offset-11 { + margin-left: 91.66667%; } } +@media only screen and (min-width: 1200px) { + .col-lg, + [class^='col-lg-'], + [class^='col-lg-offset-'] { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0 4px; } + + .col-lg { + -webkit-box-flex: 1; + max-width: 100%; + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; } + + .col-lg-1 { + max-width: 8.33333%; + -webkit-flex-basis: 8.33333%; + flex-basis: 8.33333%; } + + .col-lg-2 { + max-width: 16.66667%; + -webkit-flex-basis: 16.66667%; + flex-basis: 16.66667%; } + + .col-lg-3 { + max-width: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; } + + .col-lg-4 { + max-width: 33.33333%; + -webkit-flex-basis: 33.33333%; + flex-basis: 33.33333%; } + + .col-lg-5 { + max-width: 41.66667%; + -webkit-flex-basis: 41.66667%; + flex-basis: 41.66667%; } + + .col-lg-6 { + max-width: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; } + + .col-lg-7 { + max-width: 58.33333%; + -webkit-flex-basis: 58.33333%; + flex-basis: 58.33333%; } + + .col-lg-8 { + max-width: 66.66667%; + -webkit-flex-basis: 66.66667%; + flex-basis: 66.66667%; } + + .col-lg-9 { + max-width: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; } + + .col-lg-10 { + max-width: 83.33333%; + -webkit-flex-basis: 83.33333%; + flex-basis: 83.33333%; } + + .col-lg-11 { + max-width: 91.66667%; + -webkit-flex-basis: 91.66667%; + flex-basis: 91.66667%; } + + .col-lg-12 { + max-width: 100%; + -webkit-flex-basis: 100%; + flex-basis: 100%; } + + .col-lg-offset-0 { + margin-left: 0; } + + .col-lg-offset-1 { + margin-left: 8.33333%; } + + .col-lg-offset-2 { + margin-left: 16.66667%; } + + .col-lg-offset-3 { + margin-left: 25%; } + + .col-lg-offset-4 { + margin-left: 33.33333%; } + + .col-lg-offset-5 { + margin-left: 41.66667%; } + + .col-lg-offset-6 { + margin-left: 50%; } + + .col-lg-offset-7 { + margin-left: 58.33333%; } + + .col-lg-offset-8 { + margin-left: 66.66667%; } + + .col-lg-offset-9 { + margin-left: 75%; } + + .col-lg-offset-10 { + margin-left: 83.33333%; } + + .col-lg-offset-11 { + margin-left: 91.66667%; } } /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index 588f8b4..1805782 100644 --- a/flavors/v2/mini-default.min.css +++ b/flavors/v2/mini-default.min.css @@ -1 +1 @@ -*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-xs,[class^=col-xs-],[class^=col-xs-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-xs{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-xs-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-xs-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-xs-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-xs-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-xs-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-xs-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-xs-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-xs-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-xs-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-xs-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-xs-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-xs-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333%}.col-xs-offset-2{margin-left:16.66667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333%}.col-xs-offset-5{margin-left:41.66667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333%}.col-xs-offset-8{margin-left:66.66667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333%}.col-xs-offset-11{margin-left:91.66667%}@media only screen and (min-width:768px){.col-sm,[class^=col-sm-],[class^=col-sm-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{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}details,menu{display:block}summary{display:list-item}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:20em}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0} \ No newline at end of file +*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-xs,[class^=col-xs-],[class^=col-xs-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-xs{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-xs-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-xs-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-xs-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-xs-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-xs-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-xs-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-xs-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-xs-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-xs-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-xs-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-xs-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-xs-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333%}.col-xs-offset-2{margin-left:16.66667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333%}.col-xs-offset-5{margin-left:41.66667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333%}.col-xs-offset-8{margin-left:66.66667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333%}.col-xs-offset-11{margin-left:91.66667%}@media only screen and (min-width:768px){.col-sm,[class^=col-sm-],[class^=col-sm-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}}@media only screen and (min-width:1024px){.col-md,[class^=col-md-],[class^=col-md-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}}@media only screen and (min-width:1200px){.col-lg,[class^=col-lg-],[class^=col-lg-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{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}details,menu{display:block}summary{display:list-item}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:20em}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0} \ No newline at end of file diff --git a/scss/v2/mini-core/_grid.scss b/scss/v2/mini-core/_grid.scss index 17e35a4..0f950f7 100644 --- a/scss/v2/mini-core/_grid.scss +++ b/scss/v2/mini-core/_grid.scss @@ -78,7 +78,8 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g } } } -// Small screens breakpoint. + +// Small screen breakpoint. @media only screen and (min-width: #{$grid-small-breakpoint}){ // Grid column generic definitions for small screens. .#{$grid-column-prefix}-#{$grid-small-prefix}, @@ -124,5 +125,100 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g } } } -// +} + +// Medium screen breakpoint. +@media only screen and (min-width: #{$grid-medium-breakpoint}){ +// Grid column generic definitions for medium screens. +.#{$grid-column-prefix}-#{$grid-medium-prefix}, +[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'], +[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] { + box-sizing: border-box; +// Old syntax + -webkit-box-flex: 0; +// New syntax + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0 4px; +} +// Grid column specific definition for flexible column. +.#{$grid-column-prefix}-#{$grid-medium-prefix} { +// Old syntax + -webkit-box-flex: 1; + max-width: 100%; +// New syntax + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; +} +// Grid column specific definitions for predefined columns. +@for $i from 1 through $grid-column-count { +.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} { +// Old syntax + max-width: #{($i * 100% / $grid-column-count)}; +// New syntax + -webkit-flex-basis: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; +} +} +// Grid column specific definitions for offset columns. +@for $i from 0 through ($grid-column-count - 1) { +.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-#{$i} { +@if $i == 0 { + margin-left: 0; +} +@else { + margin-left: #{($i * 100% / $grid-column-count)}; +} +} +} +} + +// Large screen breakpoint. +@media only screen and (min-width: #{$grid-large-breakpoint}){ +// Grid column generic definitions for large screens. +.#{$grid-column-prefix}-#{$grid-large-prefix}, +[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'], +[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] { + box-sizing: border-box; +// Old syntax + -webkit-box-flex: 0; +// New syntax + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0 4px; +} +// Grid column specific definition for flexible column. +.#{$grid-column-prefix}-#{$grid-large-prefix} { +// Old syntax + -webkit-box-flex: 1; + max-width: 100%; +// New syntax + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; +} +// Grid column specific definitions for predefined columns. +@for $i from 1 through $grid-column-count { +.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} { +// Old syntax + max-width: #{($i * 100% / $grid-column-count)}; +// New syntax + -webkit-flex-basis: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; +} +} +// Grid column specific definitions for offset columns. +@for $i from 0 through ($grid-column-count - 1) { +.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-#{$i} { +@if $i == 0 { + margin-left: 0; +} +@else { + margin-left: #{($i * 100% / $grid-column-count)}; +} +} +} } \ No newline at end of file