|
|
- @import "var";
- @import "reset";
-
- // float elements
-
- .left {
- float: left;
- }
-
- .right {
- float: right;
- }
-
- .clear::after {
- clear: both;
- content: " ";
- width: 0;
- height: 0;
- display: block;
- }
-
- .hide {
- display: none;
- }
-
- // 12 based grids
-
- .grid-1-12 {
- width: 8.33%;
- }
-
- .grid-2-12,
- .grid-1-6 {
- width: 16.67%;
- }
-
- .grid-3-12,
- .grid-1-4 {
- width: 25%;
- }
-
- .grid-4-12,
- .grid-1-3 {
- width: 33%;
- }
-
- .grid-5-12 {
- width: 41.67%;
- }
-
- .grid-6-12,
- .grid-1-2 {
- width: 50%;
- }
-
- .grid-7-12 {
- width: 58.33%;
- }
-
- .grid-8-12,
- .grid-2-3 {
- width: 66.67%;
- }
-
- .grid-9-12,
- .grid-3-4 {
- width: 75%;
- }
-
- .grid-10-12,
- .grid-5-6 {
- width: 83.33%;
- }
-
- .grid-11-12 {
- width: 91.67%;
- }
-
- *[class*="grid-"] {
- box-sizing: content-box;
- }
-
- // 5 based
-
- .grid-1-5 {
- width: 20%;
- }
-
- .grid-2-5 {
- width: 40%;
- }
-
- .grid-3-5 {
- width: 60%;
- }
-
- .grid-4-5 {
- width: 80%;
- }
|