diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 62cc3b2..7c91416 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -177,4 +177,9 @@ - Moved `::-webkit-file-upload-button` fixes to the `button` module. - Proof-of-concept for `button` module defaults and core, file input is not styled yet (will be done via label hack). - *TODO* Softcode the `button` module's defaults, add extra styles, classes etc. -- Deployed live demo with hardcoded buttons to test. \ No newline at end of file +- Deployed live demo with hardcoded buttons to test. + +## 20161024 + +- Rebuilt grid system to work with 3 screen sizes instead of 4. Legacy system is now used only if a flag (`$use-four-step-grid`) is enabled. +- Three-step grid breakpoints tweaked to `800px` and `1080px` accordingly. \ No newline at end of file diff --git a/docs/v2/index.html b/docs/v2/index.html index e77e918..4bddcae 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -30,7 +30,7 @@
-
+

mini.css

@@ -41,7 +41,7 @@
-
+

Minimal

@@ -49,7 +49,7 @@

mini.css is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!

-
+

Reponsive

@@ -57,7 +57,7 @@

mini.css is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!

-
+

Style-agnostic

@@ -67,7 +67,7 @@
-
+

Below you can see a showcase of the features and styles included in the default flavor of mini.css.

@@ -75,36 +75,36 @@
-
+

Typography Styles for common textual elements

-
+

Heading 1 Subheading

-
+

Heading 2 Subheading

-
+

Heading 3 Subheading

-
+

Heading 4 Subheading

-
+
Heading 5 Subheading
-
+
Heading 6 Subheading
-
+

This is a paragraph with some sample text. Did you know mini.css v2.0 is codenamed Fermion? No? Well, now you do! Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some inline code or some sample input. Oh, also small text is cool, along with its siblings: the subscripthi! and the superscripthello!. We use highlights quite a lot as well. Apart from the primary color, you can also try the secondary and tertiary colors. If you wanna be fancy, maybe use a tag or a bubble. All of these work well inside headings and the like. To finish our typography tour, check out the preformatted code block below.


@@ -119,7 +119,7 @@
-
+

Grid system Easy layout using flexbox

@@ -127,64 +127,64 @@
-
+

mini.css uses the Flexible Layout Module (commonly known as flexbox) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The container of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the row class and columns can be created using the usual col-SZ-XX syntax where SZ and XX are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the col-SZ-offset-XX syntax. The default grid is separated into 12 vertical columns. You can see some examples below.


-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -192,7 +192,7 @@
-
+

Common Elements Styles for common HTML elements

@@ -200,7 +200,7 @@
-
+

mini.css adds modern styles for many of the HTML elements.


Progress bars

diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index 297cdda..ac5bf76 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -137,16 +137,16 @@ a { -webkit-flex-flow: row wrap; flex-flow: row wrap; } -.col-xs, -[class^='col-xs-'], -[class^='col-xs-offset-'] { +.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-xs { +.col-sm { -webkit-box-flex: 1; max-width: 100%; -webkit-flex-grow: 1; @@ -154,216 +154,103 @@ a { -webkit-flex-basis: 0; flex-basis: 0; } -.col-xs-1 { +.col-sm-1 { max-width: 8.33333%; -webkit-flex-basis: 8.33333%; flex-basis: 8.33333%; } -.col-xs-2 { +.col-sm-2 { max-width: 16.66667%; -webkit-flex-basis: 16.66667%; flex-basis: 16.66667%; } -.col-xs-3 { +.col-sm-3 { max-width: 25%; -webkit-flex-basis: 25%; flex-basis: 25%; } -.col-xs-4 { +.col-sm-4 { max-width: 33.33333%; -webkit-flex-basis: 33.33333%; flex-basis: 33.33333%; } -.col-xs-5 { +.col-sm-5 { max-width: 41.66667%; -webkit-flex-basis: 41.66667%; flex-basis: 41.66667%; } -.col-xs-6 { +.col-sm-6 { max-width: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; } -.col-xs-7 { +.col-sm-7 { max-width: 58.33333%; -webkit-flex-basis: 58.33333%; flex-basis: 58.33333%; } -.col-xs-8 { +.col-sm-8 { max-width: 66.66667%; -webkit-flex-basis: 66.66667%; flex-basis: 66.66667%; } -.col-xs-9 { +.col-sm-9 { max-width: 75%; -webkit-flex-basis: 75%; flex-basis: 75%; } -.col-xs-10 { +.col-sm-10 { max-width: 83.33333%; -webkit-flex-basis: 83.33333%; flex-basis: 83.33333%; } -.col-xs-11 { +.col-sm-11 { max-width: 91.66667%; -webkit-flex-basis: 91.66667%; flex-basis: 91.66667%; } -.col-xs-12 { +.col-sm-12 { max-width: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; } -.col-xs-offset-0 { +.col-sm-offset-0 { margin-left: 0; } -.col-xs-offset-1 { +.col-sm-offset-1 { margin-left: 8.33333%; } -.col-xs-offset-2 { +.col-sm-offset-2 { margin-left: 16.66667%; } -.col-xs-offset-3 { +.col-sm-offset-3 { margin-left: 25%; } -.col-xs-offset-4 { +.col-sm-offset-4 { margin-left: 33.33333%; } -.col-xs-offset-5 { +.col-sm-offset-5 { margin-left: 41.66667%; } -.col-xs-offset-6 { +.col-sm-offset-6 { margin-left: 50%; } -.col-xs-offset-7 { +.col-sm-offset-7 { margin-left: 58.33333%; } -.col-xs-offset-8 { +.col-sm-offset-8 { margin-left: 66.66667%; } -.col-xs-offset-9 { +.col-sm-offset-9 { margin-left: 75%; } -.col-xs-offset-10 { +.col-sm-offset-10 { margin-left: 83.33333%; } -.col-xs-offset-11 { +.col-sm-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) { +@media only screen and (min-width: 800px) { .col-md, [class^='col-md-'], [class^='col-md-offset-'] { @@ -476,7 +363,7 @@ a { .col-md-offset-11 { margin-left: 91.66667%; } } -@media only screen and (min-width: 1200px) { +@media only screen and (min-width: 1080px) { .col-lg, [class^='col-lg-'], [class^='col-lg-offset-'] { diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index 836642c..ff5db44 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}input{overflow:visible}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}.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%}}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;border-radius:2px;margin:0 auto}caption{font-size:1.5em;margin:6px 0 12px}tr{padding:6px}td,th{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}th{border-top:0;background:#eceff1}td:first-child,th:first-child{border-left:0}@media only screen and (max-width:768px){table{border-collapse:collapse;border:0;width:100%}thead{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}tr{display:block;border:1px solid #bdbdbd;border-radius:2px;margin-bottom:10px}td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}td:before{content:attr(data-label);float:left;font-weight:700}td:last-child{border-bottom:0}}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}[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=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button{overflow:visible;text-transform:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=button],[type=reset],[type=submit],button{display:inline-block;background:rgba(207,216,220,.75);color:#212121;border:0;padding:4px 6px;margin:4px;border-radius:2px;transition:all .3s ease 0s;cursor:pointer}[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,button:active,button:focus,button:hover{background:#cfd8dc}[type=button]:disabled,[type=button][disabled],[type=reset]:disabled,[type=reset][disabled],[type=submit]:disabled,[type=submit][disabled],button:disabled,button[disabled]{cursor:not-allowed;opacity:.65}select{text-transform:none}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}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}input{overflow:visible}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}.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-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:800px){.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:1080px){.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%}}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;border-radius:2px;margin:0 auto}caption{font-size:1.5em;margin:6px 0 12px}tr{padding:6px}td,th{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}th{border-top:0;background:#eceff1}td:first-child,th:first-child{border-left:0}@media only screen and (max-width:768px){table{border-collapse:collapse;border:0;width:100%}thead{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}tr{display:block;border:1px solid #bdbdbd;border-radius:2px;margin-bottom:10px}td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}td:before{content:attr(data-label);float:left;font-weight:700}td:last-child{border-bottom:0}}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}[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=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button{overflow:visible;text-transform:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=button],[type=reset],[type=submit],button{display:inline-block;background:rgba(207,216,220,.75);color:#212121;border:0;padding:4px 6px;margin:4px;border-radius:2px;transition:all .3s ease 0s;cursor:pointer}[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,button:active,button:focus,button:hover{background:#cfd8dc}[type=button]:disabled,[type=button][disabled],[type=reset]:disabled,[type=reset][disabled],[type=submit]:disabled,[type=submit][disabled],button:disabled,button[disabled]{cursor:not-allowed;opacity:.65}select{text-transform:none}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}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/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index ebb447d..9a8dd49 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -105,6 +105,8 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state // [9] - If `apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or // focused. Otherwise, the color specified in $link-hover-fore-color will be used. // Variables for grid elements +$use-four-step-grid: false; // Should the old 4-step grid system be used + // instead of the new (`true`/`false`) [1] $grid-container-name: 'container'; // Class name for the grid container $grid-container-side-padding: 10px; // Padding for the grid container (left and right only) $grid-row-name: 'row'; // Class name for the grid's rows @@ -112,13 +114,16 @@ $grid-column-prefix: 'col'; // Class name prefix for the grid's colu $grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets $grid-column-count: 12; // Number of columns in the grid (integer value only) $grid-column-padding: 0 4px; // Padding for the columns of the grid -$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid -$grid-small-breakpoint: 768px; // Small screen breakpoint for grid +//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid +//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid $grid-small-prefix: 'sm'; // Small screen class prefix for grid -$grid-medium-breakpoint: 1024px; // Medium screen breakpoint for grid +$grid-medium-breakpoint: 800px; // Medium screen breakpoint for grid $grid-medium-prefix: 'md'; // Medium screen class prefix for grid -$grid-large-breakpoint: 1200px; // Large screen breakpoint for grid +$grid-large-breakpoint: 1080px; // Large screen breakpoint for grid $grid-large-prefix: 'lg'; // Large screen class prefix for grid +// Notes: +// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with +// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint. // Variables for responsive tables $table-border-style: 1px solid #bdbdbd; // Border style for and children $table-border-radius: 2px; // Border radius for
and children diff --git a/scss/v2/mini-core/_grid.scss b/scss/v2/mini-core/_grid.scss index 6ee35c1..40225e8 100644 --- a/scss/v2/mini-core/_grid.scss +++ b/scss/v2/mini-core/_grid.scss @@ -1,5 +1,6 @@ // Definitions for the grid system. // The grid system uses the flexbox module, meaning it might be incompatible with certain browsers. +$use-four-step-grid: false !default; // Flag for the grid system choice $grid-container-name: 'container' !default; // Class name for the grid system container $grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only) // Fluid grid system container definition. @@ -29,6 +30,8 @@ $grid-column-offset-suffix: 'offset' !default; // Class name suffix for $grid-column-count: 12 !default; // Number of columns in the grid (integer value only) $grid-column-padding: 0 4px !default; // Padding for the columns of the grid $grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid +// Legacy grid system definitions. +@if $use-four-step-grid { // Grid column generic definitions for extra small screens. .#{$grid-column-prefix}-#{$grid-extra-small-prefix}, [class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'], @@ -73,8 +76,11 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr } } } +} $grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid $grid-small-prefix: 'sm' !default; // Small screen class prefix for grid +// Legacy grid system definitions. +@if $use-four-step-grid { // Small screen breakpoint. @media only screen and (min-width: #{$grid-small-breakpoint}){ // Grid column generic definitions for small screens. @@ -122,6 +128,55 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g } } } +} +// Non-legacy grid system definitions. +@else { +// Grid column generic definitions for small screens. +.#{$grid-column-prefix}-#{$grid-small-prefix}, +[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'], +[class^='#{$grid-column-prefix}-#{$grid-small-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: $grid-column-padding; +} +// Grid column specific definition for flexible column. +.#{$grid-column-prefix}-#{$grid-small-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-small-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-small-prefix}-#{$grid-column-offset-suffix}-#{$i} { +@if $i == 0 { + margin-left: 0; +} +@else { + margin-left: #{($i * 100% / $grid-column-count)}; +} +} +} +} +// The rest is mixed definitions. $grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid $grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid // Medium screen breakpoint.