reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Flexgrid more flexible

Browse Source
This commit is contained in:
reverend
2020-08-25 15:54:04 +02:00
parent f1cb456501
commit 332ef9dc03
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/01_Layouts/flexGrid/_flexGrid.scss
View File

@@ -1,13 +1,13 @@
@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) { @mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr)); grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
grid-template-rows: repeat(auto-fill, $-item_height); grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
grid-auto-rows: $-item_height; grid-auto-rows: minmax($-item_height, 1fr);
} }
@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) { @mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) {
&__Container { &__Container {
@include RV-FlexGrid__Container($-item_width, $-item_height) : @include RV-FlexGrid__Container($-item_width, $-item_height);
} }
&__Item { &__Item {

15
public/rcss.css
View File

@@ -255,7 +255,8 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; } right: 0;
border: none; }
.RV-ElementList__Item { .RV-ElementList__Item {
margin: 0; margin: 0;
@@ -263,7 +264,8 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; } right: 0;
border: none; }
.RV-Spacing__Outer--small { .RV-Spacing__Outer--small {
margin: 10px; } margin: 10px; }
@@ -304,7 +306,8 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; } right: 0;
border: none; }
.RV-Iconized__Container--small .RV-Iconized__Icon { .RV-Iconized__Container--small .RV-Iconized__Icon {
width: 1em; width: 1em;
@@ -337,7 +340,8 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; } right: 0;
border: none; }
.RV-ImageGrid__Item { .RV-ImageGrid__Item {
margin: 0; margin: 0;
@@ -345,7 +349,8 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; } right: 0;
border: none; }
.RV-ImageGrid__Container { .RV-ImageGrid__Container {
display: grid; display: grid;