mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-09 15:26:29 +02:00
Code Issues Releases Wiki Activity

Grid reordering classes

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-11 12:39:39 +02:00
parent a2bc9e4835
commit 1c7e57c1bd
6 changed files with 119 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
dist/mini-default.css vendored
View File

@@ -260,6 +260,18 @@ a {
.col-sm-offset-11 {
margin-left: 91.66667%; }
.col-sm-normal {
-webkit-order: initial;
order: initial; }
.col-sm-first {
-webkit-order: -999;
order: -999; }
.col-sm-last {
-webkit-order: 999;
order: 999; }
@media (min-width: 800px) {
.col-md,
[class^='col-md-'],
@@ -372,7 +384,19 @@ a {
margin-left: 83.33333%; }
.col-md-offset-11 {
margin-left: 91.66667%; } }
margin-left: 91.66667%; }
.col-md-normal {
-webkit-order: initial;
order: initial; }
.col-md-first {
-webkit-order: -999;
order: -999; }
.col-md-last {
-webkit-order: 999;
order: 999; } }
@media (min-width: 1080px) {
.col-lg,
[class^='col-lg-'],
@@ -485,7 +509,19 @@ a {
margin-left: 83.33333%; }
.col-lg-offset-11 {
margin-left: 91.66667%; } }
margin-left: 91.66667%; }
.col-lg-normal {
-webkit-order: initial;
order: initial; }
.col-lg-first {
-webkit-order: -999;
order: -999; }
.col-lg-last {
-webkit-order: 999;
order: 999; } }
header {
display: block;
height: 36px;

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View File

@@ -416,3 +416,4 @@
- Changed the appearance of `button-group`, it will now use `border` and `border-radius` more creatively to get rid of unnecessary and excessive styling.
- Added mixin `make-box-shadow-generic` in `utility`, used it to create a class for `box-shadow:none;` just in case.
- Added mixin in `progress` `make-spinner-donut-alt-style` for `spinner-donut` and created `large` variant with it.
- Added extra variables and styles for `grid` reordeing for `first`, `last` and `normal` (reset).

12
docs/v2/index.html
View File

@@ -29,6 +29,7 @@
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #b71c1c; }
</style>
</head>
<body>
@@ -206,6 +207,17 @@
<div class="box-colored"></div>
</div>
</div>
<div class="row">
<div class="col-sm col-md-6 col-lg">
<div class="box-colored"></div>
</div>
<div class="col-sm col-sm-first col-md-normal col-lg-last">
<div class="box-colored red"></div>
</div>
<div class="col-sm col-lg-6">
<div class="box-colored"></div>
</div>
</div>
</div>
</div>
</div>

3
src/flavors/mini-default.scss
View File

@@ -118,6 +118,9 @@ $grid-container-side-padding: 10px; // Padding for the grid container
$grid-row-name: 'row'; // Class name for the grid's rows
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$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

63
src/mini/_grid.scss
View File

@@ -29,6 +29,9 @@ $grid-column-prefix: 'col' !default; // Class name prefix for the grid
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets
$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-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty
$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid
// Legacy grid system definitions.
@if $use-four-step-grid {
@@ -76,6 +79,18 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
}
}
}
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-lst-suffix} {
-webkit-order: 999;
order: 999;
}
}
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid
@@ -127,6 +142,18 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
}
}
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999;
order: 999;
}
}
}
// Non-legacy grid system definitions.
@@ -175,6 +202,18 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
}
}
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999;
order: 999;
}
}
// The rest is mixed definitions.
$grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid
@@ -225,6 +264,18 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
}
}
}
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999;
order: 999;
}
}
$grid-large-breakpoint: 1200px !default; // Large screen breakpoint for grid
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
@@ -274,4 +325,16 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
}
}
}
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial;
order: initial;
}
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999;
order: -999;
}
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999;
order: 999;
}
}